Skip to content

Commit

Permalink
docs($cn): theme translation
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz committed Oct 26, 2018
1 parent b40a790 commit 08e29e9
Show file tree
Hide file tree
Showing 9 changed files with 115 additions and 132 deletions.
4 changes: 2 additions & 2 deletions packages/docs/docs/.vuepress/config.js
Expand Up @@ -110,8 +110,8 @@ function getPluginSidebar (gruopA, introductionA) {
collapsable: false,
children: [
['', introductionA],
'writing-a-plugin',
'using-a-plugin',
'writing-a-plugin',
'life-cycle',
'option-api',
'context-api',
Expand All @@ -128,8 +128,8 @@ function getThemeSidebar (gruopA, introductionA) {
collapsable: false,
children: [
['', introductionA],
'writing-a-theme',
'using-a-theme',
'writing-a-theme',
'option-api',
'default-theme-config'
]
Expand Down
4 changes: 0 additions & 4 deletions packages/docs/docs/theme/default-theme-config.md
@@ -1,7 +1,3 @@
---
sidebar: auto
---

# Default Theme Config

<Bit/>
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/docs/theme/option-api.md
Expand Up @@ -2,7 +2,7 @@
seoTitle: Option API | Theme
---

# Options
# Option API

## plugins

Expand Down
12 changes: 6 additions & 6 deletions packages/docs/docs/theme/using-a-theme.md
Expand Up @@ -2,13 +2,13 @@

Using a theme is almost same as using a plugin.

## Use plugins from a dependency
## Using a theme from a dependency

Themes can be published on npm in raw Vue SFC format as `vuepress-theme-xxx`.

``` js
module.exports = {
plugins: [ 'vuepress-theme-xx' ]
theme: 'vuepress-theme-xx'
}
```

Expand All @@ -18,31 +18,31 @@ If you prefix the plugin with `vuepress-theme-`, you can use a shorthand to leav

``` js
module.exports = {
plugins: [ 'xxx' ]
theme: 'xxx'
}
```

Same with:

``` js
module.exports = {
plugins: [ 'vuepress-theme-xxx' ]
theme: 'vuepress-theme-xxx'
}
```

This also works with [Scoped Packages](https://docs.npmjs.com/misc/scope):

``` js
module.exports = {
plugins: [ '@org/vuepress-theme-xxx', '@vuepress/theme-xxx' ]
theme: '@org/vuepress-theme-xxx', // or an official theme: '@vuepress/theme-xxx'
}
```

Shorthand:

``` js
module.exports = {
plugins: [ '@org/xxx', '@vuepress/xxx' ]
theme: '@org/xxx', // or an official theme: '@vuepress/xxx'
}
```

Expand Down
41 changes: 17 additions & 24 deletions packages/docs/docs/theme/writing-a-theme.md
Expand Up @@ -11,6 +11,22 @@ To write a theme, create a `.vuepress/theme` directory in your docs root, and th

From there it's the same as developing a normal Vue application. It is entirely up to you how to organize your theme.

## Content Outlet

The compiled content of the current `.md` file being rendered will be available as a special `<Content/>` global component. You will need to render it somewhere in your layout in order to display the content of the page. The simplest theme can be just a single `Layout.vue` component with the following content:

``` html
<template>
<div class="theme-container">
<Content/>
</div>
</template>
```

**Also see:**

- [Markdown Slot](../guide/markdown-slot.md)

## Directory Structure

Just one `Layout.vue` might not be enough, and you might also want to define more layout components in the theme for using on different pages. You may also want to customize the [palette](../config/README.md#palette), and even apply some plugins.
Expand Down Expand Up @@ -46,8 +62,7 @@ themePath
- `theme/enhanceApp.js`: Theme level enhancements.

::: warning Note
1. Considering backward compatibility, Vue components located at [themePath](../miscellaneous/glossary.md#theme-side) will also be automatically registered as layout components. But the recommended is placing them under `themePath/layouts` directory, which looks more clearer.
2. When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct [themePath](../miscellaneous/glossary.md#theme-side).
When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct [themePath](../miscellaneous/glossary.md#theme-side).

```json
{
Expand Down Expand Up @@ -97,16 +112,6 @@ module.exports = {
}
```

For themes that need to be released to NPM, please do not forget to add it to `dependencies`:

```json
{
"dependencies": {
"@vuepress/plugin-pwa": "^x.x.x",
}
}
```

## Site and Page Metadata

The `Layout` component will be invoked once for every `.md` file in `docs`, and the metadata for the entire site and that specific page will be exposed respectively as `this.$site` and `this.$page` properties which are injected into every component in the app.
Expand Down Expand Up @@ -156,18 +161,6 @@ Finally, don't forget that `this.$route` and `this.$router` are also available a

If a markdown file contains a `<!-- more -->` comment, any content above the comment will be extracted and exposed as `$page.excerpt`. If you are building custom theme for blogging, this data can be used to render a post list with excerpts.

## Content Outlet

The compiled content of the current `.md` file being rendered will be available as a special `<Content/>` global component. You will need to render it somewhere in your layout in order to display the content of the page. The simplest theme can be just a single `Layout.vue` component with the following content:

``` html
<template>
<div class="theme-container">
<Content/>
</div>
</template>
```

## App Level Enhancements

Themes can enhance the Vue app that VuePress uses by exposing an `enhanceApp.js` file at the root of the theme. The file should `export default` a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:
Expand Down
6 changes: 1 addition & 5 deletions packages/docs/docs/zh/theme/default-theme-config.md
@@ -1,8 +1,4 @@
---
sidebar: auto
---

# 默认主题
# 默认主题配置

::: tip 提示
本页所列的选项仅对默认主题生效。如果你在使用一个自定义主题,选项可能会有不同。
Expand Down
8 changes: 4 additions & 4 deletions packages/docs/docs/zh/theme/option-api.md
Expand Up @@ -2,11 +2,11 @@
seoTitle: Option API | Theme
---

# Options
# Option API

## plugins

- Type: `Array|Object`
- Default: undefined
- 类型: `Array|Object`
- 默认值: undefined

See: [Plugin > Using a plugin](../plugin/using-a-plugin.md).
参考: [插件 > 使用插件](../plugin/using-a-plugin.md).
30 changes: 15 additions & 15 deletions packages/docs/docs/zh/theme/using-a-theme.md
@@ -1,51 +1,51 @@
# 使用主题

Using a theme is almost same as using a plugin.
使用一个主题和使用一个插件几乎一致。

## Use plugins from a dependency
## 使用 dependency 中的主题

Themes can be published on npm in raw Vue SFC format as `vuepress-theme-xxx`.
一个插件可以在以 `vuepress-theme-xxx` 的形式发布到 npm,你可以这样使用它:

``` js
module.exports = {
plugins: [ 'vuepress-theme-xx' ]
theme: 'vuepress-theme-xx'
}
```

## Theme Shorthand
## 主题的缩写

If you prefix the plugin with `vuepress-theme-`, you can use a shorthand to leave out that prefix:
如果你的插件名以 `vuepress-theme-` 开头,你可以使用缩写来省略这个前缀:

``` js
module.exports = {
plugins: [ 'xxx' ]
theme: 'xxx'
}
```

Same with:
和下面等价:

``` js
module.exports = {
plugins: [ 'vuepress-theme-xxx' ]
theme: 'vuepress-theme-xxx'
}
```

This also works with [Scoped Packages](https://docs.npmjs.com/misc/scope):
这也适用于 [Scoped Packages](https://docs.npmjs.com/misc/scope):

``` js
module.exports = {
plugins: [ '@org/vuepress-theme-xxx', '@vuepress/theme-xxx' ]
theme: '@org/vuepress-theme-xxx', // 或者一个官方主题: '@vuepress/theme-xxx'
}
```

Shorthand:
缩写:

``` js
module.exports = {
plugins: [ '@org/xxx', '@vuepress/xxx' ]
theme: '@org/xxx', // 或者一个官方主题: '@vuepress/xxx'
}
```

::: warning Note
The plugin whose name starts with `@vuepress/theme-` is an officially maintained theme.
::: warning 注意
`@vuepress/plugin-` 开头的插件是官方维护的插件。
:::

0 comments on commit 08e29e9

Please sign in to comment.