Slidev Headmatter 配置完全指南整份幻灯片第一段 Frontmatter 的全部选项与源码剖析【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevHeadmatter 是 Slidev 幻灯片文件slides.md开头第一个---之间的 YAML 块它承载着**整份演示文稿级deck-wide**的全局配置例如主题、字体、色彩模式、绘图、导出与 SEO 等。本文以 skills/slidev/references/core-headmatter.md 为骨架逐组讲解 Headmatter 每个选项的取值、默认行为与适用场景并结合 packages/types/src/frontmatter.ts 中的类型定义与 packages/slidev/node/vite/loaders.ts 中的合并逻辑说明这些配置在 Slidev 引擎内部究竟如何被解析与使用帮助你写出可复制、可运行、结构清晰的演示文稿。什么是 Headmatter与每页 Frontmatter 有何区别在 Slidev 中术语需要先厘清Headmatter位于slides.md文件最开头的---YAML 块用于配置整个 Deck。它就是 Markdown 生态里通常所说的 frontmatter因此大多数 Markdown 编辑器和格式化工具都能原生识别它。Frontmatter每页位于某个---分隔的幻灯片内容之前的普通---YAML 块用于配置单张幻灯片例如layout、transition、clicks等。一个重要的语法限制是不能使用 YAML 代码块yaml充当整份 Deck 的 Headmatter只能使用---包围的内联 YAML 块。关于这一区分可参见 docs/features/block-frontmatter.md。Slidev 会把 Headmatter 与每页 frontmatter 区分存储并在运行时做合并。从源码看packages/slidev/node/vite/loaders.ts 中的getFrontmatter()函数清晰地展示了合并顺序function getFrontmatter(pageNo: number) { return { ...(data.headmatter?.defaults as object || {}), // ① Headmatter.defaults 全局默认 ...(data.slides[pageNo]?.frontmatter || {}), // ② 当前页自己的 frontmatter } }也就是说每页 frontmatter 永远覆盖 Headmatter 中defaults提供的同名键这为「先定全局、再按页覆盖」的工程化组织方式提供了底层保证。同时loaders.ts 会监听data.headmatter.defaults的变化并触发热更新意味着你修改全局默认值时开发服务器会自动刷新。主题与外观Theme Appearance--- theme: default # 主题包名或本地主题路径 colorSchema: auto # auto | light | dark源码中还支持 all favicon: /favicon.ico # Favicon URL aspectRatio: 16/9 # 幻灯片宽高比 canvasWidth: 980 # 画布宽度像素 ---各选项说明类型与默认值依据 packages/types/src/frontmatter.ts 中的HeadmatterConfigtheme主题包名如default、seriph也可以填本地主题路径。默认值为default。自定义主题的编写可参考 docs/guide/write-theme.md使用与清单可参考 skills/slidev/references/core-frontmatter.md 等配套参考。colorSchema色彩模式。源码中定义为dark | light | all | auto默认auto跟随系统。all表示同时构建深浅两套并在页面上提供切换常配合LightOrDark组件使用。favicon应用图标 URL默认指向 Slidev 自带的 favicon 资源。aspectRatio宽高比写法既可以是16/9这样的字符串也可以是1:1甚至是数值。默认16/9。canvasWidthSlidev 的逻辑画布宽度单位 px。无论屏幕多大内容都按这个宽度排版后再等比缩放因此控制画布宽度可以直接影响“一页能容纳多少内容”的密度感。默认980。字体配置Fonts--- fonts: sans: Roboto # 无衬线字体正文默认 serif: Roboto Slab # 衬线字体 mono: Fira Code # 等宽字体代码等 provider: google # google | none | coollabs ---FontOptions的完整定义位于 packages/types/src/frontmatter.ts除上面四个字段外还支持sans/serif/mono/custom均接受单个字符串或字符串数组数组用于指定多字体回退列表custom用来加载仅供自定义 CSS 使用的 Web 字体默认不作用于任何元素。provider字体提供商默认google通过 Google Fonts 加载可选none完全不加载网络字体适合离线演示或使用本地字体以及coollabs。weights字体字重默认[200, 400, 600]只加载用到的字重能显著降低首屏体积。italic是否额外引入斜体字重默认false。local声明哪些字体来自本地从而在生成 webfonts 时被排除。fallbacks是否自动添加系统字体回退栈默认true。需要给一套风格化字体时可用sans: [Roboto, Open Sans]这样的数组形式若你的环境无法访问 Google Fonts如内网 / CI将provider设为none并把字体安装到本地即可。代码与高亮Code Highlighting--- highlighter: shiki # 代码高亮器当前版本为 shiki lineNumbers: false # 代码块是否显示行号 monaco: true # 是否启用 Monaco 编辑器true | dev | build twoslash: true # 是否启用 TwoSlash 类型提示 monacoTypesSource: local # local | cdn | none ---highlighterSlidev 的代码高亮引擎源码类型中固定为shiki默认即shiki。相关高级配置见 docs/custom/config-highlighter.md。lineNumbers代码块是否显示行号默认false。逐行高亮与行号范围语法见 docs/features/code-block-line-numbers.md。monaco是否启用内置 Monaco 编辑器。接受布尔值也可用dev/build限定只在开发或构建环境启用下文的record、presenter等同理。默认true。详见 docs/features/monaco-editor.md。twoslash是否启用 TypeScript TwoSlash 悬停类型信息默认true类型定义注释为默认true参考 skills/slidev/references/code-twoslash.md。monacoTypesSourceMonaco 类型来源local表示从本地node_modules加载默认cdn通过typescript/ata从 CDN 拉取none关闭类型加载。若要补齐第三方库的类型可用monacoTypesAdditionalPackages反方向可用monacoTypesIgnorePackages排除大体积包从而加快编辑器启动。演示功能开关Features--- drawings: enabled: true # 是否启用绘图模式 persist: false # 是否把绘图保存到磁盘 presenterOnly: false # 是否仅允许演讲者视图绘图 syncAll: true # 是否在多实例间同步绘图 record: dev # 是否启用录制 selectable: true # 幻灯片文字是否可选中 contextMenu: true # 是否显示右键菜单 wakeLock: true # 是否阻止屏幕休眠 ---drawings选项组的精确类型定义见 packages/types/src/frontmatter.tsenabled默认true也接受dev | build字符串以限定环境。persist默认false设为true会把绘图保存到.slidev/drawings目录也可以直接传一个字符串来指定保存目录。presenterOnly默认falsetrue时只有演讲者端可以画。syncAll默认true跨浏览器/手机等所有实例同步绘图内容配合演示远程控制使用参见 docs/features/drawing.md。其余功能开关record演示录制默认dev。详细用法见 docs/features/recording.md。selectable默认true控制正文是否可被鼠标选中。contextMenu默认true控制幻灯片右键快捷菜单也支持dev | build环境限定。wakeLock开启后浏览器会请求 Wake Lock防止放映时屏幕休眠默认false类型定义注释中该键无显式默认值时由引擎启用在长时间放映场景强烈建议打开。导出与构建Export Build--- download: false # 构建产物中是否显示 PDF 下载按钮 exportFilename: slides # 导出文件的主文件名扩展名会自动追加 export: format: pdf # 导出格式 timeout: 30000 # 渲染超时毫秒 withClicks: false # 是否把每次点击展开为独立页 withToc: false # 是否生成带书签目录的 PDF ---download默认false。设为true会在构建出的 SPA 中显示下载按钮由于它也接受字符串可以直接指向你自行生成的 PDF 地址。完整导出工作流见 skills/slidev/references/core-exporting.md 与 docs/guide/exporting.md。exportFilename自定义导出文件名默认空此时以slides之类的默认名导出扩展名如.pdf会被自动追加。export嵌套对象format可为pdf/pptx/png/mdtimeout用于渲染较慢的页面withClicks、withToc分别对应 CLI 中--with-clicks与--with-toc的声明式等价物。标题信息与内置信息页Info SEO--- title: My Presentation titleTemplate: %s - Slidev author: Your Name keywords: slidev, presentation info: | ## About Presentation description ---title幻灯片标题用于浏览器标签、导出 PDF 元数据等。titleTemplate标题组合模板其中%s会被替换为实际标题默认%s - Slidev。在 packages/slidev/node/commands/shared.ts 中有直接体现const slideTitle data.config.titleTemplate.replace(%s, title)想完全自定义标题格式例如去掉 “- Slidev” 后缀把该键改为%s即可。author、keywords作者与关键词用于文档元数据。info一个可包含 Markdown 的字符串会显示在构建后 SPA 的信息弹窗中。从 packages/slidev/node/virtual/configs.ts 可知该字段在生成虚拟配置模块时会经过一次 Markdown 渲染if (isString(config.info)) config.info sharedMd.render(config.info)SEO 元标签SEO Meta Tags--- seoMeta: ogTitle: Presentation Title ogDescription: Description ogImage: https://example.com/og.png ogUrl: https://example.com twitterCard: summary_large_image twitterTitle: Title twitterDescription: Description twitterImage: https://example.com/twitter.png ---seoMeta的类型定义位于 packages/types/src/frontmatter.ts覆盖 Open Graph 与 Twitter Card 两套协议OG 类ogTitle、ogDescription、ogImage、ogUrl。Twitter 类twitterCard取值为summary | summary_large_image | app | player、twitterTitle、twitterDescription、twitterImage、twitterUrl以及卡片归属相关的twitterSite。适合把演讲发布为公开网页例如技术大会幻灯片站点时做链接分享预览。配合 Slidev 的自动 OG 封面生成可参考 docs/features/og-image.md 与 docs/features/seo-meta.md。扩展插件与主题Addons Themes--- theme: seriph addons: - excalidraw - slidev/plugin-notes ---theme同上文为主题包名。addonsSlidev 插件addon列表默认[]。每个元素是一个可安装的 npm 包名也支持 GitHub 等形式的仓库地址。内置能力之外的功能如手绘批注excalidraw、笔记插件slidev/plugin-notes都通过它挂载。Addon 的完整编写指南见 docs/guide/write-addon.md主题包结构见 docs/guide/theme-addon.md。主题自定义参数Theme Configuration--- themeConfig: primary: #5d8392 # 主题特有选项字段以主题文档为准 ---themeConfig是把配置交给主题消费的通道默认{}。其约定机制在类型注释中有明确说明这些配置会被注入为根级 CSS 变量形如--slidev-theme-key例如上面的primary会生成--slidev-theme-primary: #5d8392主题样式可用var(--slidev-theme-primary)消费。具体可用键完全取决于所选主题的文档不要凭空杜撰字段。可参考 packages/types/src/frontmatter.ts 的注释以及主题开发指南 docs/guide/write-theme.md。全局默认 FrontmatterDefaults为所有页面设置默认 frontmatter 是 Headmatter 最有价值的工程化能力之一--- defaults: layout: default transition: fade ---结合前文 loaders.ts 的getFrontmatter()可知defaults是合并链的最底层——任何单页 frontmatter 的同名键都会覆盖它。transition支持内置的fade、slide-left、slide-right、slide-up、slide-down、fade-out、view-transition等值完整枚举见 packages/types/src/frontmatter.ts也接受自定义过渡名或 VueTransitionGroup的 props 对象。典型用法把绝大多数页面都用到的layout: default、transition: fade、class、clicksStart等收拢到defaults再在个别页面覆盖--- defaults: layout: section transition: slide-left --- # 这一页用 section 布局 --- layout: cover transition: fade --- # 这一页单独覆盖为 cover此外defaults的变化被 loaders.ts 监听编辑后无需重启即会热更新生效。在多文件src导入场景下合并规则以主入口优先详见 docs/features/frontmatter-merging.md。HTML 根元素属性HTML Attributes--- htmlAttrs: dir: ltr lang: en ---htmlAttrs默认{}会原样写到构建产物html根元素上。最典型的用途是声明页面语言lang: zh-CN利于无障碍与 SEO设置文本方向dir: rtl用于阿拉伯语、希伯来语等从右往左书写的演示相关布局细节可参考 docs/features/direction-variant.md。它是Recordstring, string因此任何合法 HTML 属性如class、data-*都可填入。演讲者模式与浏览器Presenter Browser--- presenter: true # true | dev | build browserExporter: dev # true | dev | build routerMode: history # history | hash | memory ---presenter是否启用演讲者模式Presenter View默认true类型定义默认值为true同时支持环境限定。演讲者模式的能力可参考 [docs/guide/faq.md] 与仓库中的 packages/client/pages/presenter.vue。browserExporter是否开放浏览器端导出页面http://localhost:3030/export默认dev。routerModeVue Router 模式默认history。三种取值的取舍如下history页码反映在 URL 路径中hash哈希路由适合静态托管或子目录部署memory路由只在内存中URL 永不反映页码、无法用于导航适合信息亭kiosk或由外部驱动的“跟随屏”场景——相应地深链、/presenter、/overview与按 URL 导出等功能在此模式下不可用。从类型注释可见该字段还包含memory一值见 packages/types/src/frontmatter.ts这在子目录静态部署时尤其有用。远程资源与图表服务器Remote Assets--- remoteAssets: false # 是否把远程资源下载到本地 plantUmlServer: https://www.plantuml.com/plantuml ---remoteAssets默认false。设为true或dev / build时Slidev 会通过vite-plugin-remote-assets把 Markdown 与样式中引用的远程图片下载到本地保证离线可演示。建议在使用远程图片如 Unsplash、公司 CDN做正式对外交付前开启。相关文档见 docs/features/bundle-remote-assets.md。plantUmlServerPlantUML 渲染服务地址默认https://www.plantuml.com/plantuml。内网/私有化环境请替换为自建 PlantUML 服务器。PlantUML 用法见 docs/features/plantuml.md。完整配置模板Full Template将上述选项汇总一份接近生产可用的 Headmatter 如下--- theme: default title: Presentation Title author: Your Name highlighter: shiki lineNumbers: true transition: slide-left aspectRatio: 16/9 canvasWidth: 980 fonts: sans: Roboto mono: Fira Code drawings: enabled: true persist: true download: true ---编写建议与注意事项Headmatter 只出现在文件第一处---其后的---均用于分隔单页并承载每页 frontmatter不要把全局配置重复写进每页。善用defaults收敛重复全局相同的 layout、transition、class 都放进defaults页面级差异才写进每页 frontmatter二者优先级由 loaders.ts 中的展开顺序决定单页覆盖全局。环境限定写法record、monaco、presenter、contextMenu、browserExporter、remoteAssets等键都接受true/dev/build。想只在本地开发时启用如录制、内嵌编辑器、浏览器导出写dev即可避免污染最终构建产物。主题差异theme、themeConfig、fonts的行为受所选主题影响具体键值以主题的文档为准。字段以当前仓库为准本文默认值均整理自 packages/types/src/frontmatter.ts 的源码注释若你使用不同版本的 Slidev应以对应版本的类型定义为准相关的每页 frontmatterlayout、clicks、transition 等可继续阅读 skills/slidev/references/core-frontmatter.md 以及 docs/guide/syntax.md。至此你已经掌握了 Slidev Headmatter 的全部核心选项以及它们从 YAML 解析、虚拟模块生成到合并进每页渲染的底层链路完全可以据此编写一份风格统一、可离线导出、SEO 友好的演示文稿。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Slidev Headmatter 配置完全指南：整份幻灯片第一段 Frontmatter 的全部选项与源码剖析
Slidev Headmatter 配置完全指南整份幻灯片第一段 Frontmatter 的全部选项与源码剖析【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidevHeadmatter 是 Slidev 幻灯片文件slides.md开头第一个---之间的 YAML 块它承载着**整份演示文稿级deck-wide**的全局配置例如主题、字体、色彩模式、绘图、导出与 SEO 等。本文以 skills/slidev/references/core-headmatter.md 为骨架逐组讲解 Headmatter 每个选项的取值、默认行为与适用场景并结合 packages/types/src/frontmatter.ts 中的类型定义与 packages/slidev/node/vite/loaders.ts 中的合并逻辑说明这些配置在 Slidev 引擎内部究竟如何被解析与使用帮助你写出可复制、可运行、结构清晰的演示文稿。什么是 Headmatter与每页 Frontmatter 有何区别在 Slidev 中术语需要先厘清Headmatter位于slides.md文件最开头的---YAML 块用于配置整个 Deck。它就是 Markdown 生态里通常所说的 frontmatter因此大多数 Markdown 编辑器和格式化工具都能原生识别它。Frontmatter每页位于某个---分隔的幻灯片内容之前的普通---YAML 块用于配置单张幻灯片例如layout、transition、clicks等。一个重要的语法限制是不能使用 YAML 代码块yaml充当整份 Deck 的 Headmatter只能使用---包围的内联 YAML 块。关于这一区分可参见 docs/features/block-frontmatter.md。Slidev 会把 Headmatter 与每页 frontmatter 区分存储并在运行时做合并。从源码看packages/slidev/node/vite/loaders.ts 中的getFrontmatter()函数清晰地展示了合并顺序function getFrontmatter(pageNo: number) { return { ...(data.headmatter?.defaults as object || {}), // ① Headmatter.defaults 全局默认 ...(data.slides[pageNo]?.frontmatter || {}), // ② 当前页自己的 frontmatter } }也就是说每页 frontmatter 永远覆盖 Headmatter 中defaults提供的同名键这为「先定全局、再按页覆盖」的工程化组织方式提供了底层保证。同时loaders.ts 会监听data.headmatter.defaults的变化并触发热更新意味着你修改全局默认值时开发服务器会自动刷新。主题与外观Theme Appearance--- theme: default # 主题包名或本地主题路径 colorSchema: auto # auto | light | dark源码中还支持 all favicon: /favicon.ico # Favicon URL aspectRatio: 16/9 # 幻灯片宽高比 canvasWidth: 980 # 画布宽度像素 ---各选项说明类型与默认值依据 packages/types/src/frontmatter.ts 中的HeadmatterConfigtheme主题包名如default、seriph也可以填本地主题路径。默认值为default。自定义主题的编写可参考 docs/guide/write-theme.md使用与清单可参考 skills/slidev/references/core-frontmatter.md 等配套参考。colorSchema色彩模式。源码中定义为dark | light | all | auto默认auto跟随系统。all表示同时构建深浅两套并在页面上提供切换常配合LightOrDark组件使用。favicon应用图标 URL默认指向 Slidev 自带的 favicon 资源。aspectRatio宽高比写法既可以是16/9这样的字符串也可以是1:1甚至是数值。默认16/9。canvasWidthSlidev 的逻辑画布宽度单位 px。无论屏幕多大内容都按这个宽度排版后再等比缩放因此控制画布宽度可以直接影响“一页能容纳多少内容”的密度感。默认980。字体配置Fonts--- fonts: sans: Roboto # 无衬线字体正文默认 serif: Roboto Slab # 衬线字体 mono: Fira Code # 等宽字体代码等 provider: google # google | none | coollabs ---FontOptions的完整定义位于 packages/types/src/frontmatter.ts除上面四个字段外还支持sans/serif/mono/custom均接受单个字符串或字符串数组数组用于指定多字体回退列表custom用来加载仅供自定义 CSS 使用的 Web 字体默认不作用于任何元素。provider字体提供商默认google通过 Google Fonts 加载可选none完全不加载网络字体适合离线演示或使用本地字体以及coollabs。weights字体字重默认[200, 400, 600]只加载用到的字重能显著降低首屏体积。italic是否额外引入斜体字重默认false。local声明哪些字体来自本地从而在生成 webfonts 时被排除。fallbacks是否自动添加系统字体回退栈默认true。需要给一套风格化字体时可用sans: [Roboto, Open Sans]这样的数组形式若你的环境无法访问 Google Fonts如内网 / CI将provider设为none并把字体安装到本地即可。代码与高亮Code Highlighting--- highlighter: shiki # 代码高亮器当前版本为 shiki lineNumbers: false # 代码块是否显示行号 monaco: true # 是否启用 Monaco 编辑器true | dev | build twoslash: true # 是否启用 TwoSlash 类型提示 monacoTypesSource: local # local | cdn | none ---highlighterSlidev 的代码高亮引擎源码类型中固定为shiki默认即shiki。相关高级配置见 docs/custom/config-highlighter.md。lineNumbers代码块是否显示行号默认false。逐行高亮与行号范围语法见 docs/features/code-block-line-numbers.md。monaco是否启用内置 Monaco 编辑器。接受布尔值也可用dev/build限定只在开发或构建环境启用下文的record、presenter等同理。默认true。详见 docs/features/monaco-editor.md。twoslash是否启用 TypeScript TwoSlash 悬停类型信息默认true类型定义注释为默认true参考 skills/slidev/references/code-twoslash.md。monacoTypesSourceMonaco 类型来源local表示从本地node_modules加载默认cdn通过typescript/ata从 CDN 拉取none关闭类型加载。若要补齐第三方库的类型可用monacoTypesAdditionalPackages反方向可用monacoTypesIgnorePackages排除大体积包从而加快编辑器启动。演示功能开关Features--- drawings: enabled: true # 是否启用绘图模式 persist: false # 是否把绘图保存到磁盘 presenterOnly: false # 是否仅允许演讲者视图绘图 syncAll: true # 是否在多实例间同步绘图 record: dev # 是否启用录制 selectable: true # 幻灯片文字是否可选中 contextMenu: true # 是否显示右键菜单 wakeLock: true # 是否阻止屏幕休眠 ---drawings选项组的精确类型定义见 packages/types/src/frontmatter.tsenabled默认true也接受dev | build字符串以限定环境。persist默认false设为true会把绘图保存到.slidev/drawings目录也可以直接传一个字符串来指定保存目录。presenterOnly默认falsetrue时只有演讲者端可以画。syncAll默认true跨浏览器/手机等所有实例同步绘图内容配合演示远程控制使用参见 docs/features/drawing.md。其余功能开关record演示录制默认dev。详细用法见 docs/features/recording.md。selectable默认true控制正文是否可被鼠标选中。contextMenu默认true控制幻灯片右键快捷菜单也支持dev | build环境限定。wakeLock开启后浏览器会请求 Wake Lock防止放映时屏幕休眠默认false类型定义注释中该键无显式默认值时由引擎启用在长时间放映场景强烈建议打开。导出与构建Export Build--- download: false # 构建产物中是否显示 PDF 下载按钮 exportFilename: slides # 导出文件的主文件名扩展名会自动追加 export: format: pdf # 导出格式 timeout: 30000 # 渲染超时毫秒 withClicks: false # 是否把每次点击展开为独立页 withToc: false # 是否生成带书签目录的 PDF ---download默认false。设为true会在构建出的 SPA 中显示下载按钮由于它也接受字符串可以直接指向你自行生成的 PDF 地址。完整导出工作流见 skills/slidev/references/core-exporting.md 与 docs/guide/exporting.md。exportFilename自定义导出文件名默认空此时以slides之类的默认名导出扩展名如.pdf会被自动追加。export嵌套对象format可为pdf/pptx/png/mdtimeout用于渲染较慢的页面withClicks、withToc分别对应 CLI 中--with-clicks与--with-toc的声明式等价物。标题信息与内置信息页Info SEO--- title: My Presentation titleTemplate: %s - Slidev author: Your Name keywords: slidev, presentation info: | ## About Presentation description ---title幻灯片标题用于浏览器标签、导出 PDF 元数据等。titleTemplate标题组合模板其中%s会被替换为实际标题默认%s - Slidev。在 packages/slidev/node/commands/shared.ts 中有直接体现const slideTitle data.config.titleTemplate.replace(%s, title)想完全自定义标题格式例如去掉 “- Slidev” 后缀把该键改为%s即可。author、keywords作者与关键词用于文档元数据。info一个可包含 Markdown 的字符串会显示在构建后 SPA 的信息弹窗中。从 packages/slidev/node/virtual/configs.ts 可知该字段在生成虚拟配置模块时会经过一次 Markdown 渲染if (isString(config.info)) config.info sharedMd.render(config.info)SEO 元标签SEO Meta Tags--- seoMeta: ogTitle: Presentation Title ogDescription: Description ogImage: https://example.com/og.png ogUrl: https://example.com twitterCard: summary_large_image twitterTitle: Title twitterDescription: Description twitterImage: https://example.com/twitter.png ---seoMeta的类型定义位于 packages/types/src/frontmatter.ts覆盖 Open Graph 与 Twitter Card 两套协议OG 类ogTitle、ogDescription、ogImage、ogUrl。Twitter 类twitterCard取值为summary | summary_large_image | app | player、twitterTitle、twitterDescription、twitterImage、twitterUrl以及卡片归属相关的twitterSite。适合把演讲发布为公开网页例如技术大会幻灯片站点时做链接分享预览。配合 Slidev 的自动 OG 封面生成可参考 docs/features/og-image.md 与 docs/features/seo-meta.md。扩展插件与主题Addons Themes--- theme: seriph addons: - excalidraw - slidev/plugin-notes ---theme同上文为主题包名。addonsSlidev 插件addon列表默认[]。每个元素是一个可安装的 npm 包名也支持 GitHub 等形式的仓库地址。内置能力之外的功能如手绘批注excalidraw、笔记插件slidev/plugin-notes都通过它挂载。Addon 的完整编写指南见 docs/guide/write-addon.md主题包结构见 docs/guide/theme-addon.md。主题自定义参数Theme Configuration--- themeConfig: primary: #5d8392 # 主题特有选项字段以主题文档为准 ---themeConfig是把配置交给主题消费的通道默认{}。其约定机制在类型注释中有明确说明这些配置会被注入为根级 CSS 变量形如--slidev-theme-key例如上面的primary会生成--slidev-theme-primary: #5d8392主题样式可用var(--slidev-theme-primary)消费。具体可用键完全取决于所选主题的文档不要凭空杜撰字段。可参考 packages/types/src/frontmatter.ts 的注释以及主题开发指南 docs/guide/write-theme.md。全局默认 FrontmatterDefaults为所有页面设置默认 frontmatter 是 Headmatter 最有价值的工程化能力之一--- defaults: layout: default transition: fade ---结合前文 loaders.ts 的getFrontmatter()可知defaults是合并链的最底层——任何单页 frontmatter 的同名键都会覆盖它。transition支持内置的fade、slide-left、slide-right、slide-up、slide-down、fade-out、view-transition等值完整枚举见 packages/types/src/frontmatter.ts也接受自定义过渡名或 VueTransitionGroup的 props 对象。典型用法把绝大多数页面都用到的layout: default、transition: fade、class、clicksStart等收拢到defaults再在个别页面覆盖--- defaults: layout: section transition: slide-left --- # 这一页用 section 布局 --- layout: cover transition: fade --- # 这一页单独覆盖为 cover此外defaults的变化被 loaders.ts 监听编辑后无需重启即会热更新生效。在多文件src导入场景下合并规则以主入口优先详见 docs/features/frontmatter-merging.md。HTML 根元素属性HTML Attributes--- htmlAttrs: dir: ltr lang: en ---htmlAttrs默认{}会原样写到构建产物html根元素上。最典型的用途是声明页面语言lang: zh-CN利于无障碍与 SEO设置文本方向dir: rtl用于阿拉伯语、希伯来语等从右往左书写的演示相关布局细节可参考 docs/features/direction-variant.md。它是Recordstring, string因此任何合法 HTML 属性如class、data-*都可填入。演讲者模式与浏览器Presenter Browser--- presenter: true # true | dev | build browserExporter: dev # true | dev | build routerMode: history # history | hash | memory ---presenter是否启用演讲者模式Presenter View默认true类型定义默认值为true同时支持环境限定。演讲者模式的能力可参考 [docs/guide/faq.md] 与仓库中的 packages/client/pages/presenter.vue。browserExporter是否开放浏览器端导出页面http://localhost:3030/export默认dev。routerModeVue Router 模式默认history。三种取值的取舍如下history页码反映在 URL 路径中hash哈希路由适合静态托管或子目录部署memory路由只在内存中URL 永不反映页码、无法用于导航适合信息亭kiosk或由外部驱动的“跟随屏”场景——相应地深链、/presenter、/overview与按 URL 导出等功能在此模式下不可用。从类型注释可见该字段还包含memory一值见 packages/types/src/frontmatter.ts这在子目录静态部署时尤其有用。远程资源与图表服务器Remote Assets--- remoteAssets: false # 是否把远程资源下载到本地 plantUmlServer: https://www.plantuml.com/plantuml ---remoteAssets默认false。设为true或dev / build时Slidev 会通过vite-plugin-remote-assets把 Markdown 与样式中引用的远程图片下载到本地保证离线可演示。建议在使用远程图片如 Unsplash、公司 CDN做正式对外交付前开启。相关文档见 docs/features/bundle-remote-assets.md。plantUmlServerPlantUML 渲染服务地址默认https://www.plantuml.com/plantuml。内网/私有化环境请替换为自建 PlantUML 服务器。PlantUML 用法见 docs/features/plantuml.md。完整配置模板Full Template将上述选项汇总一份接近生产可用的 Headmatter 如下--- theme: default title: Presentation Title author: Your Name highlighter: shiki lineNumbers: true transition: slide-left aspectRatio: 16/9 canvasWidth: 980 fonts: sans: Roboto mono: Fira Code drawings: enabled: true persist: true download: true ---编写建议与注意事项Headmatter 只出现在文件第一处---其后的---均用于分隔单页并承载每页 frontmatter不要把全局配置重复写进每页。善用defaults收敛重复全局相同的 layout、transition、class 都放进defaults页面级差异才写进每页 frontmatter二者优先级由 loaders.ts 中的展开顺序决定单页覆盖全局。环境限定写法record、monaco、presenter、contextMenu、browserExporter、remoteAssets等键都接受true/dev/build。想只在本地开发时启用如录制、内嵌编辑器、浏览器导出写dev即可避免污染最终构建产物。主题差异theme、themeConfig、fonts的行为受所选主题影响具体键值以主题的文档为准。字段以当前仓库为准本文默认值均整理自 packages/types/src/frontmatter.ts 的源码注释若你使用不同版本的 Slidev应以对应版本的类型定义为准相关的每页 frontmatterlayout、clicks、transition 等可继续阅读 skills/slidev/references/core-frontmatter.md 以及 docs/guide/syntax.md。至此你已经掌握了 Slidev Headmatter 的全部核心选项以及它们从 YAML 解析、虚拟模块生成到合并进每页渲染的底层链路完全可以据此编写一份风格统一、可离线导出、SEO 友好的演示文稿。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考