Appearance
vitepress
使用流程
- VitePress 使用 基于文件的路由：每个 .md 文件将在相同的路径被编译成为 .html 文件
- 路由：使用基于文件的路由，生成的 HTML页面是从源Markdown 文件的目录结构映射而来的，直接访问文件名，不用后缀；
- 项目根目录是 .vitepress。.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的预留位置；
- 源目录是 Markdown 源文件所在的位置。默认情况下，它与项目根目录相同。可以通过 srcDir 配置选项对其进行配置srcDir: 'src'
- 静态路径引用：包括绝对路径，都应基于你的工作目录的结构，可以将这些文件放置在源目录的 public 目录中；
- 可以使用插件来扩展vitepress的功能，vite-plugin-vitepress-auto-nav自动侧边栏插件。也可以自己写插件，插件就是写一个js被引入使用；
站点配置
- 配置文件总是从 <root>/.vitepress/config.[js/ts] 解析
- 可以配置导航、页面底部展示信息、搜索文档、logo、网站标题等等信息；
在 Markdown 使用 Vue
- 支持<script> 和 <style>，没有 <template>
- 也可以使用vue指令，原始 HTML 在 Markdown 中也有效
运行时 API
- useData()，为我们提供了所有的运行时数据，以便我们根据不同条件渲染不同的布局。
- useRoute，返回当前路由对象：
- $frontmatter，在 Vue 表达式中直接访问当前页面的 frontmatter 数据。
- $params，在 Vue 表达式中直接访问当前页面的动态路由参数。
frontmatter 配置
- frontmatter 必须位于 Markdown 文件的顶部 (在任何元素之前)，并且需要在三条虚线之间采用有效的 YAML 格式;
- 支持基于页面的配置。在每个 markdown 文件中，可以使用 frontmatter 配置来覆盖站点级别或主题级别的配置选项；
- layout：doc | home | page| false
- sidebar/aside都可以在任何页面设置成false
- frontmatter 数据可以通过特殊的 $frontmatter 全局变量来访问，和访问vuejs的动态变量一样：
自定义主题和扩展默认主题
扩展默认主题
- 这三种情况扩展默认主题
- 需要调整 CSS 样式；
- 需要修改 Vue 应用实例，例如注册全局组件；
- 需要通过 layout 插槽将自定义内容注入到主题中
- 默认主题的 <Layout/> 组件有一些插槽，能够被用来在页面的特定位置注入内容。也可以使用渲染函数h。
- 默认主题布局有很多插槽：top bottom footer before after这些都可以包括nav和aside配合使用；
自定义主题
- 自定义主题就是不使用任何vitepress内置的组件和css，使用md渲染、路由等基本功能；
- 可以通过创建一个 .vitepress/theme/index.js(即“主题入口文件”) 来启用自定义主题；
- 当检测到存在主题入口文件时，VitePress 总会使用自定义主题而不是默认主题；
- 主题接口：VitePress 自定义主题是一个对象，该对象具有如下接口：Layout、enhanceApp、extends
- 构建布局：最基本的布局组件需要包含一个 <Content /> 组件：