fix docs

Author: tangjinzhou

docs/vue/i18n.en-US.md

@@ -6,7 +6,7 @@ If you want to use other languages, you can follow the instructions below.
 
 ## LocaleProvider
 
-vue-antd-ui provides a React Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
+vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
 
 ````html
 <template>

docs/vue/introduce.en-US.md

@@ -26,12 +26,12 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
 ## Features
 
 - An enterprise-class UI design language for web applications.
-- A set of high-quality React components out of the box.
+- A set of high-quality Vue components out of the box.
 - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
 
 ## Environment Support
 
-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性))
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))
 * Server-side Rendering
 
 ## Version

docs/vue/introduce.zh-CN.md

@@ -30,7 +30,7 @@
 
 ## 支持环境
 
-* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性)）。
 * 支持服务端渲染。
 
 ## 版本
@@ -118,7 +118,7 @@ import 'vue-antd-ui/dist/antd.css';  // or 'vue-antd-ui/dist/antd.less'
 
 - [首页](https://vuecomponent.github.io/ant-design/)
 - [Ant Design React](https://ant.design/)
-- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn)
+- [组件库](https://vuecomponent.github.io/ant-design/docs/vue/introduce-cn)
 - [更新日志](/ant-design/changelog-cn)
 - [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
 - [定制主题](/ant-design/docs/vue/customize-theme-cn)

docs/vue/use-with-vue-cli.en-US.md

@@ -3,7 +3,6 @@
 
 [vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
 
----
 
 ## Install and Initialization
 
@@ -100,7 +99,7 @@ Now we need to customize the default webpack config.
 
 ### Use babel-plugin-import
 
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started#Import-on-Demand)).
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started/#Import-on-Demand)).
 
 ```bash
 $ yarn add babel-plugin-import --dev
@@ -150,7 +149,7 @@ Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because
   })
 ```
 
-Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started#Import-on-Demand).
+Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started/#Import-on-Demand).
 
 ### Customize Theme
 

docs/vue/use-with-vue-cli.zh-CN.md

@@ -96,7 +96,7 @@ new Vue({
 
 ### 使用 babel-plugin-import
 
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started#按需加载)）。
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started-cn/#按需加载)）。
 
 ```bash
 $ yarn add babel-plugin-import --dev
@@ -147,7 +147,7 @@ $ yarn add babel-plugin-import --dev
   })
 ```
 
-最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn#按需加载)。
+最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn/#按需加载)。
 
 ### 自定义主题
 

site/components/demo.vue

@@ -25,12 +25,31 @@ export default {
       this.unsubscribe()
     }
   },
+  mounted () {
+    this.addSubMenu()
+  },
   watch: {
-    '$route': function () {
+    '$route.path': function () {
       this.store.setState({ currentSubMenu: [] })
+      this.addSubMenu()
     },
   },
   methods: {
+    addSubMenu () {
+      if (this.$route.path.indexOf('/docs/vue/') !== -1) {
+        this.$nextTick(() => {
+          const menus = []
+          this.$refs.doc.querySelectorAll(['h2', 'h3']).forEach(dom => {
+            const id = dom.id
+            if (id) {
+              const title = dom.textContent.split('#')[0].trim()
+              menus.push({ cnTitle: title, usTitle: title, id })
+            }
+          })
+          this.currentSubMenu = menus
+        })
+      }
+    },
     subscribe () {
       const { store } = this
       this.unsubscribe = store.subscribe(() => {
@@ -42,21 +61,22 @@ export default {
       const lis = []
       currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
         const title = isCN ? cnTitle : usTitle
-        const className = window.location.hash === `#${id}` ? 'current' : ''
+        const className = decodeURIComponent(window.location.hash) === `#${id}` ? 'current' : ''
         lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
       })
+      const showApi = this.$route.path.indexOf('/components/') !== -1
       return (
         <a-affix>
           <ul id='demo-toc' class='toc'>
             {lis}
-            <li title='API' key='API'>
+            {showApi ? <li title='API' key='API'>
               <a
-                href='#api'
+                href='#API'
                 class={{
-                  current: window.location.hash === '#api',
+                  current: window.location.hash === '#API',
                 }}
               >API</a>
-            </li>
+            </li> : ''}
           </ul>
         </a-affix>
       )
@@ -144,12 +164,12 @@ export default {
               <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
                 <div class='content main-container'>
                   <div class='toc-affix' style='width: 110px;'>
-                    {Demo ? this.getSubMenu(isCN) : ''}
+                    {this.getSubMenu(isCN)}
                   </div>
                   {Demo ? <Provider store={this.store}>
                     <Demo key={isCN ? 'cn' : 'en'}/>
                   </Provider> : ''}
-                  <div class='markdown api-container'>
+                  <div class='markdown api-container' ref='doc'>
                     <router-view></router-view>
                   </div>
                 </div>

site/components/layout.vue

@@ -47,7 +47,7 @@ const md = require('markdown-it')('default', {
   highlight: renderHighlight,
 }).use(require('markdown-it-anchor'), {
   level: 2,
-  // slugify: string => string,
+  slugify: string => string.trim().split(' ').join('-'),
   permalink: true,
   // renderPermalink: (slug, opts, state, permalink) => {},
   permalinkClass: 'anchor',