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/10/29 10:52:42 UTC
[incubator-echarts-handbook] branch master updated: feat: support
toc
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
The following commit(s) were added to refs/heads/master by this push:
new 0002252 feat: support toc
0002252 is described below
commit 0002252df555e7ffa7f3f0ff82a3f067176a4fa7
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Oct 29 18:48:45 2020 +0800
feat: support toc
---
components/partials/Sidebar.vue | 2 +-
contents/zh/basics/help.md | 6 +-
layouts/default.vue | 169 +++++++++++++++++++++++++++++++++++++++-
package-lock.json | 10 +++
package.json | 2 +
pages/helper/post.ts | 39 ++++++++--
pages/zh/_post.vue | 104 -------------------------
7 files changed, 216 insertions(+), 116 deletions(-)
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index 1b89fa2..70b9df6 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -1,5 +1,5 @@
<template>
- <div class="bd-sidebar border-bottom-0 col-md-3 col-xl-2 col-12">
+ <div class="bd-sidebar border-bottom-0 col-sm-2 col-12">
<!-- active: {{ active }}. {{ posts }} -->
<div class="bd-docs-nav">
<div class="bd-toc-item level0"
diff --git a/contents/zh/basics/help.md b/contents/zh/basics/help.md
index afa356a..588073f 100644
--- a/contents/zh/basics/help.md
+++ b/contents/zh/basics/help.md
@@ -2,7 +2,7 @@
## 技术问题
-### 1. 确保现有文档等资料无法解决你的问题
+### 确保现有文档等资料无法解决你的问题
ECharts 有非常大量的用户，所以你遇到过的问题，很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字，可以帮助你自助地在第一时间解决问题，而不需要依赖社区的帮助。
@@ -16,14 +16,14 @@ ECharts 有非常大量的用户，所以你遇到过的问题，很可能别人
- 使用搜索引擎搜索关键字
-### 2. 创建一个最简单可复现的例子
+### 创建一个最简单可复现的例子
使用 [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM) 或者 [ECharts Gallery](https://gallery.echartsjs.com/editor.html) 创建一个例子，这将使得他人更方便地复现你的问题。
例子应尽可能以最简单的方式复现你的问题，去除不必要的配置项和数据，可以让帮助你的人更快速地定位问题，从而让你的问题更快得到解决。更详细的介绍请参见 [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)。
-### 3. 判断是否是 bug
+### 判断是否是 bug
#### 报告 bug 或请求新功能
diff --git a/layouts/default.vue b/layouts/default.vue
index 0c1aac8..4539127 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,7 @@
<div class="row flex-xl-nowrap2">
<sidebar />
- <div class="bd-content col-md-9 col-xl-8 col-12 pb-md-3 pl-md-5">
+ <div class="bd-content col-sm-7 pl-sm-2 col-12">
<div class="post-content content">
<nuxt />
</div>
@@ -40,8 +40,173 @@ export default {
}
</script>
-<style>
+<style lang="scss">
.post-content {
margin-bottom: 80px;
}
+
+#toc {
+ position: fixed;
+ left: 77%;
+ width: 21%;
+ top: 80px;
+ background-color: transparent;
+ border-left: 1px solid #e3e3e3;
+ padding: 10px;
+ color: #888;
+ height: auto;
+
+ @media (max-width: 768px) {
+ & {
+ position: relative;
+ width: 100%;
+ left: 0;
+ top: 0;
+ padding: 10px 20px;
+ margin: 0 0 20px 0;
+ }
+ }
+
+ ol {
+ padding-left: 30px;
+ margin-bottom: 0;
+
+ ol {
+ padding-left: 10px;
+ margin-bottom: 10px;
+
+ li {
+ list-style: lower-alpha;
+ }
+
+ ol {
+ li {
+ list-style: circle;
+ }
+ }
+ }
+ }
+
+ a {
+ color: #888;
+ transition: 0.5s;
+
+ &:hover {
+ color: #555;
+ }
+ }
+}
+
+.post-inner {
+ margin: 20px 0 80px 0;
+
+ h1 {
+ margin-bottom: 20px;
+ font-size: 36px;
+ color: #222;
+ }
+
+ h2 {
+ margin: 70px 0 20px 0;
+ padding-bottom: 10px;
+ font-size: 26px;
+ color: #666;
+ border-bottom: 1px solid #ddd;
+ }
+
+ h1+h2 {
+ margin-top: 30px;
+ }
+
+ h3 {
+ margin: 30px 0 20px 0;
+ font-size: 22px;
+ color: #444;
+ }
+
+ h4 {
+ margin: 25px 0 20px 0;
+ font-size: 18px;
+ color: #222;
+ }
+
+ h5 {
+ font-size: 16px;
+ color: #222;
+ }
+
+ h6 {
+ font-size: 14px;
+ color: #222;
+ }
+
+ .permalink {
+ display: none;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ &:hover .permalink {
+ display: inline-block;
+ }
+ }
+
+ blockquote {
+ margin: 15px 0;
+ padding: 15px;
+ border-left: 4px solid #ccc;
+ background-color: #f3f3f3;
+ }
+
+ blockquote :last-child {
+ margin-bottom: 0;
+ }
+
+ pre code {
+ padding: 10px 15px !important;
+ border-radius: 5px;
+ }
+
+ iframe {
+ border: 1px solid #ddd;
+ margin: 10px 0;
+ }
+
+ p {
+ line-height: 1.8em;
+ }
+}
+
+.post-contributors {
+ padding-top: 10px;
+ border-top: 1px solid #ddd;
+
+ .post-contributor {
+ display: inline-block;
+ margin-right: 15px;
+ border: 1px solid #eee;
+ border-radius: 5px;
+ color: #777;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ img {
+ width: 30px;
+ height: 30px;
+ border-radius: 5px;
+ display: inline-block;
+ }
+ span {
+ display: inline-block;
+ margin: 0 8px 0 5px;
+ position: relative;
+ top: 2px;
+ }
+ }
+}
+
+.post-edit {
+ margin: 10px 0;
+}
</style>
diff --git a/package-lock.json b/package-lock.json
index 0f36499..d7fbe40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7983,6 +7983,11 @@
"uc.micro": "^1.0.5"
}
},
+ "markdown-it-anchor": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-6.0.0.tgz",
+ "integrity": "sha512-WOcIGhG1M1W94VV5cmSZAMSKi2vqCxpLAqQZ0wSO9RzQ9Rbls7ecjRVXp5DIPoXrNy9bjv9K7M0nYqNk60ctxQ=="
+ },
"markdown-it-highlightjs": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-3.1.0.tgz",
@@ -7992,6 +7997,11 @@
"lodash.flow": "^3.5.0"
}
},
+ "markdown-it-toc-done-right": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/markdown-it-toc-done-right/-/markdown-it-toc-done-right-4.1.0.tgz",
+ "integrity": "sha512-UhD2Oj6cZV3ycYPoelt4hTkwKIK3zbPP1wjjdpCq7UGtWQOFalDFDv1s2zBYV6aR2gMs/X8kpJcOYsQmUbiXDw=="
+ },
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
diff --git a/package.json b/package.json
index 2f48c9e..563ffea 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,9 @@
"dependencies": {
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0",
+ "markdown-it-anchor": "^6.0.0",
"markdown-it-highlightjs": "^3.1.0",
+ "markdown-it-toc-done-right": "git+ssh://git@github.com/Ovilia/markdown-it-toc-done-right.git",
"nuxt": "^2.0.0",
"nuxt-i18n": "^6.7.2"
},
diff --git a/pages/helper/post.ts b/pages/helper/post.ts
index a35c556..f0d7f97 100644
--- a/pages/helper/post.ts
+++ b/pages/helper/post.ts
@@ -1,26 +1,53 @@
import fm from 'front-matter'
import MarkdownIt from 'markdown-it'
import highlightjs from 'markdown-it-highlightjs'
+import anchor from 'markdown-it-anchor';
+import toc from 'markdown-it-toc-done-right';
import config from '../../configs/config'
import contributors from './contributors'
export async function getPostData (path: string, lang: string) {
+ const filePath = path.split('_').join('/');
+ const fileContent = await import(`~/contents/${lang}/${filePath}.md`);
+ let content = fileContent.default;
+
+ const url = `${config.rootPath}/${lang}/${path}`;
+ console.log(url);
+
const md = new MarkdownIt({
html: true
}).use(highlightjs, {})
-
- const filePath = path.split('_').join('/')
- const fileContent = await import(`~/contents/${lang}/${filePath}.md`)
- let content = fileContent.default
+ .use(anchor, {
+ permalink: true,
+ permalinkAfter: true,
+ permalinkSymbol: '#',
+ permalinkClass: 'permalink',
+ permalinkHref: slug => {
+ return url + '#' + slug;
+ }
+ })
+ .use(toc, {
+ containerId: 'toc',
+ level: 2,
+ href: slug => {
+ const hash = slug.split('#');
+ if (hash.length > 0) {
+ return url + '#' + hash[0];
+ }
+ else {
+ return url;
+ }
+ }
+ });
for (const attr in config) {
content = content.split(`\${${attr}}`).join((config as any)[attr])
}
- const res = fm(content)
+ const res = fm(content);
return {
attributes: res.attributes,
- content: md.render(res.body),
+ content: md.render('[[toc]]\n' + res.body),
contributors: contributors[`contents/${lang}/${filePath}.md`] || [],
sourcePath: `https://github.com/${config.gitRepo}/tree/master/contents/${lang}/${filePath}.md`
}
diff --git a/pages/zh/_post.vue b/pages/zh/_post.vue
index 35358b6..533de3d 100644
--- a/pages/zh/_post.vue
+++ b/pages/zh/_post.vue
@@ -31,108 +31,4 @@ export default {
</script>
<style lang="scss">
-.post-inner {
-
- margin: 20px 0 80px 0;
-
- h1 {
- margin-bottom: 20px;
- font-size: 36px;
- color: #222;
- }
-
- h2 {
- margin: 70px 0 20px 0;
- padding-bottom: 10px;
- font-size: 26px;
- color: #666;
- border-bottom: 1px solid #ddd;
- }
-
- h1+h2 {
- margin-top: 30px;
- }
-
- h3 {
- margin: 30px 0 20px 0;
- font-size: 22px;
- color: #444;
- }
-
- h4 {
- margin: 25px 0 20px 0;
- font-size: 18px;
- color: #222;
- }
-
- h5 {
- font-size: 16px;
- color: #222;
- }
-
- h6 {
- font-size: 14px;
- color: #222;
- }
-
- blockquote {
- margin: 15px 0;
- padding: 15px;
- border-left: 4px solid #ccc;
- background-color: #f3f3f3;
- }
-
- blockquote :last-child {
- margin-bottom: 0;
- }
-
- pre code {
- padding: 10px 15px !important;
- border-radius: 5px;
- }
-
- iframe {
- border: 1px solid #ddd;
- margin: 10px 0;
- }
-
- p {
- line-height: 1.8em;
- }
-}
-
-.post-contributors {
- padding-top: 10px;
- border-top: 1px solid #ddd;
-
- .post-contributor {
- display: inline-block;
- margin-right: 15px;
- border: 1px solid #eee;
- border-radius: 5px;
- color: #777;
-
- &:hover {
- text-decoration: none;
- }
-
- img {
- width: 30px;
- height: 30px;
- border-radius: 5px;
- display: inline-block;
- }
- span {
- display: inline-block;
- margin: 0 8px 0 5px;
- position: relative;
- top: 2px;
- }
- }
-}
-
-.post-edit {
- margin: 10px 0;
-}
-
</style>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org