Skip to content

docs: refine plugin documentation #2053

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 4, 2019
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
25 changes: 24 additions & 1 deletion packages/docs/docs/plugin/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
# Plugin

Plugins generally add global-level functionality to VuePress. There is no strictly defined scope for a plugin - there are typically several types of plugins:
Plugins generally add global-level functionality to VuePress. There is no strictly defined scope for a plugin. You can find out more plugins at [Awesome VuePress](https://github.com/vuepressjs/awesome-vuepress#plugins).

## Examples

There are typically several types of plugins:

1. Extend the page’s metadata generated at compile time. For example [@vuepress/plugin-last-updated](./official/plugin-last-updated.md);
2. Generate extra files before or after compilation. For example [@vuepress/plugin-pwa](./official/plugin-pwa.md);
Expand All @@ -9,6 +13,25 @@ Plugins generally add global-level functionality to VuePress. There is no strict

Here is also a little slightly complicated plugin example [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com) that uses compile-time metadata to generate some dynamic modules and initialize them on the client-side by using `enhanceAppFiles`.

## Out of the Box

To keep things at a minimum, not all of the official plugins are shipped with VuePress. Here is the list of plugins that are pre-installed in the VuePress and the default theme, **plugins that are not in the list below need to be installed manually**(e.g. [@vuepress/plugin-back-to-top](./official/plugin-back-to-top.md)).

### Plugins that come with VuePress

- [@vuepress/plugin-last-updated](./official/plugin-last-updated.md)
- [@vuepress/plugin-register-components](./official/plugin-register-components.md)

### Plugins that come with the defualt theme

- [@vuepress/plugin-active-header-links](./official/plugin-active-header-links.md)
- [@vuepress/plugin-nprogress](./official/plugin-nprogress.md)
- [@vuepress/plugin-search](./official/plugin-search.md)
- [vuepress-plugin-container](https://vuepress.github.io/plugins/container/)
- [vuepress-plugin-smooth-scroll](https://vuepress.github.io/plugins/smooth-scroll/)

## Architecture

The architecture of the whole plugin system is as follows:

![Architecture of VuePress](/architecture.png)
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ module.exports = {
```

### Passing Options

```javascript
module.exports = {
plugins: ['@vuepress/active-header-links', {
sidebarLinkSelector: '.sidebar-link',
headerAnchorSelector: '.header-anchor',
headerTopOffset: 120
headerAnchorSelector: '.header-anchor'
}]
}
```
Expand All @@ -44,4 +44,3 @@ module.exports = {

- Type: `string`
- Default: `.header-anchor`

29 changes: 26 additions & 3 deletions packages/docs/docs/zh/plugin/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
# 插件

插件通常会为 VuePress 添加全局功能。插件的范围没有限制——一般有下面几种:
插件通常会为 VuePress 添加全局功能。插件的范围没有限制。你可以在 [Awesome VuePress](https://github.com/vuepressjs/awesome-vuepress#plugins) 中找到更多的插件。

## 样例

以下是几种比较常见的插件:

1. 拓展在编译期生成的页面元数据,如:[@vuepress/plugin-last-updated](./official/plugin-last-updated.md);
2. 在编译前后生成额外的文件,如:[@vuepress/plugin-pwa](./official/plugin-pwa.md);
3. 注入全局的 UI, 如:[@vuepress/plugin-back-to-top](./official/plugin-back-to-top.md);
4. 拓展 CLI 的指令,如 [vuepress-plugin-export](https://github.com/ulivz/vuepress-plugin-export)。
4. 拓展 CLI 的指令,如:[vuepress-plugin-export](https://github.com/ulivz/vuepress-plugin-export)。

这里也有一个略微复杂的插件案例 [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com),其使用了编译器的元数据来生成了一些动态模块,并在客户端使用 `enhanceAppFiles` 来初始化他们。

## 开箱即用

为了让项目尽可能地简洁,并非所有官方插件都会随着 VuePress 一同安装。以下是一些随着 VuePress 和默认主题一同安装的插件,**没有出现在下表中的插件需要手动安装**(比如:[@vuepress/plugin-back-to-top](./official/plugin-back-to-top.md))。

### VuePress 自带的插件

- [@vuepress/plugin-last-updated](./official/plugin-last-updated.md)
- [@vuepress/plugin-register-components](./official/plugin-register-components.md)

### 默认主题自带的插件

- [@vuepress/plugin-active-header-links](./official/plugin-active-header-links.md)
- [@vuepress/plugin-nprogress](./official/plugin-nprogress.md)
- [@vuepress/plugin-search](./official/plugin-search.md)
- [vuepress-plugin-container](https://vuepress.github.io/zh/plugins/container/)
- [vuepress-plugin-smooth-scroll](https://vuepress.github.io/zh/plugins/smooth-scroll/)

这里也有一个略微复杂的插件案例 [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com), 其使用了编译器的元数据来生成了一些动态模块,并在客户端使用 `enhanceAppFiles` 来初始化他们。
## 架构

整个插件系统的架构如下:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ module.exports = {
}
```

### 配置选项

```javascript
module.exports = {
plugins: ['@vuepress/active-header-links', {
sidebarLinkSelector: '.sidebar-link',
headerAnchorSelector: '.header-anchor'
}]
}
```

## 选项

### sidebarLinkSelector
Expand Down
2 changes: 0 additions & 2 deletions packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ yarn add -D @vuepress/plugin-medium-zoom

## 使用

## Usage

**简单使用**:

```javascript
Expand Down