查看“VuePress页面”的源代码


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

== 路由 ==

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

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

<pre>
└─ docs
   ├─ guide
   │  ├─ getting-started.md
   │  └─ README.md
   ├─ contributing.md
   └─ README.md
</pre>
将 <code>docs</code> 目录作为你的 sourceDir ，例如你在运行 <code>vuepress dev docs</code> 命令。此时，你的 Markdown 文件对应的路由路径为：

{| class="wikitable"
|-
! 相对路径
! 路由路径
|-
| <code>/README.md</code>
| <code>/</code>
|-
| <code>/index.md</code>
| <code>/</code>
|-
| <code>/contributing.md</code>
| <code>/contributing.html</code>
|-
| <code>/guide/README.md</code>
| <code>/guide/</code>
|-
| <code>/guide/getting-started.md</code>
| <code>/guide/getting-started.html</code>
|}

<div class="tip">

默认配置下， <code>README.md</code> 和 <code>index.md</code> 都会被转换成 <code>index.html</code> ，并且其对应的路由路径都是由斜杠结尾的。然而，如果你想同时保留这两个文件，就可能会造成冲突。

在这种情况下，你可以设置 pagePatterns 来避免某个文件被 VuePress 处理，例如使用 <code>['**/*.md', '!**/README.md', '!.vuepress', '!node_modules']</code> 来排除所有的 <code>README.md</code> 文件。

此外，一些符号如 <code>:</code> 和 <code>+</code> 可能对 vue-router 有特殊含义，因此你应该避免使用它们，请参阅 [https://router.vuejs.org/zh/guide/essentials/route-matching-syntax.html vue-router 文档] 了解更多详情。


</div>
<span id="frontmatter"></span>
== Frontmatter ==

Markdown 文件可以包含一个 [https://yaml.org/ YAML] Frontmatter 。Frontmatter 必须在 Markdown 文件的顶部，并且被包裹在一对三短划线中间。下面是一个基本的示例：

<pre class="md">---
lang: zh-CN
title: 页面的标题
description: 页面的描述
---</pre>
你肯定注意到 Frontmatter 中的字段和配置文件中的站点配置十分类似。你可以通过 Frontmatter 来覆盖当前页面的 <code>lang</code>, <code>title</code>, <code>description</code> 等属性。因此，你可以把 Frontmatter 当作页面级作用域的配置。

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

== 内容 ==

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

借助 [https://github.com/markdown-it/markdown-it markdown-it] 和 Vue 模板语法的能力，基础的 Markdown 可以得到很多的扩展功能。