VuePressVuePress
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 指南

    • 介绍
    • 快速上手
    • 配置
    • 页面
      • 路由
      • Frontmatter
      • 内容
    • Markdown
    • 静态资源
    • 多语言支持
    • 部署
    • 主题
    • 插件
    • 打包工具
    • 从 v1 迁移
    • 常见问题

页面

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

路由

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

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

└─ docs
   ├─ guide
   │  ├─ getting-started.md
   │  └─ README.md
   ├─ contributing.md
   └─ README.md

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

相对路径路由路径
/README.md/
/index.md/
/contributing.md/contributing.html
/guide/README.md/guide/
/guide/getting-started.md/guide/getting-started.html

提示

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

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

此外,一些符号如 : 和 + 可能对 vue-router 有特殊含义,因此你应该避免使用它们,请参阅 vue-router 文档 了解更多详情。

Frontmatter

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

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

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

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

提示

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

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

内容

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

借助 markdown-it 和 Vue 模板语法的能力,基础的 Markdown 可以得到很多的扩展功能。接下来,前往 Markdown 章节来了解 VuePress 中 Markdown 的扩展功能。

在 GitHub 上编辑此页
上次更新:
贡献者: meteorlxy, Mr.Hope, Xinyu Liu
Prev
配置
Next
Markdown