feat: Multiple Language Support + Complete Chinese Translation (#48)

vuejs · Apr 18, 2018 · 8bbc5f3 · 8bbc5f3
1 parent 930d503
commit 8bbc5f3
Show file tree

Hide file tree

Showing 22 changed files with 1,304 additions and 47 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -1,8 +1,18 @@
 const base = process.env.GH ? '/vuepress/' : '/'
 
 module.exports = {
-  title: 'VuePress',
-  description: 'Vue-powered Static Site Generator',
+  langs: [
+    { lang: 'en', label: 'English', path: '/', selectText: 'Languages' },
+    { lang: 'zh-CN', label: '简体中文', path: '/zh/', selectText: '选择语言' }
+  ],
+  title: {
+    '/': 'VuePress',
+    '/zh/': 'VuePress'
+  },
+  description: {
+    '/': 'Vue-powered Static Site Generator',
+    '/zh/': 'Vue 驱动的静态网站生成器'
+  },
   dest: 'vuepress',
   base,
   head: [
@@ -13,20 +23,36 @@ module.exports = {
     repo: 'vuejs/vuepress',
     editLinks: true,
     docsDir: 'docs',
-    nav: [
-      {
-        text: 'Guide',
-        link: '/guide/',
-      },
-      {
-        text: 'Config Reference',
-        link: '/config/'
-      },
-      {
-        text: 'Default Theme Config',
-        link: '/default-theme-config/'
-      }
-    ],
+    nav: {
+      '/': [
+        {
+          text: 'Guide',
+          link: '/guide/',
+        },
+        {
+          text: 'Config Reference',
+          link: '/config/'
+        },
+        {
+          text: 'Default Theme Config',
+          link: '/default-theme-config/'
+        }
+      ],
+      '/zh/': [
+        {
+          text: '指南',
+          link: '/zh/guide/',
+        },
+        {
+          text: '配置',
+          link: '/zh/config/'
+        },
+        {
+          text: '默认主题',
+          link: '/zh/default-theme-config/'
+        }
+      ]
+    },
     sidebar: {
       '/guide/': [
         {
@@ -43,6 +69,22 @@ module.exports = {
             'deploy'
           ]
         }
+      ],
+      '/zh/guide/': [
+        {
+          title: '指南',
+          collapsable: false,
+          children: [
+            '',
+            'getting-started',
+            'basic-config',
+            'assets',
+            'markdown',
+            'using-vue',
+            'custom-themes',
+            'deploy'
+          ]
+        }
       ]
     }
   }

diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -30,7 +30,6 @@ Each markdown file is compiled into HTML with [markdown-it](https://github.com/m
 
 VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
 
-- Multi-Language Support
 - Algolia DocSearch Integration
 - Blogging support
 

diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -0,0 +1,34 @@
+---
+home: true
+heroImage: /hero.png
+actionText: 快速上手 →
+actionLink: /zh/guide/
+features:
+- title: 简洁至上
+  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
+- title: Vue驱动
+  details: 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
+- title: 高性能
+  details: VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
+footer: MIT Licensed | Copyright © 2018-present Evan You
+---
+
+### 像数 1, 2, 3 一样容易
+
+``` bash
+# 安装
+yarn global add vuepress # 或者：npm install -g vuepress
+
+# 新建一个 markdown 文件
+echo '# Hello VuePress!' > README.md
+
+# 开始写作
+vuepress dev .
+
+# 构建静态文件
+vuepress build .
+```
+
+::: warning NODE VERSION
+请确保你 Node.js 的版本大于 8。
+:::
diff --git a/docs/zh/config/README.md b/docs/zh/config/README.md
@@ -0,0 +1,201 @@
+---
+sidebar: auto
+---
+
+# 配置
+
+## 基本配置
+
+### base
+
+- 类型: `string`
+- 默认值: `/`
+
+部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。如 Github pages，如果你想将你的网站部署到 `https://foo.github.io/bar/`，那么 `base` 应该被设置成 `"/bar/"`，它的值应当总是以斜杠开始，并以斜杠结束。
+
+`base` 将会自动地作为前缀插入到所有以 `/` 开始的其他选项的链接中，所以你只需要指定一次。
+
+**Also see:**
+
+- [Base URL](../guide/assets.md#base-url)
+- [部署指南 > Github Pages](../guide/deploy.md#github-pages)
+
+### title
+
+- 类型: `string`
+- 默认值: `undefined`
+
+网站的标题，它将会被用作所有页面标题的前缀，同时，默认主题下，它将显示在导航栏（navbar）上。
+
+### description
+
+- 类型: `string`
+- 默认值: `undefined`
+
+网站的描述，它将会以 `<meta>` 标签渲染到当前页面的 HTML 中。
+
+### head
+
+- 类型: `Array`
+- 默认值: `[]`
+
+额外的需要被注入到当前页面的 HTML `<head>` 中的标签，每个标签都可以以 `[tagName, { attrName: attrValue }, innerHTML?]` 的格式指定，举个例子，增加一个自定义的 favicon：
+
+``` js
+module.exports = {
+  head: [
+    ['link', { rel: 'icon', href: `/logo.png` }]
+  ]
+}
+```
+
+### host
+
+- Type: `string`
+- Default: `'0.0.0.0'`
+
+指定用于 dev server 的主机名。
+
+### port
+
+- 类型: `number`
+- 默认值: `8080`
+
+指定 dev server 的端口。
+
+### dest
+
+- 类型: `string`
+- 默认值: `.vuepress/dist`
+
+指定 `vuepress build` 的输出目录。
+
+### ga
+
+- 类型: `string`
+- 默认值: `undefined`
+
+提供一个 Google Analytics ID 来使 GA 生效。
+
+### serviceWorker
+
+- 类型: `boolean`
+- 默认值: `false`
+
+如果设置成 `true`，VuePress 将会自动生成并且注册一个 service worker，它缓存了那些已访问过的页面的内容，用于离线访问（仅在生产环境生效）。
+
+如果你正在开发一个自定义主题，`Layout.vue` 组件将会自动触发下述的事件：
+
+- `sw-ready`
+- `sw-cached`
+- `sw-updated`
+- `sw-offline`
+- `sw-error`
+
+::: tip PWA NOTES
+`serviceWorker` 仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在 `.vuepress/public` 提供 Manifest 和 icons，更多细节，请参见 [MDN docs about the Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest).
+当然，仅仅只在你的网站部署后能用 SSL 的时候开启它，因为 service worker 只能在 HTTPs 的链接下注册。
+:::
+
+## 主题
+
+### theme
+
+- 类型: `string`
+- 默认值: `undefined`
+
+当你使用自定义主题的时候，需要指定它。当值为 `"foo"` 时，VuePress 将会尝试去加载位于 `node_modules/vuepress-theme-awesome/Layout.vue` 的主题组件。
+
+### themeConfig
+
+- 类型: `Object`
+- 默认值: `{}`
+
+为当前的主题提供一些配置，这些选项依赖于你正在使用的主题。
+
+**也可以参考:**
+
+- [默认主题](../default-theme-config/)。
+
+## Markdown
+
+### markdown.anchor
+
+- 类型: `Object`
+- 默认值: `{ permalink: true, permalinkBefore: true, permalinkSymbol: '#' }`
+
+[markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) 的选项。
+
+### markdown.toc
+
+- 类型: `Object`
+- 默认值: `{ includeLevel: [2, 3] }`
+
+[markdown-it-table-of-contents](https://github.com/Oktavilla/markdown-it-table-of-contents) 的选项。
+
+### markdown.config
+
+- 类型: `Function`
+- 默认值: `undefined`
+
+一个用来对当前的 [markdown-it](https://github.com/markdown-it/markdown-it) 实例应用额外的插件的函数，举例如下：
+
+``` js
+module.exports = {
+  markdown: {
+    config: md => {
+      md.use(require('markdown-it-xxx'))
+    }
+  }
+}
+```
+
+## 构建流程
+
+### postcss
+
+- 类型: `Object`
+- 默认值: `{ plugins: [require('autoprefixer')] }`
+
+[postcss-loader](https://github.com/postcss/postcss-loader) 的选项，请注意，指定这个值，将会覆盖内置的 autoprefixer，所以你需要自己将它加进去。
+
+### configureWebpack
+
+- 类型: `Object | Function`
+- 默认值: `undefined`
+
+用于修改内部的 Webpack 配置。如果给定一个对象，那么它将会被 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中，如果给定一个函数，它将会接受 `config` 作为第一个参数，以及 `isServer` 作为第二个参数，你可以直接更改 `config`，也可以返回一个待合并的对象。
+
+``` js
+module.exports = {
+  configureWebpack: (config, isServer) => {
+    if (!isServer) {
+      // 修改客户端的 webpack 配置
+    }
+  }
+}
+```
+
+### chainWebpack
+
+- 类型: `Function`
+- 默认值: `undefined`
+
+通过 [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) 来修改内部的 Webpack 配置。
+
+``` js
+module.exports = {
+  chainWebpack: (config, isServer) => {
+    // config 是 ChainableConfig 的一个实例
+  }
+}
+```
+
+## 浏览器兼容性
+
+### evergreen
+
+- 类型: `boolean`
+- 默认值: `false`
+
+如果你的对象只有那些 “常青树” 浏览器，你可以将其设置成 `true`，这将会禁止 ESNext 到 ES5 的转译以及对 IE 的 polyfills，同时会带来更快的构建速度和更小的文件体积。