Skip to content

Commit 77515d3

Browse files
committed
docs: new content for new feautures
1 parent 0170449 commit 77515d3

File tree

6 files changed

+83
-19
lines changed

6 files changed

+83
-19
lines changed

Diff for: docs/guide/basic-config.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ If you've got the dev server running, you should see the page now has a header w
1717

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

20+
::: tip Alternative Config Formats
21+
You can also use YAML (`.vuepress/config.yml`) or TOML (`.vuepress/config.toml`) formats for the configuration file.
22+
:::
23+
2024
## Theme Configuration
2125

2226
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.
@@ -31,7 +35,8 @@ Since the VuePress app is a standard Vue app, you can apply app-level enhancemen
3135
export default ({
3236
Vue, // the version of Vue being used in the VuePress app
3337
options, // the options for the root Vue instance
34-
router // the router instance for the app
38+
router, // the router instance for the app
39+
siteData // site metadata
3540
}) => {
3641
// ...apply enhancements to the app
3742
}

Diff for: docs/guide/custom-themes.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,16 @@ The compiled content of the current `.md` file being rendered will be available
7070
</template>
7171
```
7272

73-
## Theme Level Enhancements
73+
## App Level Enhancements
7474

75-
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:
75+
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:
7676

7777
``` js
7878
export default ({
7979
Vue, // the version of Vue being used in the VuePress app
8080
options, // the options for the root Vue instance
81-
router // the router instance for the app
81+
router, // the router instance for the app
82+
siteData // site metadata
8283
}) => {
8384
// ...apply enhancements to the app
8485
}

Diff for: docs/guide/markdown.md

+25-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
---
2-
meta:
3-
- name: keywords
4-
content: static docs generator vue
5-
---
6-
71
# Markdown Extensions
82

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

70-
## YAML Front Matter
64+
## Front Matter
7165

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

@@ -92,6 +86,30 @@ meta:
9286
---
9387
```
9488

89+
### Alternative Front Matter Formats
90+
91+
In addition, VuePress also supports JSON or [TOML](https://github.com/toml-lang/toml) front matter.
92+
93+
JSON front matter needs to start and end in curly braces:
94+
95+
```
96+
---
97+
{
98+
"title": "Blogging Like a Hacker",
99+
"lang": "en-US"
100+
}
101+
---
102+
```
103+
104+
TOML front matter needs to be explicitly marked as TOML:
105+
106+
```
107+
---toml
108+
title = "Blogging Like a Hacker"
109+
lang = "en-US"
110+
---
111+
```
112+
95113
## GitHub-Style Tables
96114

97115
**Input**

Diff for: docs/zh/guide/basic-config.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ module.exports = {
1717

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

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

2124
## 主题配置
2225

@@ -33,7 +36,8 @@ module.exports = {
3336
export default ({
3437
Vue, // VuePress 正在使用的 Vue 构造函数
3538
options, // 附加到根实例的一些选项
36-
router // 当前应用的路由实例
39+
router, // 当前应用的路由实例
40+
siteData // 站点元数据
3741
}) => {
3842
// ...做一些其他的应用级别的优化
3943
}

Diff for: docs/zh/guide/custom-themes.md

+18
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,21 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
7070
</template>
7171
```
7272

73+
## 应用配置
74+
75+
自定义主题也可以通过主题根目录下的 `enhanceApp.js` 文件来对 VuePress 应用进行拓展配置。这个文件应当 `export default` 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:
76+
77+
```js
78+
export default ({
79+
Vue, // VuePress 正在使用的 Vue 构造函数
80+
options, // 附加到根实例的一些选项
81+
router, // 当前应用的路由实例
82+
siteData // 站点元数据
83+
}) => {
84+
// ...做一些其他的应用级别的优化
85+
}
86+
```
87+
7388
## 使用来自 npm 的主题
7489

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

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

102+
## 修改默认主题
103+
104+
你可以使用 `vuepress eject [targetDir]` 这个命令来将默认主题的源码复制到 `.vuepress/theme` 文件夹下,从而可以对默认主题进行任意的修改。需要注意的是一旦 eject,即使升级 VuePress 你也无法再获得 VuePress 对默认主题的更新。

Diff for: docs/zh/guide/markdown.md

+25-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
---
2-
meta:
3-
- name: keywords
4-
content: static docs generator vue
5-
---
6-
71
# Markdown 拓展
82

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

25-
## YAML Front Matter
19+
## Front Matter
2620

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

@@ -47,6 +41,30 @@ meta:
4741
---
4842
```
4943

44+
### 其他格式的 Front Matter
45+
46+
除了 YAML 之外,VuePress 也支持 JSON 或者 [TOML](https://github.com/toml-lang/toml) 格式的 front matter。
47+
48+
JSON front matter 需要以花括号开头和结尾:
49+
50+
```
51+
---
52+
{
53+
"title": "Blogging Like a Hacker",
54+
"lang": "en-US"
55+
}
56+
---
57+
```
58+
59+
TOML front matter 需要显式地标注为 TOML:
60+
61+
```
62+
---toml
63+
title = "Blogging Like a Hacker"
64+
lang = "en-US"
65+
---
66+
```
67+
5068
## GitHub 风格的表格
5169

5270
**Input**

0 commit comments

Comments
 (0)