This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git

commit 7875afb6f6c47adb47522100f568c02be39ad303
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Wed Apr 8 13:59:25 2020 +0800

    feat: dynamic nav
---
 README.md                                 |  25 ++++---
 components/partials/Sidebar.vue           | 113 ++++++++++++++----------------
 configs/config.js                         |   3 +
 contents/zh/chart-types/bar.md            |   3 -
 contents/zh/chart-types/bar/simple-bar.md |   1 +
 contents/zh/chart-types/line.md           |   4 ++
 contents/zh/posts.js                      |  24 ++++---
 layouts/default.vue                       |  19 +++--
 nuxt.config.js                            |  13 ++--
 package-lock.json                         |  41 +++++++++--
 package.json                              |   5 +-
 pages/zh/_post.vue                        |   6 +-
 static/images/demo.png                    | Bin 0 -> 25960 bytes
 store/index.js                            |  11 ++-
 14 files changed, 157 insertions(+), 111 deletions(-)

diff --git a/README.md b/README.md
index fb7e13b..717982f 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,23 @@
 # echarts-handbook
 
-## Build Setup
+## Init
 
 ```bash
-# install dependencies
-$ npm install
+npm install
+```
+
+## Dev
 
-# serve with hot reload at localhost:3000
-$ npm run dev
+```bash
+npm run dev
+```
 
-# build for production and launch server
-$ npm run build
-$ npm run start
+## Release
 
-# generate static project
-$ npm run generate
+```bash
+npm run generate
 ```
 
