页面

VuePress 是以 Markdown 为中心的。你项目中的每一个 Markdown 文件都是一个单独的页面。

路由

默认情况下,页面的路由路径是根据你的 Markdown 文件的相对路径决定的。

假设这是你的 Markdown 文件所处的目录结构:

  1. └─ docs
  2. ├─ guide
  3. ├─ getting-started.md
  4. └─ README.md
  5. ├─ contributing.md
  6. └─ README.md

docs 目录作为你的 sourceDir ,例如你在运行 vuepress dev docs 命令。此时,你的 Markdown 文件对应的路由路径为:

相对路径路由路径
/README.md/
/contributing.md/contributing.html
/guide/README.md/guide/
/guide/page.md/guide/page.html

Frontmatter

Markdown 文件可以包含一个 YAML页面 - 图1在新窗口打开 Frontmatter 。Frontmatter 必须在 Markdown 文件的顶部,并且被包裹在一对三短划线中间。下面是一个基本的示例:

  1. ---
  2. lang: zh-CN
  3. title: 页面的标题
  4. description: 页面的描述
  5. ---

你肯定注意到 Frontmatter 中的字段和配置文件中的站点配置十分类似。你可以通过 Frontmatter 来覆盖当前页面的 lang, title, description 等属性。因此,你可以把 Frontmatter 当作页面级作用域的配置。

同样的,VuePress 有一些内置支持的 Frontmatter 字段,而你使用的主题也可能有它自己的特殊 Frontmatter 。

提示

前往 Frontmatter 参考 查看 VuePress 支持的 Frontmatter 配置。

前往 默认主题 > Frontmatter 参考 查看默认主题的 Frontmatter 配置。

内容

页面的主要内容是使用 Markdown 书写的。VuePress 首先会将 Markdown 转换为 HTML ,然后将 HTML 作为 Vue 单文件组件的 <template>

借助 markdown-it页面 - 图2在新窗口打开 和 Vue 模板语法的能力,基础的 Markdown 可以得到很多的扩展功能。接下来,前往 Markdown 章节来了解 VuePress 中 Markdown 的扩展功能。