Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

docs: add zh docs #70

Merged
merged 8 commits into from
Dec 18, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -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)
44 changes: 38 additions & 6 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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: {
Expand All @@ -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,
},
}

38 changes: 38 additions & 0 deletions docs/zh/README.md
Original file line number Diff line number Diff line change
@@ -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) 可以找到所有可用的选项.
141 changes: 141 additions & 0 deletions docs/zh/client-api/README.md
Original file line number Diff line number Diff line change
@@ -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。
Loading