提交 77515d34 编写于 作者: E Evan You

docs: new content for new feautures

上级 01704491
......@@ -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.
......@@ -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
}
......
......@@ -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
}
......
---
meta:
- name: keywords
content: static docs generator vue
---
# Markdown Extensions
## Header Anchors
......@@ -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:
......@@ -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**
......
......@@ -17,6 +17,9 @@ module.exports = {
参见 [配置](../config/) 来查看所有可配置的选项。
::: tip 其他配置格式
你也可以使用 YAML (`.vuepress/config.yml`) 或是 TOML (`.vuepress/config.toml`) 格式的配置文件。
:::
## 主题配置
......@@ -33,7 +36,8 @@ module.exports = {
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router // 当前应用的路由实例
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
// ...做一些其他的应用级别的优化
}
......
......@@ -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 上。
......@@ -84,3 +99,6 @@ module.exports = {
VuePress 将会尝试去加载并使用位于 `node_modules/vuepress-theme-awesome/Layout.vue` 的主题组件。
## 修改默认主题
你可以使用 `vuepress eject [targetDir]` 这个命令来将默认主题的源码复制到 `.vuepress/theme` 文件夹下,从而可以对默认主题进行任意的修改。需要注意的是一旦 eject,即使升级 VuePress 你也无法再获得 VuePress 对默认主题的更新。
---
meta:
- name: keywords
content: static docs generator vue
---
# Markdown 拓展
## Header Anchors
......@@ -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/) 开箱即用的支持:
......@@ -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**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册