-For detailed explanation on how things work, check out [Nuxt.js 
docs](https://nuxtjs.org).
+## Writing
+
+Add `.md` files under `contents/zh/` or `contents/en/`, and fill in the info 
in `contents/zh/posts.js` and `contents/en/posts.js`.
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index 00a1510..61d0162 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -1,44 +1,18 @@
 <template>
   <div class="bd-sidebar border-bottom-0 col-md-3 col-xl-2 col-12">
-    active: {{ active }}. {{ posts }}
+    <!-- active: {{ active }}. {{ posts }} -->
     <div class="bd-docs-nav">
-      <div class="bd-toc-item">
-        <a href="#" class="bd-toc-link">开始</a>
-        <ul class="nav bd-sidenav">
-          <li class="nav-item">
-            <a href="#" class="nav-link">第一个 ECharts 图表</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">定制主题样式</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">基本概念</a>
-          </li>
-        </ul>
-      </div>
-      <div class="bd-toc-item">
-        <a href="#" class="bd-toc-link nuxt-link-exact-active">图表类型</a>
-        <ul class="nav bd-sidenav">
-          <li class="nav-item">
-            <a href="#" class="nav-link">折线图</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">柱状图</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">饼图</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">散点图</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">涟漪散点图</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">雷达图</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">树图</a>
+      <div class="bd-toc-item level0" v-for="level0Post in 
$store.state.posts.zh">
+        <a class="bd-toc-link">{{ level0Post.title }}</a>
+        <ul class="nav bd-sidenav level1" v-if="level0Post.children">
+          <li class="nav-item" v-for="level1Post in level0Post.children">
+            <a :href="level1Post.children ? 'javascript:;' : rootPath + 
level0Post.dir + '_' + level1Post.dir" 
+              class="nav-link">{{ level1Post.title }}</a>
+            <ul class="nav bd-sidenav level2" v-if="level1Post.children">
+              <li class="nav-item" v-for="level2Post in level1Post.children">
+                <a :href="rootPath + level0Post.dir + '_' + level1Post.dir + 
'_' + level2Post.dir" class="nav-link">{{ level2Post.title }}</a>
+              </li>
+            </ul>
           </li>
         </ul>
       </div>
@@ -49,11 +23,13 @@
 <script lang="ts">
 import Vue from 'vue';
 
-export default {
-  props: ['active', 'posts'],
-  async asyncData() {
+export default Vue.extend({
+  computed: {
+    rootPath(): string {
+      return this.$store.state.config.rootPath + '/' + 
this.$store.state.locale + '/';
+    }
   }
-};
+});
 
 </script>
 
@@ -62,29 +38,42 @@ export default {
   padding: 20px;
 }
 
-.bd-toc-item {
-  margin-bottom: 20px;
-}
+  .bd-toc-item {
+    margin-bottom: 20px;
+  }
 
-.bd-sidenav {
-  margin-top: 10px;
-  display: none;
-}
+    .bd-sidenav {
+      margin-top: 5px;
+      display: none;
+    }
 
-.nav {
-  display: block;
-}
+      .bd-sidenav.level2 {
+        margin: 0 0 0 15px;
+      }
 
-.bd-toc-link {
-  font-weight: bold;
-  color: #444;
-}
+    .bd-toc-link {
+      font-weight: bold;
+      color: #444;
+    }
 
-.nav-link {
-  color: #555;
-}
+    .nav {
+      display: block;
+    }
 
-  .nav-link:hover {
-    text-decoration: underline;
-  }
+      .nav-link {
+        padding: 5px;
+        color: #666;
+      }
+
+        .level1 .nav-link {
+          padding: 5px 0;
+        }
+
+        .level2 .nav-link {
+          color: #444;
+        }
+
+        .nav-link:hover {
+          text-decoration: underline;
+        }
 </style>
diff --git a/configs/config.js b/configs/config.js
new file mode 100644
index 0000000..1300256
--- /dev/null
+++ b/configs/config.js
@@ -0,0 +1,3 @@
+export default {
+  rootPath: '/echarts-handbook/dist'
+};
diff --git a/contents/zh/chart-types/bar.md b/contents/zh/chart-types/bar.md
deleted file mode 100644
index 6a7c644..0000000
--- a/contents/zh/chart-types/bar.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# bar
-
-this is bar.
diff --git a/contents/zh/chart-types/bar/simple-bar.md 
b/contents/zh/chart-types/bar/simple-bar.md
new file mode 100644
index 0000000..0c004b3
--- /dev/null
+++ b/contents/zh/chart-types/bar/simple-bar.md
@@ -0,0 +1 @@
+# 最简单的柱状图
diff --git a/contents/zh/chart-types/line.md b/contents/zh/chart-types/line.md
index 9ba27d0..1424711 100644
--- a/contents/zh/chart-types/line.md
+++ b/contents/zh/chart-types/line.md
@@ -18,3 +18,7 @@ option = {
     }]
 };
 ```
+
+引用图片的方法:(这个图片实际存放地址在 `static/images/demo.png`)
+
+![图片说明](${rootPath}/images/demo.png)
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 6ed4426..db6e8ca 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -1,10 +1,16 @@
-export default [
+export default [{
+    title: '图表类型',
+    dir: 'chart-types',
+    children: [{
+        title: '折线图',
+        dir: 'line'
+    },
     {
-        title: '图表类型',
-        dir: 'chart-types',
-        children: [
-            'line',
-            'bar'
-        ]
-    }
-];
+        title: '柱状图',
+        dir: 'bar',
+        children: [{
+            title: '最简单的柱状图',
+            dir: 'simple-bar'
+        }]
+    }]
+}];
diff --git a/layouts/default.vue b/layouts/default.vue
index 2df84c7..c76ccbd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,8 +4,7 @@
 
     <div class="container-fluid">
       <div class="row flex-xl-nowrap2">
-        {{aaaa}}
-        <!-- <sidebar :posts="posts" active="bar" /> -->
+        <sidebar />
 
         <div class="bd-content col-md-9 col-xl-8 col-12 pb-md-3 pl-md-5">
           <div class="post-content content">
@@ -22,16 +21,22 @@ import Vue from 'vue';
 import Navigator from '~/components/partials/Navigator.vue';
 import Sidebar from '~/components/partials/Sidebar.vue';
 
-export default {
+export default Vue.extend({
   components: {
     Navigator,
     Sidebar
   },
 
-  asyncData: ({ req }) => ({
-    aaaa: (req ? req.headers['user-agent'] : (typeof navigator !== 'undefined' 
? navigator.userAgent : 'No user agent (generated)'))
-  })
-}
+  computed: {
+    // posts(): string {
+    //   return this.$store.state.posts.zh;
+    // }
+  },
+
+  methods: {
+
+  }
+});
 </script>
 
 <style>
diff --git a/nuxt.config.js b/nuxt.config.js
index c22928b..d43bffc 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,11 +1,12 @@
 import enPosts from './contents/en/posts';
 import zhPosts from './contents/zh/posts';
+import config from './configs/config';
 
 export default {
   mode: 'universal',
 
   router: {
-    base: '/echarts-booklet/dist'
+    base: config.rootPath
   },
 
   /*
@@ -103,15 +104,15 @@ function generateRoutes(postTree, dir, routes) {
   }
 
   postTree.forEach(info => {
-    if (!info) {
+    if (!info || typeof info !== 'object') {
       return;
     }
-    else if (typeof info === 'string') {
-      routes.push(dir + info);
-    }
-    else if (typeof info === 'object' && info.children) {
+    if (info.children) {
       generateRoutes(info.children, dir + info.dir + '_', routes);
     }
+    else {
+      routes.push(dir + info.dir);
+    }
   });
   return routes;
 }
diff --git a/package-lock.json b/package-lock.json
index 16169e4..a2b4c2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "echarts-booklet",
+  "name": "echarts-handbook",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1481,6 +1481,15 @@
           "resolved": 
"https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz";,
           "integrity": 
"sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
+        "file-loader": {
+          "version": "4.3.0",
+          "resolved": 
"https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz";,
+          "integrity": 
"sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==",
+          "requires": {
+            "loader-utils": "^1.2.3",
+            "schema-utils": "^2.5.0"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": 
"https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz";,
@@ -5346,12 +5355,26 @@
       }
     },
     "file-loader": {
-      "version": "4.3.0",
-      "resolved": 
"https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz";,
-      "integrity": 
"sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==",
+      "version": "6.0.0",
+      "resolved": 
"https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz";,
+      "integrity": 
"sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==",
+      "dev": true,
       "requires": {
-        "loader-utils": "^1.2.3",
-        "schema-utils": "^2.5.0"
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": 
"https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz";,
+          "integrity": 
"sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
       }
     },
     "file-uri-to-path": {
@@ -7404,6 +7427,12 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-image-loader": {
+      "version": "2.0.0",
+      "resolved": 
"https://registry.npmjs.org/markdown-image-loader/-/markdown-image-loader-2.0.0.tgz";,
+      "integrity": 
"sha512-osIW6Iww9CXPMuHTIwy30ZO/eSqDrOT80KADupmB+EUDc8xuQMo65Ob/h5SyFts6r2+cl1krzGN5vTED7uhmwQ==",
+      "dev": true
+    },
     "markdown-it": {
       "version": "10.0.0",
       "resolved": 
"https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz";,
diff --git a/package.json b/package.json
index e49696b..0537008 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,12 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^6.1.0",
     "eslint-plugin-nuxt": ">=0.4.2",
+    "file-loader": "^6.0.0",
     "front-matter": "^3.1.0",
     "frontmatter-markdown-loader": "^3.3.0",
+    "markdown-image-loader": "^2.0.0",
     "markdown-it": "^10.0.0",
-    "raw-loader": "^4.0.0"
+    "raw-loader": "^4.0.0",
+    "webpack": "^4.42.1"
   }
 }
diff --git a/pages/zh/_post.vue b/pages/zh/_post.vue
index 61dab77..807c0f4 100644
--- a/pages/zh/_post.vue
+++ b/pages/zh/_post.vue
@@ -6,6 +6,7 @@
 import fm from 'front-matter';
 import MarkdownIt from 'markdown-it';
 import Vue from 'vue';
+import config from '../../configs/config';
 
 const md = new MarkdownIt();
 
@@ -13,12 +14,9 @@ export default Vue.extend({
   components: {
   },
   async asyncData({params}) {
-    // const posts = await import('~/contents/zh/posts.js');
-    // console.log('===================', posts)
-
     params.post = params.post.split('_').join('/');
     const fileContent = await import(`~/contents/zh/${params.post}.md`);
-    const res = fm(fileContent.default);
+    const res = 
fm(fileContent.default.split('${rootPath}').join(config.rootPath));
     return {
       attributes: res.attributes,
       content: md.render(res.body)
diff --git a/static/images/demo.png b/static/images/demo.png
new file mode 100644
index 0000000..478f548
Binary files /dev/null and b/static/images/demo.png differ
diff --git a/store/index.js b/store/index.js
index fd0dcb1..c487d4e 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,14 +1,21 @@
+import zhPosts from '~/contents/zh/posts.js';
+import config from '~/configs/config';
+
 export const state = () => ({
   filled: false,
   docVersion: '',
   ghVersion: '',
   visibleAffix: false,
-  locale: 'en',
+  locale: 'zh',
   lang: {},
   menu: {},
   homepage: {},
   adBlocked: false,
-  focusMode: false
+  focusMode: false,
+  posts: {
+    zh: zhPosts
+  },
+  config: config
 })
 
 export const mutations = {


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to