[文档] 适配github-page

build/config.js

@@ -1,7 +1,7 @@
 var path = require('path');
 
 exports.alias = {
-  docs: path.resolve(__dirname, '../docs')
+  documents: path.resolve(__dirname, '../documents')
 };
 
 exports.vue = {

build/index.js

@@ -18,7 +18,7 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
 
   app.use(
     publicPath,
-    serveStatic('./dist', {
+    serveStatic('./docs', {
       index: ['index.html', '/']
     })
   )

build/webpack.docs.js

@@ -9,9 +9,9 @@ const config = require('./config');
 
 const webpackConfig = {
   mode: 'development',
-  entry: './docs/entry.js',
+  entry: './documents/entry.js',
   output: {
-    path: path.resolve(process.cwd(), './dist/'),
+    path: path.resolve(process.cwd(), './docs/'),
     publicPath: process.env.CI_ENV || '',
     filename: '[name].[hash:7].js',
     chunkFilename: '[name].js'
@@ -94,12 +94,12 @@ const webpackConfig = {
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
-      template: './docs/index.tpl',
+      template: './documents/index.tpl',
       filename: './index.html',
-      favicon: './docs/favicon.ico'
+      favicon: './documents/favicon.ico'
     }),
     new CopyWebpackPlugin([
-      { from: 'docs/versions.json' },
+      { from: 'documents/versions.json' },
       { from: 'animate.min.css' },
       { from: 'soulTable.css' },
       { from: 'data.json' },

dist/index.html → docs/index.html

@@ -21,7 +21,7 @@
     <div id="app"></div>
     <script src="layui/layui.js"></script>
 
-  <script type="text/javascript" src="main.2add402.js"></script></body>
+  <script type="text/javascript" src="main.1dbffd4.js"></script></body>
 
   <script>
     var ga = function() {

docs/pages/en-US/design.vue → documents/pages/en-US/design.vue

@@ -30,28 +30,28 @@
     <el-row :gutter="14" class="cards">
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/consistency.png" alt="Consistency">
+          <img src="~documents/assets/images/consistency.png" alt="Consistency">
           <h4>Consistency</h4>
           <span></span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/feedback.png" alt="Feedback">
+          <img src="~documents/assets/images/feedback.png" alt="Feedback">
           <h4>Feedback</h4>
           <span></span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/efficiency.png" alt="Efficiency">
+          <img src="~documents/assets/images/efficiency.png" alt="Efficiency">
           <h4>Efficiency</h4>
           <span></span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/controllability.png" alt="Controllability">
+          <img src="~documents/assets/images/controllability.png" alt="Controllability">
           <h4>Controllability</h4>
           <span></span>
         </div>

docs/pages/en-US/nav.vue → documents/pages/en-US/nav.vue

@@ -91,13 +91,13 @@
           <p>Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.</p>
         </el-col>
         <el-col :span="15" class="nav-demos">
-          <img src="~docs/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
           <h5>Level 1 categories</h5>
           <p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p>
-          <img src="~docs/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
           <h5>Level 2 categories</h5>
           <p>Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.</p>
-          <img src="~docs/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
           <h5>Level 3 categories</h5>
           <p>Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.</p>
         </el-col>
@@ -110,7 +110,7 @@
           <p>Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.</p>
         </el-col>
         <el-col :span="14" class="nav-demos">
-          <img src="~docs/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
           <p>Suitable for sites with few navigations and large chunks.</p>
         </el-col>
       </el-row>

docs/pages/en-US/resource.vue → documents/pages/en-US/resource.vue

@@ -129,7 +129,7 @@
   <div class="page-container page-resource">
     <h2>Resource</h2>
     <!--<div class="resource-placeholder">-->
-      <!--<img src="~docs/assets/images/resource-placeholder.svg" alt="">-->
+      <!--<img src="~documents/assets/images/resource-placeholder.svg" alt="">-->
       <!--<h4>Under construction</h4>-->
       <!--<p>More resources are being developed</p>-->
     <!--</div>-->
@@ -139,7 +139,7 @@
       <ul class="container">
         <li>
           <div class="card">
-            <img src="~docs/assets/images/Axure-Components.svg" alt="">
+            <img src="~documents/assets/images/Axure-Components.svg" alt="">
             <h3>Axure Components</h3>
             <p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>
             <a
@@ -150,7 +150,7 @@
         </li>
         <li>
           <div class="card">
-            <img src="~docs/assets/images/Sketch-Template.svg" alt="">
+            <img src="~documents/assets/images/Sketch-Template.svg" alt="">
             <h3>Sketch Template</h3>
             <p>Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.</p>
             <a
@@ -161,7 +161,7 @@
         </li>
         <!--<li>-->
           <!--<div class="card">-->
-            <!--<img src="~docs/assets/images/Module.svg" alt="">-->
+            <!--<img src="~documents/assets/images/Module.svg" alt="">-->
             <!--<h3>Interaction Design Documentation</h3>-->
             <!--<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>-->
             <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>-->

docs/pages/zh-CN/design.vue → documents/pages/zh-CN/design.vue

@@ -30,28 +30,28 @@
     <el-row :gutter="14" class="cards">
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/consistency.png" alt="Consistency">
+          <img src="~documents/assets/images/consistency.png" alt="Consistency">
           <h4>一致</h4>
           <span>Consistency</span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/feedback.png" alt="Feedback">
+          <img src="~documents/assets/images/feedback.png" alt="Feedback">
           <h4>反馈</h4>
           <span>Feedback</span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/efficiency.png" alt="Efficiency">
+          <img src="~documents/assets/images/efficiency.png" alt="Efficiency">
           <h4>效率</h4>
           <span>Efficiency</span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
-          <img src="~docs/assets/images/controllability.png" alt="Controllability">
+          <img src="~documents/assets/images/controllability.png" alt="Controllability">
           <h4>可控</h4>
           <span>Controllability</span>
         </div>

docs/pages/zh-CN/nav.vue → documents/pages/zh-CN/nav.vue

@@ -91,13 +91,13 @@
           <p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
         </el-col>
         <el-col :span="15" class="nav-demos">
-          <img src="~docs/assets/images/navbar_1.png" alt="一级类目" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_1.png" alt="一级类目" @click="enlarge(846, $event)">
           <h5>一级类目</h5>
           <p>适用于结构简单的网站：只有一级页面时，不需要使用面包屑。</p>
-          <img src="~docs/assets/images/navbar_2.png" alt="二级类目" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_2.png" alt="二级类目" @click="enlarge(846, $event)">
           <h5>二级类目</h5>
           <p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
-          <img src="~docs/assets/images/navbar_3.png" alt="三级类目" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_3.png" alt="三级类目" @click="enlarge(846, $event)">
           <h5>三级类目</h5>
           <p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
         </el-col>
@@ -110,7 +110,7 @@
           <p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
         </el-col>
         <el-col :span="14" class="nav-demos">
-          <img src="~docs/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
+          <img src="~documents/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
           <p>适用于导航较少，页面篇幅较长的网站。</p>
         </el-col>
       </el-row>

docs/pages/zh-CN/resource.vue → documents/pages/zh-CN/resource.vue

@@ -129,7 +129,7 @@
   <div class="page-container page-resource">
     <h2>资源</h2>
     <!--<div class="resource-placeholder">-->
-      <!--<img src="~docs/assets/images/resource-placeholder.svg" alt="">-->
+      <!--<img src="~documents/assets/images/resource-placeholder.svg" alt="">-->
       <!--<h4>整理中</h4>-->
       <!--<p>设计资源正在整理和完善中</p>-->
     <!--</div>-->
@@ -139,7 +139,7 @@
       <ul class="container">
         <li>
           <div class="card">
-            <img src="~docs/assets/images/Axure-Components.svg" alt="">
+            <img src="~documents/assets/images/Axure-Components.svg" alt="">
             <h3>Axure Components</h3>
             <p>通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件</p>
             <a
@@ -150,7 +150,7 @@
         </li>
         <li>
           <div class="card">
-            <img src="~docs/assets/images/Sketch-Template.svg" alt="">
+            <img src="~documents/assets/images/Sketch-Template.svg" alt="">
             <h3>Sketch Template</h3>
             <p>从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格</p>
             <a
@@ -161,7 +161,7 @@
         </li>
         <!--<li>-->
           <!--<div class="card">-->
-            <!--<img src="~docs/assets/images/Module.svg" alt="">-->
+            <!--<img src="~documents/assets/images/Module.svg" alt="">-->
             <!--<h3>组件交互文档</h3>-->
             <!--<p>进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节</p>-->
             <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">下载</a>-->