You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/06/17 11:17:08 UTC
[incubator-echarts-handbook] 04/11: feat: dynamic nav
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 <zw...@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`）
+
+
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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org