Skip to content

Commit

Permalink
docs: new content for new feautures
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Apr 23, 2018
1 parent 0170449 commit 77515d3
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 19 deletions.
7 changes: 6 additions & 1 deletion docs/guide/basic-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ If you've got the dev server running, you should see the page now has a header w

Consult the [Config Reference](../config/) for a full list of options.

::: tip Alternative Config Formats
You can also use YAML (`.vuepress/config.yml`) or TOML (`.vuepress/config.toml`) formats for the configuration file.
:::

## Theme Configuration

A VuePress theme is responsible for all the layout and interactivity details of your site. VuePress ships with a default theme (you are looking at it right now) which is designed for technical documentation. It exposes a number of options that allow you to customize the navbar, sidebar and homepage, etc. For details, check out the [Default Theme Config](../default-theme-config/) page.
Expand All @@ -31,7 +35,8 @@ Since the VuePress app is a standard Vue app, you can apply app-level enhancemen
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router // the router instance for the app
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
}
Expand Down
7 changes: 4 additions & 3 deletions docs/guide/custom-themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,16 @@ The compiled content of the current `.md` file being rendered will be available
</template>
```

## Theme Level Enhancements
## App Level Enhancements

Themes can extend the Vue app that VuePress uses by exposing an `index.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:
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:

``` js
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router // the router instance for the app
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
}
Expand Down
32 changes: 25 additions & 7 deletions docs/guide/markdown.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
---
meta:
- name: keywords
content: static docs generator vue
---

# Markdown Extensions

## Header Anchors
Expand Down Expand Up @@ -67,7 +61,7 @@ Given the following directory structure:
- [vuejs.org](https://vuejs.org)
- [VuePress on GitHub](https://github.com/vuejs/vuepress)

## YAML Front Matter
## Front Matter

[YAML front matter](https://jekyllrb.com/docs/frontmatter/) is supported out of the box:

Expand All @@ -92,6 +86,30 @@ meta:
---
```

### Alternative Front Matter Formats

In addition, VuePress also supports JSON or [TOML](https://github.com/toml-lang/toml) front matter.

JSON front matter needs to start and end in curly braces:

```
---
{
"title": "Blogging Like a Hacker",
"lang": "en-US"
}
---
```

TOML front matter needs to be explicitly marked as TOML:

```
---toml
title = "Blogging Like a Hacker"
lang = "en-US"
---
```

## GitHub-Style Tables

**Input**
Expand Down
6 changes: 5 additions & 1 deletion docs/zh/guide/basic-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ module.exports = {

参见 [配置](../config/) 来查看所有可配置的选项。

::: tip 其他配置格式
你也可以使用 YAML (`.vuepress/config.yml`) 或是 TOML (`.vuepress/config.toml`) 格式的配置文件。
:::

## 主题配置

Expand All @@ -33,7 +36,8 @@ module.exports = {
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router // 当前应用的路由实例
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
// ...做一些其他的应用级别的优化
}
Expand Down
18 changes: 18 additions & 0 deletions docs/zh/guide/custom-themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,21 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
</template>
```

## 应用配置

自定义主题也可以通过主题根目录下的 `enhanceApp.js` 文件来对 VuePress 应用进行拓展配置。这个文件应当 `export default` 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

```js
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
// ...做一些其他的应用级别的优化
}
```

## 使用来自 npm 的主题

主题可以以 Vue 单文件组件的格式,并以 `vuepress-theme-xxx` 的名称发布到 npm 上。
Expand All @@ -84,3 +99,6 @@ module.exports = {

VuePress 将会尝试去加载并使用位于 `node_modules/vuepress-theme-awesome/Layout.vue` 的主题组件。

## 修改默认主题

你可以使用 `vuepress eject [targetDir]` 这个命令来将默认主题的源码复制到 `.vuepress/theme` 文件夹下,从而可以对默认主题进行任意的修改。需要注意的是一旦 eject,即使升级 VuePress 你也无法再获得 VuePress 对默认主题的更新。
32 changes: 25 additions & 7 deletions docs/zh/guide/markdown.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
---
meta:
- name: keywords
content: static docs generator vue
---

# Markdown 拓展

## Header Anchors
Expand All @@ -22,7 +16,7 @@ meta:
- [vuejs.org](https://vuejs.org)
- [VuePress on GitHub](https://github.com/vuejs/vuepress)

## YAML Front Matter
## Front Matter

VuePress 提供了对 [YAML front matter](https://jekyllrb.com/docs/frontmatter/) 开箱即用的支持:

Expand All @@ -47,6 +41,30 @@ meta:
---
```

### 其他格式的 Front Matter

除了 YAML 之外,VuePress 也支持 JSON 或者 [TOML](https://github.com/toml-lang/toml) 格式的 front matter。

JSON front matter 需要以花括号开头和结尾:

```
---
{
"title": "Blogging Like a Hacker",
"lang": "en-US"
}
---
```

TOML front matter 需要显式地标注为 TOML:

```
---toml
title = "Blogging Like a Hacker"
lang = "en-US"
---
```

## GitHub 风格的表格

**Input**
Expand Down

0 comments on commit 77515d3

Please sign in to comment.