项目内容

本教程指引你如何在 VuePress 项目中生成页面。

页面的生成

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

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

由于你的项目是通过创建助手生成的，那么你会得到以下文件结构:

└─ src
   ├─ demo
   │  ├─ ...
   │  └─ page.md
   │  └─ markdown.md
   │  └─ README.md
   ├─ ...
   └─ README.md

你的 Markdown 文件对应的路由路径为:

相对路径	路由路径
/README.md	/
/demo/README.md	/demo/
/demo/page.md	/demo/page.html

README.md

README.md 是特例，在 Markdown 中，按照约定俗成，它会作为所在文件夹的主页。所以在渲染为网页时，它的对应路径为网页中的主页路径 index.html。

这应该很好理解。

Markdown

每一个 Markdown 文件都会被 VuePress Theme Hope 处理，将文件内容渲染为网页内容。

你可以尝试自己编辑 Markdown 文件来修改模板的内容。如果你已启动开发服务器，那么修改后的结果会被实时同步到开发服务器上。

Markdown 语法

如果你尚不了解 Markdown，请查看 Markdown 教程。

大概十五分钟，你就可以学会如何书写 Markdown，看完之后记得回来！

Markdown 语法扩展

• VuePress 自身对 Markdown 语法进行了一些扩展，关于这些扩展的语法，详见 VuePress → Markdown。

• 主题通过 VuePress 插件额外启用了一些语法扩展，详见 指南 → Markdown。

Frontmatter

Frontmatter 是 VuePress 中很重要的一个概念，它用于承载 Markdown 文件的配置。Markdown 文件可以包含一个 YAML Frontmatter。

YAML

如果你对 YAML 也不熟悉，你可以查看 YAML 教程。

Frontmatter 必须在 Markdown 文件的顶部，并且被包裹在一对三短划线中间。下面是一个基本的示例:

---
lang: zh-CN
title: 页面的标题
description: 页面的描述
---

<!-- 这里是 Markdown 内容 -->

...

你也许注意到案例中 Frontmatter 中的字段和 VuePress 配置文件 十分类似。你可以通过 Frontmatter 来覆盖当前页面的 lang, title, description 等属性。因此，你可以把 Frontmatter 当作页面级作用域的配置，它通常具有最高优先级，所作配置仅对当前页面生效。