1980's Maker

一个出生于80年代的程序员 -- 喜爱创[客]、美[食]、动[画]、怀[旧]的新手艺人的博客

VuePress中的常用术语

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

# layout

  • Access: $page.frontmatter.layout

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

# front matter

任何包含 YAML front matter 的 Markdown 文件都将由 gray-matter (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)

# 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

Buy me a cup of coffee ☕.