docs: add zh docs (#70)

* docs: add zh docs * choreUpdate docs/.vuepress/config.js Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com> * chore: update docs/zh/client-api/README.md Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com> * chore: update docs/zh/guide/README.md Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com> * chore: update docs/zh/guide/README.md Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com> * chore: update docs/zh/guide/README.md Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com> * chore: update docs/zh/guide/README.md Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com> Co-authored-by: ULIVZ <472590061@qq.com> Co-authored-by: Billyyyyy3320 <newsbielt703@gmail.com>
vuepress · Dec 18, 2021 · 0a3449a · 0a3449a
1 parent 2703b34
commit 0a3449a
Show file tree

Hide file tree

Showing 10 changed files with 1,275 additions and 6 deletions.
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -0,0 +1,48 @@
+# @vuepress/plugin-blog
+
+> VuePress 的官方博客插件。
+
+## 特性
+
+- [**分类器**](https://vuepress-plugin-blog.ulivz.com/zh/guide/getting-started.html#文档分类器)：
+  强大的分类系统可让你快速对帖子进行分类。
+- [**分页**](https://vuepress-plugin-blog.ulivz.com/zh/guide/getting-started.html#分页)：
+  分页贯穿整个插件，它从未如此简单。
+- [**客户端 API**](https://vuepress-plugin-blog.ulivz.com/zh/client-api/)：简单的客户端 API 使你可以更轻松地编写博客主题。
+
+## 安装
+
+我们强烈建议你在使用此插件之前阅读 [Getting Started](https://vuepress-plugin-blog.ulivz.com/guide/getting-started.html) 部分。
+
+```bash
+yarn add -D @vuepress/plugin-blog
+# OR npm install -D @vuepress/plugin-blog
+```
+
+## 使用
+
+```javascript
+module.exports = {
+  plugins: ['@vuepress/blog']
+};
+```
+
+请转到 [文档](https://vuepress-theme-blog.ulivz.com/zh/) 查看所有可用选项。
+
+## 正在使用 `@vuepress/plugin-blog` 的项目
+
+- [70-lines-of-vuepress-blog-theme](https://github.com/ulivz/70-lines-of-vuepress-blog-theme): 大约 70 行实现的 VuePress 博客主题。
+- [@vuepress/theme-blog](https://github.com/ulivz/vuepress-theme-blog): VuePress 的默认博客主题。
+- [vuepress-theme-modern-blog](https://github.com/z3by/vuepress-theme-modern-blog): 一个使用 [Element.UI 设计系统](https://element.eleme.io/#/) 的现代主题
+- [vuepress-theme-reco](https://github.com/vuepress-reco/vuepress-theme-reco) - 一个简单美观的 vuepress 博客主题
+- [vuepress-theme-yuchanns](https://github.com/yuchanns/vuepress-theme-yuchanns): 一个 Github 风格的 vuepress 博客主题
+- [vuepress-theme-ic](https://github.com/IKangXu/vuepress-theme-ic) :tada::tada::tada: 笔记样式的vuepress博客主题，具有简单，清晰和实用的功能。最浅的墨水比最好的记忆好。
+- [vuepress-theme-hope](https://vuepress-theme.mrhope.site/): :zap: 一个轻量的 vuepress 主题
+
+随时在这里添加你的主题...
+
+## 作者
+
+**@vuepress/theme-blog** © [ULIVZ](https://github.com/ulivz), 在 [MIT](./LICENSE) 许可证下发布。<br>
+
+> [github.com/ulivz](https://github.com/ulivz) · GitHub [@ULIVZ](https://github.com/ulivz) · Twitter [@\_ulivz](https://twitter.com/_ulivz)
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -1,5 +1,15 @@
 module.exports = {
   title: '@vuepress/plugin-blog',
+  description: 'Offical blog plugin for VuePress',
+  locales: {
+    '/': {
+      lang: 'en-US',
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      description: 'Vuepress 官方博客插件',
+    },
+  },
   description: 'Official blog plugin for VuePress',
   themeConfig: {
     repo: 'vuepressjs/vuepress-plugin-blog',
@@ -12,7 +22,7 @@ module.exports = {
       { text: 'Pagination', link: '/pagination/' },
       { text: 'Client API', link: '/client-api/' },
       { text: 'Components', link: '/components/' },
-      { text: 'FAQ', link: '/faq/' }
+      { text: 'FAQ', link: '/faq/' },
     ],
     sidebarDepth: 3,
     sidebar: {
@@ -21,14 +31,36 @@ module.exports = {
           title: 'Guide',
           collapsable: false,
 
-          children: [
-            '',
-            'getting-started',
-          ],
+          children: ['', 'getting-started'],
         },
       ],
     },
+    locales: {
+      '/': {
+        label: 'English',
+      },
+      '/zh/': {
+        nav: [
+          { text: '指南', link: '/zh/guide/' },
+          { text: '配置', link: '/zh/config/' },
+          { text: '分页', link: '/zh/pagination/' },
+          { text: '客户端 API', link: '/zh/client-api/' },
+          { text: '组件', link: '/zh/components/' },
+          { text: 'FAQ', link: '/zh/faq/' },
+        ],
+        sidebar: {
+          '/zh/guide/': [
+            {
+              title: '指南',
+              collapsable: false,
+              children: ['', 'getting-started'],
+            },
+          ],
+        },
+        selectText: '选择语言',
+        label: '简体中文',
+      },
+    },
     smoothScroll: true,
   },
 }
-
diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -0,0 +1,38 @@
+---
+home: true
+heroImage:
+actionText: 快速上手 →
+actionLink: /zh/guide/
+features:
+  - title: 分类
+    details: 强大的分类系统可让你快速对帖子进行分类。
+  - title: 分页
+    details: 分页贯穿整个插件，它从未如此简单。
+  - title: 客户端 API
+    details: 简单的客户端 API 使你可以更轻松地编写博客主题。
+
+footer: MIT Licensed | Copyright © 2019-present ULIVZ
+---
+
+## 安装
+
+```bash
+yarn add -D @vuepress/plugin-blog
+# OR npm install -D @vuepress/plugin-blog
+```
+
+## 使用
+
+```javascript
+// .vuepress/config.js
+module.exports = {
+  plugins: [
+    '@vuepress/blog',
+    {
+      /* options */
+    },
+  ],
+}
+```
+
+[这里](./config/README.md) 可以找到所有可用的选项.
diff --git a/docs/zh/client-api/README.md b/docs/zh/client-api/README.md
@@ -0,0 +1,141 @@
+---
+sidebar: auto
+---
+
+# 客户端 API
+
+::: tip
+我们强烈建议你在使用此插件之前阅读 [快速上手](../guide/getting-started.md) 部分。
+:::
+
+## $pagination
+
+::: warning
+请注意，如果你在与任何分类都不匹配的路由上访问 `$pagination` ， `$pagination` 的值将为 `null` 。
+
+因此，当你开发布局组件时，你需要验证 `$pagination` 是否存在。
+:::
+
+### `$pagination.pages`
+
+当前路由的匹配页面。例如：
+
+```json
+[
+  { "relativePath": "b.md", "path": "/b.html" ... },
+  { "relativePath": "a.md", "path": "/a.html" ... },
+]
+```
+
+### `$pagination.length`
+
+当前分页的长度。
+
+### `$pagination.hasPrev`
+
+是否存在上一个分页。
+
+### `$pagination.prevLink`
+
+上一个分页的链接。
+
+### `$pagination.hasNext`
+
+是否存在下一个分页。
+
+### `$pagination.nextLink`
+
+下一个分页的链接。
+
+### `$pagination.getSpecificPageLink`
+
+通过页码获取特定的分页页面。
+
+::: tip
+你可以使用此功能将分页组件自定义为内部 [`<Pagnination />`](../components/#pagination) 组件。
+:::
+
+## $frontmatterKey
+
+如果你按照以下方式创建 [Frontmatter 分类器](../guide/getting-started.md#frontmatter-分类器)：
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/blog',
+      {
+        frontmatters: [
+          {
+            // 当前分类的唯一 ID
+            id: 'tag',
+            // 决定将 frontmatter 键值归到该类别下
+            keys: ['tag'],
+            // `entry page` (或者 `list page`) 的路径
+            path: '/tag/',
+            // `entry page` 的布局
+            layout: 'Tag',
+          },
+        ],
+      },
+    ],
+  ],
+}
+```
+
+那么此插件将向 Vue 原型注入 `$frontmatterKey` 对象, ，因此你可以在自己的布局组件 (`<Tag />`) 上直接使用它。
+
+### `$frontmatterKey.list`
+
+获取一个含有匹配的 frontmatter 分类器类型的列表。
+
+接口如下:
+
+```typescript
+type FrontmatterKeyList = Array<{
+  name: string
+  path: string
+  pages: Array<VuePressPage>
+}>
+```
+
+你可以重新阅读 [Frontmatter 分类器](../guide/getting-started.md#frontmatter-分类器) 来观看 `tag` 的真实示例。
+
+::: tip 多个 Frontmatter 分类器
+
+如果你创建两个 Frontmatter 分类器，例如 `tag` 和 `category`，那么在 `/tag/` 路由中，`$frontmatterKey` 自动指向 `tag` ，而在 `/category/` 中，它将指向 `category`。
+
+此变量本质上是设计用于概括 frontmatter 键的列表页面。
+:::
+
+## $service
+
+### $service.comment
+
+#### `$ service.comment.enabled`
+
+是否启用评论。
+
+#### `$ service.comment.service`
+
+获取评论服务
+
+### $service.email
+
+#### `$service.email.enabled`
+
+是否启用电子邮件（新闻通讯）服务。
+
+### $service.feed
+
+#### `$service.feed.rss`
+
+是否启用 RSS feed。
+
+#### `$service.feed.atom`
+
+是否启用了 Atom feed。
+
+#### `$service.feed.json`
+
+是否启用 JSON feed。