VuePress中的常用术语

你可能会在你可能会在文档中碰到一些陌生的概念,本节列出了文档中常见的术语,方便查阅、学习、插件/主题开发之用。

# # layout

  • Access: $page.frontmatter.layout

当前页面所使用的布局组件名。

# # front matter

任何包含 YAML front matter 的 Markdown 文件都将由 gray-matter (opens new window) (opens new window) 处理。front matter 必须是 markdown 文件中的第一部分,并且必须采用在三点划线之间书写的有效的 YAML。 这是一个基本的例子:

---
title: Blogging Like a Hacker
lang: en-US
---
1
2
3
4

在这些三条虚线之间,你可以设置预定义变量(参见下面),甚至可以创建自己的自定义变量。 然后,您可以使用 $frontmatter 在页面的其余部分、以及所有的自定义和主题组件访问这些变量。

TIP

在 VuePress 中,Front matter 是 可选的。通过Front matter可以做很多有用的事情, 比如文章标签、分类、封面图等


# # 预定义变量

# # title

  • 类型: string
  • 默认值: h1_title || siteConfig.title

当前页面的标题。

# # lang

  • 类型: string
  • 默认值: en-US

当前页面的语言。

# # description

  • 类型: string
  • 默认值: siteConfig.description

当前页面的描述。

# # layout

  • 类型: string
  • 默认值: Layout

设置当前页面的布局组件。

  • 类型: string
  • 默认值: siteConfig.permalink

参考: Permalinks.

# # metaTitle

  • 类型: string
  • 默认值: `${page.title} | ${siteConfig.title}`

重写默认的 meta title。

# # meta

  • 类型: array
  • 默认值: undefined

指定额外的要注入的 meta 标签:

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super duper SEO
---
1
2
3
4
5
6
7

# # content

当前的 .md 文件渲染的内容,可以作为一个独特的全局组件 <Content/> 来使用.

  • Access: $page.frontmatter.permalink

永久链接,更多细节请参考官网文档 Permalinks (opens new window) (opens new window)

# # regularPath

  • Access: $page.regularPath

当前页面基于目录结构生成的 URL。

# # path

  • Access: $page.path

当前页面的实际 URL。在构建期生成路由时,一个页面的 URL 将优先使用 permalink,若不存在则降级到 regularPath

# # headers

  • Access: $page.headers

markdown 中那些以一个或多个 # 定义的标题。

# # siteConfig

  • Access: $site | Context.siteConfig

.vuepress/config.js,译为 站点配置

# # themeConfig

  • Access: $themeConfig | Context.themeConfig

.vuepress/config.jsthemeConfig 的值,是用户对当前所使用的主题的配置。

# # themePath

  • Access: Context.themeAPI.theme.path

当前使用的主题的所在的绝对路径。

# # themeEntry

  • Access: Context.themeAPI.theme.entry

主题的配置文件 themePath/index.js

# # parentThemePath

  • Access: Context.themeAPI.parentTheme.path

如果当前使用的主题是一个派生主题,那么 parentThemePath 就是指父主题的所在绝对路径。

# # parentThemeEntry

  • Access: Context.themeAPI.parentTheme.entry

如果当前使用的主题是一个派生主题,那么 parentThemePath 就是指父主题的主题的配置文件 parentThemePath/index.js