Slidev 起步模板逐页解析读懂 template.md就掌握了开发者幻灯片的全部核心玩法【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev打开任何一个由 Slidev 初始化的新项目你看到的第一个slides.md正是本仓库 packages/slidev/template.md 这份自演示型起步模板。它把 Markdown、Vue 组件、动画、公式、图表、主题切换等能力浓缩成一页页可运行的示例是学习 Slidev 语法最快的入口。本文将以该模板为骨架逐页拆解它演示的每一项能力并结合仓库源码说明其底层机制与配置参数让你读完既能看懂模板也能自由改造成自己的演示文稿。template.md 从何而来新建 slides.md 的幕后逻辑这个文件并非普通的静态文档而是被打包进slidev/cli发布物、会在你新建幻灯片时被自动复制的模板源。在 packages/slidev/node/resolver.ts 的resolveEntry中可以看到完整链路当你执行slidev [entry]例如slidev slides.md而目标文件不存在时CLI 会先检查是否为 TTY 环境若是则弹出确认Entry file slides.md does not exist, do you want to create it?确认后调用copyFile(resolve(cliRoot, template.md), entry)把模板内容写入入口文件。因此这份template.md会原样出现在每个通过npm init slidev或npx slidev/cli slides.md创建的项目中packages/slidev/package.json 的files字段也明确包含了template.md。理解了这一点下面的逐页拆解就有了现实坐标模板里的每一段 YAML、每一个代码块都是 Slidev 官方认可的规范用法。第一屏 frontmatter一份全局配置样板模板开头是一段完整的 YAML frontmatter几乎覆盖了页面级配置中最高频的字段--- # try also default to start simple theme: seriph # random image from a curated Unsplash collection by Anthony # like them? see https://unsplash.com/collections/94734566/slidev background: https://cover.sli.dev # apply any unocss classes to the current slide class: text-center # some information about the slides, markdown enabled info: | ## Slidev Starter Template Presentation slides for developers. Learn more at [Sli.dev](https://sli.dev) transition: slide-left title: Welcome to Slidev comark: true ---各字段的作用与取值要点如下theme整套幻灯片的主题包名官方内置了none、default、seriph、apple-basic、shibainu、bricks等缩写映射。在 packages/slidev/node/integrations/themes.ts 中可以看到seriph实际对应 npm 包slidev/theme-seriphdefault对应slidev/theme-default。当主题未安装时CLI 会提示是否自动安装getThemeMeta还会读取主题package.json中的engines.slidev做版本兼容校验见 packages/slidev/node/integrations/themes.ts。background当前页此例为全局默认的远程背景图地址。Slidev 内置vite-plugin-remote-assets插件配合remoteAssets: true可在构建期把这类远程资源下载到本地保证离线可展示可参考 packages/slidev/vite/remoteAssets.ts 的实现。class为当前幻灯片容器注入的 UnoCSS 原子类text-center让整页文字居中。info构建为可托管 SPA 时展示在信息弹层中的文字支持 Markdown 语法。transition页面切换动画内置fade、fade-out、slide-up、slide-down、slide-left、slide-right、view-transition等值也可传任意字符串或 VueTransitionGroup配置对象类型定义见 packages/types/src/frontmatter.ts。title整套幻灯片的文档标题默认结合titleTemplate默认%s - Slidev拼接页面标题。comark是否启用 Comark 语法增强slidev/parser的新一代 MDC 式语法默认false此处显式开启。旧的mdc选项已标记为废弃统一使用comark见 packages/types/src/frontmatter.ts。frontmatter 具有继承与覆盖规则文件开头的 frontmatter 作用于全部页面而后续每个---分隔的页面块可以独立声明自己的 frontmatter如模板后续的layout: default、class: px-20、preload: false后者会覆盖全局同名配置。整套可配置项的完整类型清单与默认值都定义在 packages/types/src/frontmatter.ts 中是查询某个配置是否支持、默认值是什么的第一手资料。封面页Markdown 里的 Vue 交互与导航钩子模板的第一张幻灯片展示了Markdown 中直接写 Vue 模板的威力# Welcome to Slidev Presentation slides for developers div classpt-12 span click$slidev.nav.next classpx-2 py-1 rounded cursor-pointer flex~ justify-center items-center gap-2 hoverbg-white bg-opacity-10 Press Space for next page div classi-carbon:arrow-right inline-block/ /span /div div classabs-br m-6 flex gap-2 button click$slidev.nav.openInEditor() titleOpen in Editor classtext-xl slidev-icon-btn opacity-50 !border-none !hover:text-white div classi-carbon:edit / /button a hrefhttps://github.com/slidevjs/slidev target_blank altGitHub titleOpen in GitHub classtext-xl slidev-icon-btn opacity-50 !border-none !hover:text-white carbon-logo-github / /a /div要点拆解$slidev.navSlidev 暴露的全局导航对象$slidev.nav.next()/$slidev.nav.prev()用于程序化翻页$slidev.nav.openInEditor()会唤起 VSCode 扩展并跳转到当前页源码。这个对象在整个演示环境中都可访问页面模板、布局、组件均可引用其实现位于 packages/client/composables/useNav.ts。UnoCSS 原子类直接可用pt-12、px-2、rounded、cursor-pointer、opacity-50、!border-none!前缀强制覆盖、m-6、flex~ justify-center items-center gap-2属性化写法都是 UnoCSS 语法图标则通过i-carbon:xxx前缀按需引入 Carbon 图标集。这些能力来自内置的 UnoCSS 引擎模板中的 class 均在此引擎与主题样式基础上生效。HTML 语义任意 HTML 元素在 Markdown 中均合法Slidev 底层将整页内容交给 Vue 编译因此click、v-click等指令和组件都能正常工作。页面备注每页末尾的注释块就是演讲者笔记封面页底部有一个 HTML 注释块!-- The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes) --每一张幻灯片末尾的最后一个注释块会被解析为演讲者备注Presenter Notes而非被丢弃。它支持完整的 Markdown 语法与 HTML模板后续一页还演示了**bold**、*italic*、~~strike~~、div classflex等写法在演讲者模式Presenter Mode下可见、可实时编辑也可在导出 PDF 时作为备注输出。嵌入式样式把style写进页面紧接着的What is Slidev?页面演示了另一重要能力——在当前 Markdown 中直接书写style标签# What is Slidev? Slidev is a slide maker and accompanying presentation tool designed for developers. It consists of the following features: - **Text-based** - focus on the content with Markdown, and apply styles later - **Themable** - themes can be shared and used as npm packages - ‍ **Developer Friendly** - code highlighting, live coding with autocompletion - **Interactive** - embedding Vue components to enhance your slides - **Recording** - built-in recording and camera view - **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA - **Hackable** - virtually anything thats possible on a webpage is possible in Slidev style h1 { background-color: #2B90B6; background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } /style这段样式把h1标题做成蓝绿渐变文字同时演示了两个规则页面级style写在某个---分隔页内的style只影响当前页会被自动 scoped不会泄漏到其他幻灯片整个文档默认高亮器为 Shikihighlighter: shiki这里的 CSS 由vueuse/head与组件样式机制协作注入。七条特性清单本身就是 Slidev 的定位总结文本优先Markdown 聚焦内容、npm 包化主题、代码高亮与带自动补全的实时编码、可嵌入 Vue 组件、内置录屏与摄像头视图、可导出 PDF/PPTX/PNG 或可托管 SPA、几乎一切网页能力都可在此实现。演示文稿与真实前端工程之间没有能力鸿沟。目录页内置Toc组件模板用一页展示目录组件注意这里把用法演示和真实运行结果放在同一页# Table of contents html Toc minDepth1 maxDepth1/TocToc 是 [packages/client/builtin/Toc.vue](https://link.gitcode.com/i/da20a30a224ba0c3bd24ba816300da17) 提供的内置组件可根据每页标题自动生成可点击目录。minDepth / maxDepth 控制收录的标题层级例如 maxDepth1 只收一级标题minDepth1 maxDepth1 则仅展示一级标题。模板中代码块里展示的是如何写代码块下方直接渲染出实际目录一页完成教学。 ## 导航与键盘快捷键演示者的肌肉记忆 模板用一个两栏页面整理了最常用的快捷键表格同时起到了信息组织与排版演示的双重作用 | 按键 | 功能 | | --- | --- | | kbdright/kbd / kbdspace/kbd | 进入下一个动画或下一页 | | kbdleft/kbd / kbdshift/kbdkbdspace/kbd | 回到上一个动画或上一页 | | kbdup/kbd | 上一页 | | kbddown/kbd | 下一页 | 配套说明是**悬停页面左下角会出现导航控制面板**。这套控制面板由 [packages/client/internals/NavControls.vue](https://link.gitcode.com/i/07b4b8d5549aeb42828b064293fc64dd) 等内部组件实现左侧还包含上一/下一页、前进到 click 阶段、概览、演示者模式等按钮全局快捷键注册集中在 [packages/client/logic/shortcuts.ts](https://link.gitcode.com/i/ba2b86e4c29f5a5785d535f614e6210f) 中例如方向键、空格、f 全屏、o 概览等可在 frontmatter 里通过 shortcuts 覆盖或关闭。 该页还在底部放了两张利用点击指令出现的装饰元素左下角的引导箭头 一行 Here! 文字用来演示下一节要讲的**点击动画**说明动画可与页面排版自由叠加。 ## 点击驱动动画v-click / v-after / 内置 Arrow 模板用图片按 click 分步出现的方式演示最常用的点击指令 md img v-click classabsolute -bottom-9 -left-7 w-80 opacity-50 srchttps://sli.dev/assets/arrow-bottom-left.svg alt / p v-after classabsolute bottom-23 left-45 opacity-30 transform -rotate-10Here!/pv-click让元素在第一次点击后才出现模板以图片上直接写指令的方式使用也可写作v-click包裹组件。核心实现在 packages/client/modules/v-click.ts它通过resolveClick把指令值解析为start/end区间并记录到元素的slidevClicksStart/slidevClicksEnd数据集配合useClicks的当前 click 计数决定元素显示时机。v-after同模块中注册的配套指令见 packages/client/modules/v-click.ts语义为在所有前置 click 播放完毕之后再出现。同一套指令体系还包括v-click-hide出现后再隐藏、v-click.gap等变体VClicks/VAfter等还提供组件形式封装见 packages/client/builtin/VAfter.ts。按 slide 拆解 click点击次数是全局递增的Slidev 会为每个元素维护独立区间从而实现同一元素多次点击来回切换等进阶模式。若希望每次 click 各自作用于独立 slidefrontmatter 中可设置clicks: 2之类参数把一步拆成两步预览/导出的--with-clicks也会按 click 生成页面。代码块行级高亮 Twoslash 悬浮类型模板专门安排了一页展示代码块能力代码块标记中直接携带了高亮与类型检查配置// TwoSlash enables TypeScript hover information // and errors in markdown code blocks // More at https://shiki.style/packages/twoslash import { computed, ref } from vue const count ref(0) const doubled computed(() count.value * 2) doubled.value 2语法拆解花括号里的步骤序列{all|5|7|7-8|10|all}竖线分隔多个阶段随 click 逐步高亮对应行例如先全亮、再亮第 5 行、再亮第 7 行……最后all恢复全亮。这是配合点击动画的代码逐行讲解模式相关处理逻辑位于 packages/slidev/node/syntax/shiki.ts负责把 markdown 中的高亮标记转换成 Shiki 的lineOptions。高亮数字区域也可以是高亮 强调的组合5,7-8高亮、追加#强调。twoslash关键字启用 Twoslash 后代码块内的 TS 类型信息会变成可悬浮提示、类型错误会以红线标出。该能力由高亮管线注入对应 packages/slidev/node/setups/shiki.ts默认值可在 frontmatter 用twoslash: true | dev | build | false控制。页面内的小箭头代码块下方用arrow v-click[4, 5] ... /画了一条可随 click 出现的 SVG 指引箭头指向第 4、5 行区间。Arrow是 packages/client/builtin/Arrow.vue 提供的内置组件x1/y1/x2/y2定义起止点color、width、arrowSize控制外观很适合在代码讲解中做标注。注释掉的 /snippets/external.ts#snippetSlidev 支持用语法把外部文件按行区间嵌入代码块这里被注释掉以避免覆盖页面代码演示目录下的 demo/starter/snippets/external.ts 就是这类外部片段文件。同页还演示了页脚注[^1]、脚注分隔线的样式微调用style UnoCSS 的apply精简脚注样式把讲解代码页本身也做成了排版范例。Vue 组件即幻灯片元素内置组件与自定义组件Components 页用双栏布局UnoCSS 的grid~ cols-2 gap-4同时演示了内置组件与自定义组件Counter :count10 /Tweet id1390115482657726468 /自定义组件Counter :count10 mt-4 /对应项目./components/Counter.vue。Slidev 约定把自定义组件放进幻灯片目录旁的components/下即可被自动注册打包时由 packages/slidev/vite/components.ts 的自动导入机制扫描项目脚手架中 demo/starter/components/Counter.vue 就是典型实现。凡是一个 Vue 组件能做的事交互、props、事件、script setup在幻灯片里都能做。内置组件Tweet/、Youtube/、Toc/、Arrow/、Monaco/、Mermaid/、PlantUml/、SlidevVideo/、LightOrDark/等开箱即用源码集中在 packages/client/builtin 目录下。模板Tweet id1390115482657726468 scale0.65 /演示了直接嵌入推文scale控制缩放同一页面还展示了图片路径分组目录即组件解析的目录约定。主题体系一处 frontmatter 全局换肤Themes 页用一个双栏对比直观说明换主题只需改一行 YAML--- theme: default ------ theme: seriph ---主题能提供什么主题包可携带样式、布局layouts、组件甚至对工具链的配置如 Shiki 配置因此一次切换即可改变整套视觉与排版结构。官方内置主题的缩写映射见 packages/slidev/node/integrations/themes.tstheme: default对应slidev/theme-default、theme: seriph对应slidev/theme-seriph其他 npm 上的 Slidev 主题也可直接写包名。自定义主题的编写方法模板底部链接指向的 docs/guide/theme-addon.md 是主题与插件化扩展的完整指南仓库里packages/create-theme提供了npm create slidev/theme的脚手架其 template/example.md 与 layoutscover.vue/intro.vue展示了主题包的最小结构。页级覆盖换肤粒度可以细化到单页——在某个页面的 frontmatter 里声明layout: xxx即可使用主题提供的不同布局内置布局见 packages/client/layouts如cover、center、section、image-right、two-cols等模板后续页面也用到了layout: image-right与layout: center。动效v-motion入场动画 页内script setupAnimations 页是模板中代码密度最高的一页它完整演示了基于vueuse/motion的声明式动画以及页面级script setup的能力div v-motion :initial{ x: -80 } :enter{ x: 0 } Slidev /divscript setup langts const final { x: 0, y: 0, rotate: 0, scale: 1, transition: { type: spring, damping: 10, stiffness: 20, mass: 2 } } /scriptv-motion指令来自vueuse/motion。:initial声明初始状态如位移x: -80、透明度opacity: 0、旋转rotate、缩放scale:enter声明入场最终状态页面加载后自动从初始态过渡到入场态。transition里还可以写 spring 物理参数或delay/duration模板用一个final变量让三张 Logo 图片来自仓库 assets/logo-square.png、assets/logo-circle.png、assets/logo-triangle.png 同款素材以不同起点汇聚到中心。页内script setup langts模板允许每个---页面块内直接写script setup其中的变量/函数仅在当前页生效此页的final对象因此可被同一页的多个元素引用。这是单页局部逻辑的标准做法不会污染其他页。更完整的点击/过渡动画指南见 docs/guide/animations.md。数学公式LaTeX 开箱即用KaTeX 引擎LaTeX 页证明公式无需任何安装步骤Inline $\sqrt{3x-1}(1x)^2$ Block $$ {1|3|all} \begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} \frac{4\pi}{c}\vec{\mathbf{j}} ... \end{array} $$行内公式$...$渲染为行内数学块级公式$$...$$独占一段。点击分步显示{1|3|all}与代码高亮的阶段语法同构把公式按行分批在多次点击中逐段揭示——非常适合逐步讲解麦克斯韦方程组这类内容。引擎与扩展点默认由 KaTeX 渲染其初始化在 packages/slidev/node/setups/katex.ts如需自定义宏可在 frontmatter 通过katex: { macros: ... }配置。逐字语法、环境支持细节见 docs/features/latex.md。图表Mermaid 与 PlantUML 双引擎Diagrams 页展示了三类图表在同一个 Markdown 中的书写方式startuml ... enduml代码围栏语言即图表类型plantuml会在构建期被识别并转成对应图片组件。花括号内可写图表选项scale缩放、alt无障碍文本、theme如neutral等。Mermaid支持流程图、时序图、思维导图mindmap甚至可在节点上::icon(...)加图标等全部图型。底层封装在 packages/client/builtin/Mermaid.vue预处理器位于 packages/slidev/node/syntax/codeblock/mermaid.ts而内置渲染器与服务端渲染 Mermaid 图片两种模式在 packages/slidev/node/integrations 相关的mermaid-renderer中切换完整配置见 docs/features/mermaid.md。PlantUML适合架构图、时序图、用例图等默认渲染服务器为https://www.plantuml.com/plantuml可通过 frontmatterplantUmlServer改成自建服务器类型见 packages/types/src/frontmatter.ts。把模板变成自己的演示文稿常用命令工作流模板正文是一套可直接运行的完整演示但在实际使用中你会把每一页替换成自己的内容并搭配下面这些命令初始化项目npm init slidev会生成带slides.md的最小工程或在已有目录下执行npx slidev/cli slides.md由 CLI 从本文件生成入口走 packages/slidev/node/resolver.ts 的复制逻辑。仓库内 demo/starter 就是这样一个最小可运行示例含package.json、slides.md、vite.config.tsdemo/composable-vue 则是更复杂的组合式用法参考。启动开发服务器slidev [entry]等价于slidev dev默认监听 3030 端口并打开浏览器支持--port、--open、--remote等参数配合--remote开启远程访问与演示者模式认证详见 docs/builtin/cli.md。构建静态站点slidev build [entry]输出可托管到任意静态服务器的 SPA含演示者模式、概览页等完整功能部署说明见 docs/guide/hosting.md。导出为 PDF/图片/PPTXslidev export [entry]可用--output、--range 1,4-5,6、--with-clicks等控制输出范围与是否按 click 分页见 docs/guide/exporting.md。格式检查与 AI 协作slidev format [entry]借助 Prettier 格式化 Markdownslidev mcp启动 MCP 服务端允许 AI Agent 直接读取/修改幻灯片源码见 docs/features/mcp.md。小结template.md 是一份可运行的教学大纲纵观整份 packages/slidev/template.md它其实承担了双重角色对新手它是零成本入门的教学大纲——frontmatter 配置、页面备注、嵌入式样式、Toc、快捷键、点击指令、Twoslash 代码块、Vue 组件、主题、v-motion、KaTeX、Mermaid/PlantUML一张页面演示一个特性且全部真实可运行对老手它是语法速查表与脚手架基础可直接删改出正式幻灯片。其后的进阶路径在仓库中都能找到对应章节内置组件的完整清单与用法见 docs/builtin/components.md内置布局见 docs/builtin/layouts.mdMarkdown 语法总览见 docs/guide/syntax.md组件封装规范见 docs/guide/component.md。读懂这份模板你实际上就已经走完了用 Markdown 写出交互式演示文稿的完整入门闭环。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考