尧图网页设计 
前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载导读frontmatterYAML 前置元数据是 VitePress 中控制页面级元数据与行为的核心机制你可以在每个 Markdown 文件顶部用一段 YAML 配置覆盖站点级或主题级的默认选项并为页面注入自定义数据。读完本文你将掌握 frontmatter 的语法与解析原理、通过$frontmatter与useData()读取数据的方法、JSON 替代格式以及全部内置配置项如layout、navbar、sidebar、aside、head等的取值与行为。本文以 docs/ko/guide/frontmatter.md 为骨架并补充 frontmatter 配置参考 与仓库源码实现证据构成一份可落地的完整指南。frontmatter 是什么VitePress 支持在每个 Markdown 文件的顶部书写一段YAML frontmatter用于定义该页面的元数据如标题、描述或覆盖站点/主题级别的行为。所谓frontmatter指的是文件最开头、被---分隔线包裹的 YAML 区块--- title: VitePress로 문서 작성하기 editLink: true ---注本节示例与源码引用取自韩文文档实际键值对同样适用于任意语言版本的 VitePress 项目。解析引擎gray-matterVitePress 使用 gray-matter 库解析 frontmatter。在源码中可以看到它的直接引用src/node/contentLoader.ts 中import matter from gray-matter用于内容加载器读取 frontmattersrc/node/markdown/plugins/include.ts 同样引入 gray-matter用于处理 Markdown 包含include场景src/node/markdown/markdown.ts 中VitePress 会显式地给 gray-matter 传入一个空 options 对象避免其以完整文件内容为 key 进行无界缓存memoize这是从构建稳定性角度的关键细节。语法规则frontmatter 必须满足以下条件才会被解析必须位于 Markdown 文件的最顶部在任何元素之前包括script标签必须写在三个短横线---之间必须是合法的 YAML。--- title: VitePress로 문서 작성하기 editLink: true --- # {{ $frontmatter.title }} 가이드 내용覆盖优先级许多站点级或默认主题配置选项在 frontmatter 中都有对应项。frontmatter 的作用是针对当前页面覆盖override这些全局配置。例如全局设置了editLink但某页不希望显示编辑链接可在该页 frontmatter 中写editLink: false全局title来自站点配置某页可通过 frontmattertitle覆盖。完整的可用键列表见 frontmatter 配置参考下文第 5 节会详细展开。在页面中读取 frontmatter 数据方式一模板全局变量$frontmatterfrontmatter 数据可通过特殊的全局变量$frontmatter在 Vue 表达式中直接访问--- title: VitePress로 문서 작성하기 editLink: true --- # {{ $frontmatter.title }}在 src/client/app/index.ts 中可以看到$frontmatter的注册实现——它通过Object.defineProperties挂载到 Vue 的globalProperties上其 getter 返回data.frontmatter.value一个响应式引用// expose $frontmatter $params Object.defineProperties(app.config.globalProperties, { $frontmatter: { get() { return data.frontmatter.value } }, $params: { get() { return data.page.value.params } } })与此同时frontmatter数据源自路由的PageData见 src/client/app/data.tsfrontmatter: computed(() route.data.frontmatter)并可通过dir字段获取当前页面所在目录用于资源相对路径解析。方式二useData()composable在script setup中可以使用useData()帮助函数访问当前页面的 frontmatterscript setup import { useData } from vitepress const { frontmatter } useData() // frontmatter 是一个 Ref类型为 RefPageData[frontmatter] /scriptuseData()返回的对象中frontmatter: RefPageData[frontmatter]见 runtime-api.md在组合式 API 中响应式地读取页面元数据适合在自定义组件或自定义主题中使用。方式三模板全局$params动态路由相关在 src/client/app/index.ts 中与$frontmatter一起注册的还有$params用于访问动态路由如[id].md的路径参数。虽然它不属于 frontmatter 本身但两者常配合使用例如在 frontmatter 中为动态路由页面提供标题模板。替代格式JSON frontmatter除了 YAMLVitePress 还支持以花括号开头和结尾的JSON frontmatter语法--- { title: 해커처럼 블로깅하기, editLink: true } ---这与 YAML 完全等价只是书写格式不同。在需要严格 JSON 序列化、或由脚本工具生成页面元数据时JSON 格式更便于机器处理。frontmatter 内置配置项全参考以下配置项可在任意 Markdown 页面的 frontmatter 中声明用于覆盖站点级配置其中部分选项仅在默认主题下生效。示例与说明来自 docs/ko/reference/frontmatter-config.md。通用选项任何主题均生效title类型string说明页面标题等价于 config.title覆盖站点级配置。--- title: VitePress ---titleTemplate类型string | boolean说明标题的后缀模板等价于 config.titleTemplate覆盖站点级配置。例如设置titleTemplate: Vite Vue powered static site generator后浏览器标签页会渲染为页面标题 - 站点名形式的组合标题。构建时由 src/shared/shared.ts 中的createTitle(siteData, pageData)计算最终标题。--- title: VitePress titleTemplate: Vite Vue powered static site generator ---description类型string说明页面描述等价于 config.description覆盖站点级配置通常用于 SEO。--- description: VitePress ---head类型HeadConfig[]说明为当前页面追加的head标签会追加在站点级配置插入的 head 标签之后。常用于页面级的 SEO 元信息注入。--- head: - - meta - name: description content: hello - - meta - name: keywords content: super duper SEO ---对应的 TypeScript 类型为type HeadConfig | [string, Recordstring, string] | [string, Recordstring, string, string]在客户端src/client/app/composables/head.ts 会读取pageData.frontmatter.head并通过mergeHead将其与站点级 head 合并filterOutHeadDescription用于去重 description。默认主题专用选项以下选项仅在启用默认主题时生效。layout类型doc | home | page默认值doc说明决定页面的布局。doc对 Markdown 内容应用默认文档样式home首页专用布局可配合hero、features等选项快速构建落地页page行为类似doc但对内容不应用样式适合完全自定义的页面。--- layout: doc ---从 VPContent.vue 的实现可以看到布局分派逻辑layout page渲染VPPagelayout home渲染VPHome未设置或为doc时渲染VPDoc同时支持用户通过isRegistered注册自定义布局组件进行覆盖。hero类型对象layout为home时生效说明定义首页 hero 区块的内容。详细用法见 默认主题首页。features类型对象数组layout为home时生效说明定义首页功能特性区块展示的条目。详细用法见 默认主题首页。navbar类型boolean默认值true说明是否显示导航栏。--- navbar: false ---sidebar类型boolean默认值true说明是否显示侧边栏。--- sidebar: false ---aside类型boolean | left默认值true说明在doc布局中定义 aside右侧栏组件的位置。false不渲染 aside 容器true渲染在右侧left渲染在左侧。--- aside: false ---outline类型number | [number, number] | deep | false默认值2说明控制页面大纲outline显示的标题层级等价于 config.themeConfig.outline.level覆盖站点级配置。lastUpdated类型boolean | Date默认值true说明是否在页脚显示最后更新时间。如果传入了日期/时间值则显示该值而非 git 最后一次修改时间戳。--- lastUpdated: false ---editLink类型boolean默认值true说明是否在页脚显示编辑链接。--- editLink: false ---footer类型boolean默认值true说明是否显示页脚。在 VPFooter.vue 中可以看到其判定逻辑v-iftheme.footer frontmatter.footer ! false即主题启用且页面未关闭时才渲染。--- footer: false ---pageClass类型string说明添加到当前页面的额外 CSS 类名可用于页面级样式定制。在 Layout.vue 中frontmatter.pageClass被绑定到根元素的 class 上。--- pageClass: custom-page-class ---随后可在.vitepress/theme/custom.css中为该页面编写专属样式.custom-page-class { /* 页面专属样式 */ }自定义 frontmatter 数据与动态表达式除了内置配置项你还可以在 frontmatter 中定义任意自定义字段供页面模板中的 Vue 表达式使用。例如--- title: VitePress로 문서 작성하기 author: VitePress Team version: 2.0 --- # {{ $frontmatter.title }} - 作者{{ $frontmatter.author }} - 版本{{ $frontmatter.version }}自定义数据会随$frontmatter一起暴露天然支持在 Markdown 中做轻量数据驱动渲染也便于内容与模板分离。构建期插值优化进阶仓库中还提供了eager frontmatter 插值机制见 src/node/markdown/plugins/eagerFrontmatterInterpolation.ts在构建时如果{{ $frontmatter.xxx }}引用的是本页 frontmatter 中的简单原始值会被提前内联成静态文本默认开启见 markdown.ts 中的eagerFrontmatterInterpolation选项。这意味着很多看起来是运行时的 frontmatter 插值实际上在构建期就已经被解析为最终值可提升页面渲染效率。常见使用场景小结场景frontmatter 写法覆盖页面标题title: 我的页面关闭某页编辑链接editLink: false隐藏某页侧边栏sidebar: false制作首页落地页layout: homehero/features全自定义页面layout: page 自定义组件页面级 SEOtitle/description/head页面级样式钩子pageClass: my-class自定义模板数据任意 YAML 键 {{ $frontmatter.key }}总结frontmatter 是 VitePress 中页面即配置理念的核心载体通过 gray-matter 解析 YAML/JSON 元数据通过$frontmatter全局变量、useData()组合式 API 在模板与脚本中访问数据并通过title、head、layout、navbar、sidebar、aside、outline、lastUpdated、editLink、footer、pageClass等内置键覆盖站点与主题级行为。结合源码可知frontmatter 在构建期mdit-vue/plugin-frontmatter解析、eager 插值与运行期globalProperties注册、响应式PageData均深度参与理解它即可精准掌控每个页面的最终形态。赞分享前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载相关推荐Umi-OCR完整指南免费开源离线OCR工具3分钟快速上手Umi OCR完整指南免费开源离线OCR工具3分钟快速上手 还在为提取屏幕文字而烦恼吗每天面对数百页扫描文档手动输入到深夜在数字化办公时代一款高效的OCR桌面应用VitePress 默认主题页脚Footer配置完全指南themeConfig.footer 与 Frontmatter 逐页控制VitePress 默认主题页脚Footer配置完全指南 themeConfig.footer 与 Frontmatter 逐页控制 VitePress前端文档VitePress 上一页/下一页Prev Next链接配置完全指南frontmatter 自定义与 docFooter 全局控制VitePress 上一页/下一页Prev Next链接配置完全指南frontmatter 自定义与 docFooter 全局控制 导读 本文聚焦 Vit前端文档上一篇Coolify邮件通知系统终极指南如何配置专业的事件提醒系统下一篇高效下载管理的终极解决方案AB Download Manager完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 VitePress Frontmatter 完全指南：用 YAML 元数据掌控页面行为
前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载导读frontmatterYAML 前置元数据是 VitePress 中控制页面级元数据与行为的核心机制你可以在每个 Markdown 文件顶部用一段 YAML 配置覆盖站点级或主题级的默认选项并为页面注入自定义数据。读完本文你将掌握 frontmatter 的语法与解析原理、通过$frontmatter与useData()读取数据的方法、JSON 替代格式以及全部内置配置项如layout、navbar、sidebar、aside、head等的取值与行为。本文以 docs/ko/guide/frontmatter.md 为骨架并补充 frontmatter 配置参考 与仓库源码实现证据构成一份可落地的完整指南。frontmatter 是什么VitePress 支持在每个 Markdown 文件的顶部书写一段YAML frontmatter用于定义该页面的元数据如标题、描述或覆盖站点/主题级别的行为。所谓frontmatter指的是文件最开头、被---分隔线包裹的 YAML 区块--- title: VitePress로 문서 작성하기 editLink: true ---注本节示例与源码引用取自韩文文档实际键值对同样适用于任意语言版本的 VitePress 项目。解析引擎gray-matterVitePress 使用 gray-matter 库解析 frontmatter。在源码中可以看到它的直接引用src/node/contentLoader.ts 中import matter from gray-matter用于内容加载器读取 frontmattersrc/node/markdown/plugins/include.ts 同样引入 gray-matter用于处理 Markdown 包含include场景src/node/markdown/markdown.ts 中VitePress 会显式地给 gray-matter 传入一个空 options 对象避免其以完整文件内容为 key 进行无界缓存memoize这是从构建稳定性角度的关键细节。语法规则frontmatter 必须满足以下条件才会被解析必须位于 Markdown 文件的最顶部在任何元素之前包括script标签必须写在三个短横线---之间必须是合法的 YAML。--- title: VitePress로 문서 작성하기 editLink: true --- # {{ $frontmatter.title }} 가이드 내용覆盖优先级许多站点级或默认主题配置选项在 frontmatter 中都有对应项。frontmatter 的作用是针对当前页面覆盖override这些全局配置。例如全局设置了editLink但某页不希望显示编辑链接可在该页 frontmatter 中写editLink: false全局title来自站点配置某页可通过 frontmattertitle覆盖。完整的可用键列表见 frontmatter 配置参考下文第 5 节会详细展开。在页面中读取 frontmatter 数据方式一模板全局变量$frontmatterfrontmatter 数据可通过特殊的全局变量$frontmatter在 Vue 表达式中直接访问--- title: VitePress로 문서 작성하기 editLink: true --- # {{ $frontmatter.title }}在 src/client/app/index.ts 中可以看到$frontmatter的注册实现——它通过Object.defineProperties挂载到 Vue 的globalProperties上其 getter 返回data.frontmatter.value一个响应式引用// expose $frontmatter $params Object.defineProperties(app.config.globalProperties, { $frontmatter: { get() { return data.frontmatter.value } }, $params: { get() { return data.page.value.params } } })与此同时frontmatter数据源自路由的PageData见 src/client/app/data.tsfrontmatter: computed(() route.data.frontmatter)并可通过dir字段获取当前页面所在目录用于资源相对路径解析。方式二useData()composable在script setup中可以使用useData()帮助函数访问当前页面的 frontmatterscript setup import { useData } from vitepress const { frontmatter } useData() // frontmatter 是一个 Ref类型为 RefPageData[frontmatter] /scriptuseData()返回的对象中frontmatter: RefPageData[frontmatter]见 runtime-api.md在组合式 API 中响应式地读取页面元数据适合在自定义组件或自定义主题中使用。方式三模板全局$params动态路由相关在 src/client/app/index.ts 中与$frontmatter一起注册的还有$params用于访问动态路由如[id].md的路径参数。虽然它不属于 frontmatter 本身但两者常配合使用例如在 frontmatter 中为动态路由页面提供标题模板。替代格式JSON frontmatter除了 YAMLVitePress 还支持以花括号开头和结尾的JSON frontmatter语法--- { title: 해커처럼 블로깅하기, editLink: true } ---这与 YAML 完全等价只是书写格式不同。在需要严格 JSON 序列化、或由脚本工具生成页面元数据时JSON 格式更便于机器处理。frontmatter 内置配置项全参考以下配置项可在任意 Markdown 页面的 frontmatter 中声明用于覆盖站点级配置其中部分选项仅在默认主题下生效。示例与说明来自 docs/ko/reference/frontmatter-config.md。通用选项任何主题均生效title类型string说明页面标题等价于 config.title覆盖站点级配置。--- title: VitePress ---titleTemplate类型string | boolean说明标题的后缀模板等价于 config.titleTemplate覆盖站点级配置。例如设置titleTemplate: Vite Vue powered static site generator后浏览器标签页会渲染为页面标题 - 站点名形式的组合标题。构建时由 src/shared/shared.ts 中的createTitle(siteData, pageData)计算最终标题。--- title: VitePress titleTemplate: Vite Vue powered static site generator ---description类型string说明页面描述等价于 config.description覆盖站点级配置通常用于 SEO。--- description: VitePress ---head类型HeadConfig[]说明为当前页面追加的head标签会追加在站点级配置插入的 head 标签之后。常用于页面级的 SEO 元信息注入。--- head: - - meta - name: description content: hello - - meta - name: keywords content: super duper SEO ---对应的 TypeScript 类型为type HeadConfig | [string, Recordstring, string] | [string, Recordstring, string, string]在客户端src/client/app/composables/head.ts 会读取pageData.frontmatter.head并通过mergeHead将其与站点级 head 合并filterOutHeadDescription用于去重 description。默认主题专用选项以下选项仅在启用默认主题时生效。layout类型doc | home | page默认值doc说明决定页面的布局。doc对 Markdown 内容应用默认文档样式home首页专用布局可配合hero、features等选项快速构建落地页page行为类似doc但对内容不应用样式适合完全自定义的页面。--- layout: doc ---从 VPContent.vue 的实现可以看到布局分派逻辑layout page渲染VPPagelayout home渲染VPHome未设置或为doc时渲染VPDoc同时支持用户通过isRegistered注册自定义布局组件进行覆盖。hero类型对象layout为home时生效说明定义首页 hero 区块的内容。详细用法见 默认主题首页。features类型对象数组layout为home时生效说明定义首页功能特性区块展示的条目。详细用法见 默认主题首页。navbar类型boolean默认值true说明是否显示导航栏。--- navbar: false ---sidebar类型boolean默认值true说明是否显示侧边栏。--- sidebar: false ---aside类型boolean | left默认值true说明在doc布局中定义 aside右侧栏组件的位置。false不渲染 aside 容器true渲染在右侧left渲染在左侧。--- aside: false ---outline类型number | [number, number] | deep | false默认值2说明控制页面大纲outline显示的标题层级等价于 config.themeConfig.outline.level覆盖站点级配置。lastUpdated类型boolean | Date默认值true说明是否在页脚显示最后更新时间。如果传入了日期/时间值则显示该值而非 git 最后一次修改时间戳。--- lastUpdated: false ---editLink类型boolean默认值true说明是否在页脚显示编辑链接。--- editLink: false ---footer类型boolean默认值true说明是否显示页脚。在 VPFooter.vue 中可以看到其判定逻辑v-iftheme.footer frontmatter.footer ! false即主题启用且页面未关闭时才渲染。--- footer: false ---pageClass类型string说明添加到当前页面的额外 CSS 类名可用于页面级样式定制。在 Layout.vue 中frontmatter.pageClass被绑定到根元素的 class 上。--- pageClass: custom-page-class ---随后可在.vitepress/theme/custom.css中为该页面编写专属样式.custom-page-class { /* 页面专属样式 */ }自定义 frontmatter 数据与动态表达式除了内置配置项你还可以在 frontmatter 中定义任意自定义字段供页面模板中的 Vue 表达式使用。例如--- title: VitePress로 문서 작성하기 author: VitePress Team version: 2.0 --- # {{ $frontmatter.title }} - 作者{{ $frontmatter.author }} - 版本{{ $frontmatter.version }}自定义数据会随$frontmatter一起暴露天然支持在 Markdown 中做轻量数据驱动渲染也便于内容与模板分离。构建期插值优化进阶仓库中还提供了eager frontmatter 插值机制见 src/node/markdown/plugins/eagerFrontmatterInterpolation.ts在构建时如果{{ $frontmatter.xxx }}引用的是本页 frontmatter 中的简单原始值会被提前内联成静态文本默认开启见 markdown.ts 中的eagerFrontmatterInterpolation选项。这意味着很多看起来是运行时的 frontmatter 插值实际上在构建期就已经被解析为最终值可提升页面渲染效率。常见使用场景小结场景frontmatter 写法覆盖页面标题title: 我的页面关闭某页编辑链接editLink: false隐藏某页侧边栏sidebar: false制作首页落地页layout: homehero/features全自定义页面layout: page 自定义组件页面级 SEOtitle/description/head页面级样式钩子pageClass: my-class自定义模板数据任意 YAML 键 {{ $frontmatter.key }}总结frontmatter 是 VitePress 中页面即配置理念的核心载体通过 gray-matter 解析 YAML/JSON 元数据通过$frontmatter全局变量、useData()组合式 API 在模板与脚本中访问数据并通过title、head、layout、navbar、sidebar、aside、outline、lastUpdated、editLink、footer、pageClass等内置键覆盖站点与主题级行为。结合源码可知frontmatter 在构建期mdit-vue/plugin-frontmatter解析、eager 插值与运行期globalProperties注册、响应式PageData均深度参与理解它即可精准掌控每个页面的最终形态。赞分享前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载相关推荐Umi-OCR完整指南免费开源离线OCR工具3分钟快速上手Umi OCR完整指南免费开源离线OCR工具3分钟快速上手 还在为提取屏幕文字而烦恼吗每天面对数百页扫描文档手动输入到深夜在数字化办公时代一款高效的OCR桌面应用VitePress 默认主题页脚Footer配置完全指南themeConfig.footer 与 Frontmatter 逐页控制VitePress 默认主题页脚Footer配置完全指南 themeConfig.footer 与 Frontmatter 逐页控制 VitePress前端文档VitePress 上一页/下一页Prev Next链接配置完全指南frontmatter 自定义与 docFooter 全局控制VitePress 上一页/下一页Prev Next链接配置完全指南frontmatter 自定义与 docFooter 全局控制 导读 本文聚焦 Vit前端文档上一篇Coolify邮件通知系统终极指南如何配置专业的事件提醒系统下一篇高效下载管理的终极解决方案AB Download Manager完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考