Slidev 幻灯片导入Importing Slides用src拆分与复用多文件演示文稿【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev本指南聚焦 Slidev 的「幻灯片导入」能力通过slides.md头部的srcfrontmatter将演示文稿拆分为多个 Markdown 文件并支持按序号区间定向引入、多次复用同一文件以及多文件间 frontmatter 的合并优先级。读完你将掌握在 Slidev 中组织大型演示、抽取通用页面如目录、封面、结尾页并安全复用的完整写法同时了解slidev/parser在底层是如何解析、合并与保护这些导入的。为什么需要拆分幻灯片一份几十页的slides.md会随内容增长越来越难维护尤其是当多个演讲之间共享封面、目录TOC、章节分隔或收尾页时。Slidev 允许你用srcfrontmatter 把外部 Markdown 文件作为「幻灯片源」嵌入当前文稿实现逻辑拆解每部分内容各自成文件互不干扰复用不复制同一份toc.md可被多个演示引用定向引入只抽取外部文件的某几页而不是整份引入。主文档 importing-slides 文档 与技能参考 syntax-importing-slides 描述了完整语法下面逐步展开。基础导入srcfrontmatter在任意一页的分隔符---之间写入src字段并指向外部 Markdown 的相对路径即可!-- slides.md -- --- # Title This is a normal page --- src: ./pages/toc.md --- !-- Content here is ignored -- --- # Page 4 Another normal page对应的被导入文件./pages/toc.md!-- pages/toc.md -- # Table of Contents Part 1 --- # Table of Contents Part 2语法要点导入页自身的分隔符中只写src等 frontmatter该页写在分隔符后的正文内容会被忽略文档明确 Content here is ignored被导入文件保持原有的页分割规则---分隔每一页目标路径解析以当前引用文件所在目录为基准相对路径。仓库的 demo 包中已有一个实际可运行的多页拆分示例demo/starter/pages/imported-slides.md其由入口 demo/starter/slides.md 通过src引入是理解文件间引用关系的直观参考。底层解析逻辑在解析器实现 packages/parser/src/fs.ts 的loadSlide中可以看到src的完整处理链用slide.frontmatter.src.split(#)把路径与#范围分开若rawPath以/开头则相对用户根目录userRoot解析否则相对当前引用文件所在目录解析resolve(dirname(slide.filepath), rawPath)对解析后的文件递归调用loadMarkdown(path, rangeRaw, ...)把该文件解析出的若干页按顺序展开到当前文稿中。这意味着导入可以多层嵌套被导入文件内部还可以继续用src引入其他文件解析器会带着继承的 frontmatter 覆盖链逐层展开。只导入特定页#序号与区间在路径后追加#加范围字符串即可只抽取目标文件中的部分幻灯片范围中的编号是目标文件内部的原始页序从 1 开始--- src: ./another-presentation.md#2,5-7 ---这会导入./another-presentation.md中的第 2、5、6、7 页。从 packages/parser/src/utils.ts 的parseRangeString实现看支持的范围语法比文档示例更丰富逗号或分号分隔的列表1,3-5,8等价于页 1、3、4、5、8区间用连字符-两端都包含5-7→ 5、6、7起始数字前导0、超出总页数的值会被过滤掉最终索引去重后升序排列未带范围时等价于引入全部页。parseRangeString同时被src:幻灯片的#范围解析与导出命令的页范围选择复用相关边界问题的修正记录见 plans/009-parserangestring-bounds.md测试用例见 packages/parser/src/utils.test.ts其中保留了1,3-5,8 → [1, 3, 4, 5, 8]这一关键回归断言。复用同一文件多次同一外部文件可以在文稿中反复导入每次都会展开它的完整页或指定范围--- src: ./pages/toc.md --- !-- later... -- --- src: ./pages/toc.md ---典型场景是「开头放一遍目录、结尾再放一遍」——如 TOC 页在开场与收尾各出现一次而不需要维护两份拷贝。解析器每次遇到src都会重新展开因此同一内容可以出现在文稿的多个位置。frontmatter 合并与优先级src导入涉及 frontmatter 合并当入口页与被导入页定义了同名键时主入口外层引用页的值优先。以 frontmatter-merging 文档 的示例来说明入口slides.md声明了background被导入的cover.md也声明了background合并后的最终页面取外层slides.md的background而layout等外层未声明的键则保留被导入文件的设置!-- slides.md -- --- src: ./cover.md background: https://sli.dev/bar.png class: text-center --- !-- cover.md -- --- layout: cover background: https://sli.dev/foo.png --- # Cover Cover Page等效结果background以外层为准--- layout: cover background: https://sli.dev/bar.png class: text-center --- # Cover Cover Page源码中的合并顺序对照 fs.ts 的loadSlidefrontmatterOverride { ...slide.frontmatter, // 当前引用页外层的 frontmatter ...frontmatterOverride, // 更外层继承下来的覆盖 } delete frontmatterOverride.src随后在真正产出页面时执行{ ...slide.frontmatter, ...frontmatterOverride }。两层合并叠加后的效果是被导入页自身的 frontmatter 优先级最低直接引用它的外层页次之更外层入口的覆盖优先级最高同时src键会被删除避免递归时把引用路径错误地泄漏给被导入页。健壮性与安全机制src导入并不是简单的文本拼接slidev/parser在 packages/parser/src/fs.ts 中内置了多重防护值得了解循环导入检测若src最终解析回引用文件自身path slide.filepath或目标文件已出现在importChain祖先链中A 引 B、B 再引 A 的场景解析器会记录Circular import detected ...错误并跳过该页避免无限递归文件不存在保护目标文件不存在时记录Imported markdown file not found: ...错误而不是抛异常中断整个构建根目录越界保护当传入allowedRoots时解析到项目根目录之外的路径会以Imported markdown escapes the project root: ...拒绝加载即src无法通过..逃逸出根目录相关安全设计可参考计划 plans/018-server-side-remote-auth.md 的上下文文件级缓存每个被导入的 Markdown 只会被parse一次并缓存于markdownFiles同时按文件记录watchFiles便于开发服务器实现针对被引用子文件的 HMR 监听。错误信息会记录在该页所在的行上md.errors携带row与message便于编辑器与 CLI 精确定位问题。结合测试用例理解整体行为仓库在 packages/parser/src/core.ts 的parse/parseSync中完成了对单文件的页分割依据---分隔行而src的展开则由 packages/parser/src/fs.ts 的load统一驱动。针对这种多入口拆分test/fixtures/markdown/multi-entries.md 连同其 sub/ 目录下的page1.md、page2.md等夹具一起为 parser 的解析测试提供了「主入口 子文件」的真实输入样本相关断言维护在 test/parser.test.ts 中是验证导入行为的权威回归依据。小结Slidev 的幻灯片导入以一行srcfrontmatter 为核心把大型演示文稿的组织从「单文件堆叠」升级为「多文件组合」用src: ./xxx.md展开整个外部文件导入页自身内容自动忽略用src: ./xxx.md#2,5-7精准抽取部分页面范围支持列表、区间及开放写法同一文件可多次引用实现 TOC 等通用页面的「复用不复制」frontmatter 以「外层覆盖内层」的方式合并入口优先级最高解析器内置循环引用、文件缺失、越界加载等保护保证多文件协作的健壮性。在实际项目中你可以把「主入口 若干部分文件 共享 pages 目录」作为标准目录结构来组织演讲内容。关于多文件 frontmatter 的更细粒度合并规则可继续阅读 frontmatter-merging 与 核心语法指南。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Slidev 幻灯片导入（Importing Slides）：用 `src` 拆分与复用多文件演示文稿
Slidev 幻灯片导入Importing Slides用src拆分与复用多文件演示文稿【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev本指南聚焦 Slidev 的「幻灯片导入」能力通过slides.md头部的srcfrontmatter将演示文稿拆分为多个 Markdown 文件并支持按序号区间定向引入、多次复用同一文件以及多文件间 frontmatter 的合并优先级。读完你将掌握在 Slidev 中组织大型演示、抽取通用页面如目录、封面、结尾页并安全复用的完整写法同时了解slidev/parser在底层是如何解析、合并与保护这些导入的。为什么需要拆分幻灯片一份几十页的slides.md会随内容增长越来越难维护尤其是当多个演讲之间共享封面、目录TOC、章节分隔或收尾页时。Slidev 允许你用srcfrontmatter 把外部 Markdown 文件作为「幻灯片源」嵌入当前文稿实现逻辑拆解每部分内容各自成文件互不干扰复用不复制同一份toc.md可被多个演示引用定向引入只抽取外部文件的某几页而不是整份引入。主文档 importing-slides 文档 与技能参考 syntax-importing-slides 描述了完整语法下面逐步展开。基础导入srcfrontmatter在任意一页的分隔符---之间写入src字段并指向外部 Markdown 的相对路径即可!-- slides.md -- --- # Title This is a normal page --- src: ./pages/toc.md --- !-- Content here is ignored -- --- # Page 4 Another normal page对应的被导入文件./pages/toc.md!-- pages/toc.md -- # Table of Contents Part 1 --- # Table of Contents Part 2语法要点导入页自身的分隔符中只写src等 frontmatter该页写在分隔符后的正文内容会被忽略文档明确 Content here is ignored被导入文件保持原有的页分割规则---分隔每一页目标路径解析以当前引用文件所在目录为基准相对路径。仓库的 demo 包中已有一个实际可运行的多页拆分示例demo/starter/pages/imported-slides.md其由入口 demo/starter/slides.md 通过src引入是理解文件间引用关系的直观参考。底层解析逻辑在解析器实现 packages/parser/src/fs.ts 的loadSlide中可以看到src的完整处理链用slide.frontmatter.src.split(#)把路径与#范围分开若rawPath以/开头则相对用户根目录userRoot解析否则相对当前引用文件所在目录解析resolve(dirname(slide.filepath), rawPath)对解析后的文件递归调用loadMarkdown(path, rangeRaw, ...)把该文件解析出的若干页按顺序展开到当前文稿中。这意味着导入可以多层嵌套被导入文件内部还可以继续用src引入其他文件解析器会带着继承的 frontmatter 覆盖链逐层展开。只导入特定页#序号与区间在路径后追加#加范围字符串即可只抽取目标文件中的部分幻灯片范围中的编号是目标文件内部的原始页序从 1 开始--- src: ./another-presentation.md#2,5-7 ---这会导入./another-presentation.md中的第 2、5、6、7 页。从 packages/parser/src/utils.ts 的parseRangeString实现看支持的范围语法比文档示例更丰富逗号或分号分隔的列表1,3-5,8等价于页 1、3、4、5、8区间用连字符-两端都包含5-7→ 5、6、7起始数字前导0、超出总页数的值会被过滤掉最终索引去重后升序排列未带范围时等价于引入全部页。parseRangeString同时被src:幻灯片的#范围解析与导出命令的页范围选择复用相关边界问题的修正记录见 plans/009-parserangestring-bounds.md测试用例见 packages/parser/src/utils.test.ts其中保留了1,3-5,8 → [1, 3, 4, 5, 8]这一关键回归断言。复用同一文件多次同一外部文件可以在文稿中反复导入每次都会展开它的完整页或指定范围--- src: ./pages/toc.md --- !-- later... -- --- src: ./pages/toc.md ---典型场景是「开头放一遍目录、结尾再放一遍」——如 TOC 页在开场与收尾各出现一次而不需要维护两份拷贝。解析器每次遇到src都会重新展开因此同一内容可以出现在文稿的多个位置。frontmatter 合并与优先级src导入涉及 frontmatter 合并当入口页与被导入页定义了同名键时主入口外层引用页的值优先。以 frontmatter-merging 文档 的示例来说明入口slides.md声明了background被导入的cover.md也声明了background合并后的最终页面取外层slides.md的background而layout等外层未声明的键则保留被导入文件的设置!-- slides.md -- --- src: ./cover.md background: https://sli.dev/bar.png class: text-center --- !-- cover.md -- --- layout: cover background: https://sli.dev/foo.png --- # Cover Cover Page等效结果background以外层为准--- layout: cover background: https://sli.dev/bar.png class: text-center --- # Cover Cover Page源码中的合并顺序对照 fs.ts 的loadSlidefrontmatterOverride { ...slide.frontmatter, // 当前引用页外层的 frontmatter ...frontmatterOverride, // 更外层继承下来的覆盖 } delete frontmatterOverride.src随后在真正产出页面时执行{ ...slide.frontmatter, ...frontmatterOverride }。两层合并叠加后的效果是被导入页自身的 frontmatter 优先级最低直接引用它的外层页次之更外层入口的覆盖优先级最高同时src键会被删除避免递归时把引用路径错误地泄漏给被导入页。健壮性与安全机制src导入并不是简单的文本拼接slidev/parser在 packages/parser/src/fs.ts 中内置了多重防护值得了解循环导入检测若src最终解析回引用文件自身path slide.filepath或目标文件已出现在importChain祖先链中A 引 B、B 再引 A 的场景解析器会记录Circular import detected ...错误并跳过该页避免无限递归文件不存在保护目标文件不存在时记录Imported markdown file not found: ...错误而不是抛异常中断整个构建根目录越界保护当传入allowedRoots时解析到项目根目录之外的路径会以Imported markdown escapes the project root: ...拒绝加载即src无法通过..逃逸出根目录相关安全设计可参考计划 plans/018-server-side-remote-auth.md 的上下文文件级缓存每个被导入的 Markdown 只会被parse一次并缓存于markdownFiles同时按文件记录watchFiles便于开发服务器实现针对被引用子文件的 HMR 监听。错误信息会记录在该页所在的行上md.errors携带row与message便于编辑器与 CLI 精确定位问题。结合测试用例理解整体行为仓库在 packages/parser/src/core.ts 的parse/parseSync中完成了对单文件的页分割依据---分隔行而src的展开则由 packages/parser/src/fs.ts 的load统一驱动。针对这种多入口拆分test/fixtures/markdown/multi-entries.md 连同其 sub/ 目录下的page1.md、page2.md等夹具一起为 parser 的解析测试提供了「主入口 子文件」的真实输入样本相关断言维护在 test/parser.test.ts 中是验证导入行为的权威回归依据。小结Slidev 的幻灯片导入以一行srcfrontmatter 为核心把大型演示文稿的组织从「单文件堆叠」升级为「多文件组合」用src: ./xxx.md展开整个外部文件导入页自身内容自动忽略用src: ./xxx.md#2,5-7精准抽取部分页面范围支持列表、区间及开放写法同一文件可多次引用实现 TOC 等通用页面的「复用不复制」frontmatter 以「外层覆盖内层」的方式合并入口优先级最高解析器内置循环引用、文件缺失、越界加载等保护保证多文件协作的健壮性。在实际项目中你可以把「主入口 若干部分文件 共享 pages 目录」作为标准目录结构来组织演讲内容。关于多文件 frontmatter 的更细粒度合并规则可继续阅读 frontmatter-merging 与 核心语法指南。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
