[Doc] translate theme & demo pages (#320)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

docs/markdown/en-US/theme.md

@@ -1,20 +1,20 @@
-## Custom Theme (In translation)
+## Custom Theme
 
 `Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
 
-### 方案一. PostCSS 插件
+### Option 1. PostCSS Plugin
-在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
+You can import the postcss source code in your own project, then use [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) to replace the postcss variable.
 
 ```javascript
-// 引入基础样式
+// import base style
 import 'vant/packages/vant-css/src/base.css';
 
-// 引入组价对应的样式
+// import component style
 import 'vant/packages/vant-css/src/button.css';
 import 'vant/packages/vant-css/src/checkbox.css';
 ```
 
-接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
+Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css).
 
 ```javascript
 module.exports = {
@@ -39,17 +39,16 @@ module.exports = {
 };
 ```
 
-### 方案二. 本地构建
+### Option 2. Local build
-可以通过在本地构建 vant-css 的方式生成所需的主题
+Vant also support local build to custom themes.
 
 ```bash
-# 克隆仓库
+# Clone the repository
 git clone git@github.com:youzan/vant.git
 cd packages/vant-css
 ```
 
-在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
+In the local vant-css repository, modify the variables in src/common/var.css, then execute the following build command to generate the style file.
 ```bash
 npm run build
 ```
-

docs/markdown/zh-CN/theme.md

@@ -9,7 +9,7 @@
 // 引入基础样式
 import 'vant/packages/vant-css/src/base.css';
 
-// 引入组价对应的样式
+// 引入组件对应的样式
 import 'vant/packages/vant-css/src/button.css';
 import 'vant/packages/vant-css/src/checkbox.css';
 ```

docs/src/components/DemoPages.vue

@@ -1,14 +1,14 @@
 <template>
   <section class="van-doc-demo-pages">
-    <h2>示例</h2>
+    <h2>{{ $t('title') }}</h2>
-    <p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
+    <p>{{ $t('description') }}</p>
     <div class="van-doc-demo-pages__gallery">
       <div
         :class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
         v-for="(demo, index) in demos"
       >
         <h4>{{ demo.title }}</h4>
-        <a :href="demo.source" target="_blank">源代码</a>
+        <a :href="demo.source" target="_blank">{{ $t('source') }}</a>
         <img :src="demo.preview" @click="onChangeDemo(demo, index)" />
       </div>
     </div>
@@ -19,26 +19,50 @@
 export default {
   name: 'van-doc-demo-pages',
 
+  i18n: {
+    'zh-CN': {
+      title: '示例',
+      source: '源代码',
+      description: '下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。',
+      goodsDetail: '商品详情',
+      userCenter: '会员中心',
+      shoppingCart: '购物车'
+    },
+    'en-US': {
+      title: 'Demo Pages',
+      source: 'Source code',
+      description: 'Here are some of the demo pages built using Vant, click on the picture to switch to the corresponding demo.',
+      goodsDetail: 'Goods Detail',
+      userCenter: 'User Center',
+      shoppingCart: 'Shopping Cart'
+    }
+  },
+
   data() {
     return {
-      currentDemo: 0,
+      currentDemo: 0
-      demos: [{
+    };
-        title: '商品详情',
+  },
+
+  computed: {
+    demos() {
+      return [{
+        title: this.$t('goodsDetail'),
         preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
         url: 'https://youzan.github.io/vant-demo/#/goods',
         source: 'https://github.com/youzan/vant-demo/tree/master/src/view/goods/index.vue'
       }, {
-        title: '会员中心',
+        title: this.$t('userCenter'),
         preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
         url: 'https://youzan.github.io/vant-demo/#/user',
         source: 'https://github.com/youzan/vant-demo/tree/master/src/view/user/index.vue'
       }, {
-        title: '购物车',
+        title: this.$t('shoppingCart'),
         preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
         url: 'https://youzan.github.io/vant-demo/#/cart',
         source: 'https://github.com/youzan/vant-demo/tree/master/src/view/cart/index.vue'
-      }]
+      }];
-    };
+    }
   },
 
   beforeMount() {

docs/src/doc.config.js

@@ -308,12 +308,12 @@ module.exports = {
               },
               {
                 path: '/theme',
-                title: 'Theme (In translation)',
+                title: 'Custom Theme',
                 noExample: true
               },
               {
                 path: '/demo',
-                title: 'Demo pages (In translation)',
+                title: 'Demo pages',
                 noDocument: true,
                 noExample: true
               }