From 15c8e1313f61b843f51d08c48dbd102ff4a195bc Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 23 Aug 2019 18:13:06 +0800
Subject: [PATCH] 文档添加锚点

---
 examples/router/index.js      |  1 +
 examples/styles/markdown.scss |  4 ++++
 package.json                  |  2 ++
 webpack/markdown-loader.js    | 10 ++++++++++
 yarn.lock                     | 30 +++++++++++++++++++++++++++++-
 5 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/examples/router/index.js b/examples/router/index.js
index f3801c1..0525bd8 100644
--- a/examples/router/index.js
+++ b/examples/router/index.js
@@ -6,6 +6,7 @@ import NProgress from 'nprogress'; // 进度条
 Vue.use(Router);
 
 const router =  new Router({
+  mode: 'history',
   routes,
 });
 
diff --git a/examples/styles/markdown.scss b/examples/styles/markdown.scss
index 356e4b9..0d759c8 100644
--- a/examples/styles/markdown.scss
+++ b/examples/styles/markdown.scss
@@ -2,6 +2,10 @@
 
 .eagle-snippet-doc {
   color: $text;
+  .header-anchor {
+    color: $primary;
+    text-decoration: none;
+  }
   h1 {
     color: $black;
     font-weight: 500;
diff --git a/package.json b/package.json
index f35eb80..1766535 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,11 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-service": "^3.8.0",
+    "markdown-it-anchor": "^5.2.4",
     "markdown-it-container": "^2.0.0",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
+    "transliteration": "^2.1.5",
     "vue-markdown-loader": "^2.4.1",
     "vue-template-compiler": "^2.6.10"
   }
diff --git a/webpack/markdown-loader.js b/webpack/markdown-loader.js
index 5061b5a..9d71a7b 100644
--- a/webpack/markdown-loader.js
+++ b/webpack/markdown-loader.js
@@ -1,7 +1,9 @@
 const MarkdownIt = require("markdown-it");
+const MarkdownItAnchor = require('markdown-it-anchor')
 const MarkdownItContainer = require("markdown-it-container");
 const VueTemplateComplier = require("vue-template-compiler");
 const hljs = require("highlight.js");
+const slugify = require('transliteration').slugify; // 引入transliteration中的slugify方法
 const { parse, compileTemplate } = require("@vue/component-compiler-utils");
 
 module.exports = function(source) {
@@ -22,6 +24,14 @@ module.exports = function(source) {
       )}</code></pre>`;
     }
   });
+  // 使用【markdown-it-anchor】插件为markdown创建锚点
+  markdownIt.use(MarkdownItAnchor, {
+    level: 2, // 添加超链接锚点的最小标题级别, 如: #标题 不会添加锚点
+    slugify: slugify, // 自定义slugify, 我们使用的是将中文转为汉语拼音,最终生成为标题id属性
+    permalink: true, // 开启标题锚点功能
+    // permalinkBefore: true, // 在标题前创建锚点
+    permalinkSymbol: '#', // 锚点标志
+  });
   // 使用【markdown-it-container】插件解析【:::snippet :::】代码块为vue渲染
   markdownIt.use(MarkdownItContainer, "snippet", {
     // 验证代码块为【:::snippet :::】才进行渲染
diff --git a/yarn.lock b/yarn.lock
index c8a78ac..737b238 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4649,6 +4649,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-anchor@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-5.2.4.tgz#d39306fe4c199705b4479d3036842cf34dcba24f"
+  integrity sha1-05MG/kwZlwW0R50wNoQs803Lok8=
+
 markdown-it-container@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/markdown-it-container/download/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695"
@@ -7255,6 +7260,13 @@ tr46@~0.0.1:
   resolved "https://registry.npm.taobao.org/tr46/download/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
 
+transliteration@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.npm.taobao.org/transliteration/download/transliteration-2.1.5.tgz#79318af9d1bb1b72e1f2b1a7f37be79a33d5fc4a"
+  integrity sha1-eTGK+dG7G3Lh8rGn83vnmjPV/Eo=
+  dependencies:
+    yargs "^13.2.4"
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/trim-right/download/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
@@ -7862,7 +7874,7 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^13.1.0:
+yargs-parser@^13.1.0, yargs-parser@^13.1.1:
   version "13.1.1"
   resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
   integrity sha1-0mBYUyqgbTZf4JH2ofwGsvfl7KA=
@@ -7904,3 +7916,19 @@ yargs@^13.0.0:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^13.1.0"
+
+yargs@^13.2.4:
+  version "13.3.0"
+  resolved "https://registry.npm.taobao.org/yargs/download/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha1-TGV6VeB+Xyz5R/ijZlZ8BKDe3IM=
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
--
libgit2 0.21.0