Merge pull request #827 from QingWei-Li/feat/doc-anchor

Doc: add anchor

build/cooking.demo.js

@@ -2,6 +2,7 @@ var cooking = require('cooking');
 var config = require('./config');
 var md = require('markdown-it')();
 var striptags = require('./strip-tags');
+var slugify = require('transliteration').slugify;
 
 function convert(str) {
   str = str.replace(/(&#x)(\w{4});/gi, function($0) {
@@ -37,6 +38,12 @@ cooking.add('loader.md', {
 
 cooking.add('vueMarkdown', {
   use: [
+    [require('markdown-it-anchor'), {
+      level: 2,
+      slugify: slugify,
+      permalink: true,
+      permalinkBefore: true
+    }],
     [require('markdown-it-container'), 'demo', {
       validate: function(params) {
         return params.trim().match(/^demo\s*(.*)$/);

examples/app.vue

@@ -71,6 +71,21 @@
     h2, h3, h4, h5 {
       font-weight: normal;
       color: #1f2f3d;
+
+      &:hover a {
+        opacity: .4;
+      }
+
+      a {
+        float: left;
+        margin-left: -20px;
+        opacity: 0;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .4;
+        }
+      }
     }
     p {
       font-size: 14px;
@@ -101,10 +116,44 @@
 <script>
   export default {
     name: 'app',
+    methods: {
+      renderAnchorHref() {
+        const anchors = document.querySelectorAll('h2 a,h3 a');
+        const basePath = location.href.split('#').splice(0, 2).join('#');
+
+        [].slice.call(anchors).forEach(a => {
+          const href = a.getAttribute('href');
+          a.href = basePath + href;
+        });
+      },
+
+      goAnchor() {
+        if (location.href.match(/#/g).length > 1) {
+          const auchor = location.href.match(/#[^#]+$/g);
+          if (!auchor || auchor.length !== 1) return;
+          const elm = document.querySelector(auchor[0]);
+          if (!elm) return;
+
+          setTimeout(_ => {
+            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop;
+          }, 50);
+        }
+      }
+    },
+
+    mounted() {
+      this.renderAnchorHref();
+      this.goAnchor();
+    },
+
     created() {
       window.addEventListener('hashchange', () => {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
+        if (location.href.match(/#/g).length < 2) {
+          document.documentElement.scrollTop = document.body.scrollTop = 0;
+          this.renderAnchorHref();
+        } else {
+          this.goAnchor();
+        }
       });
     }
   };

package.json

@@ -93,6 +93,7 @@
     "lerna": "2.0.0-beta.18",
     "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
+    "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
     "mocha": "^3.1.1",
     "phantomjs-prebuilt": "^2.1.13",
@@ -104,6 +105,7 @@
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
     "theaterjs": "^3.0.0",
+    "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
     "url-loader": "^0.5.7",
     "vue": "^2.0.3",