拓冰网站定制 
用 create-slidev-theme 搭建 Slidev 主题脚手架原理与模板源码深度解读【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev本指南聚焦 Slidev 官方主题生成器create-slidev-theme先介绍如何用npm init slidev-theme一键生成可运行的主题工程再深入仓库内 CLI 源码packages/create-theme/index.mjs与内置模板文件拆解脚手架的工作流程、包名校验逻辑、目标目录冲突处理以及生成主题的目录结构、布局组件、样式与代码高亮配置。读完你既能独立创建并发布一个 Slidev 主题也能理解这类“官方脚手架”通常如何被设计实现。一、什么是 create-slidev-themecreate-slidev-theme是 Slidev 仓库中packages/create-theme包对外发布的命令行工具对应 npm 包名为create-slidev-theme功能是从内置 starter 模板生成一套可发布的 Slidev 主题工程。它本身是一个type: module的纯 ESM Node.js 脚本见 packages/create-theme/package.json入口为index.mjs在bin字段声明命令名create-slidev-theme工程运行要求 Node.js20.12.0。它只依赖四个轻量库ansis终端 ANSI 颜色输出Logo 图标、成功提示等彩色渲染minimist解析命令行位置参数与选项pathe跨平台安全的路径工具prompts交互式提问主题名、空目录确认等。运行时依赖全部通过catalog:协议引用仓库pnpm-workspace.yaml中声明的统一版本见 packages/create-theme/package.json确保 monorepo 内版本一致。该工具也是“社区主题从零开始的官方入口”生成出来的工程结构、布局写法与样式组织方式是官方在 docs/guide/write-theme.md 之外提供的可直接运行的参考实现两者结合阅读是学习写主题的最佳路径。二、快速开始两种等价命令README 给出的用法非常精简本质是同一条命令的两种包管理器写法npm init slidev-theme # 或 yarn create slidev-theme两条命令最终都会下载并执行create-slidev-theme这个二进制。除 npm/yarn 外pnpm 用户同样可运行pnpm create slidev-theme。从 packages/create-theme/index.mjs 的init()入口看完整交互过程如下输出启动横幅控制台打印Slidev Theme Creator与版本号版本读取自脚手架自身package.json。确定目标目录若命令行第一个位置参数缺省argv._[0]则用prompts弹出文本输入框询问Theme name默认值为slidev-theme-starter。规范化包名无论用户输入什么都会进入getValidPackageName()见 packages/create-theme/index.mjs先取路径的 basename若不以slidev-theme-开头则自动补前缀slidev-theme-保证最终包名符合 Slidev 主题的 npm 命名约定。创建并校验目标目录目录不存在则直接mkdirSync(root, { recursive: true })递归创建目录已存在且非空时会打印黄色警告Target directory ... is not empty.并弹出确认框选择是则执行emptyDir()清空后继续否则直接终止退出。拷贝模板调用prepareTemplate()将packages/create-theme/template目录内容复制到目标目录拷贝细节见下节。包管理器探测通过环境变量npm_execpath与npm_config_user_agent正则匹配判断当前是pnpm、yarn还是npm。输出后续命令提示按探测结果提示进入目录后执行install与devyarn 为yarn dev其余为npm run dev。注意模板example.md的 frontmatter 中使用了theme: ./相对路径引用主题自身见 packages/create-theme/template/example.md因此脚手架执行后无需额外npm init步骤直接npm install即可拥有完整可用的本地主题预览环境。安装依赖后启动npm run dev即可进入example.md的演示幻灯片默认自动打开浏览器。三、模板写入逻辑占位符替换与命名约定prepareTemplate()见 packages/create-theme/index.mjs展示了脚手架生成文件的核心机制分为三类处理普通文件直接拷贝遍历模板目录除package.json、README.md外的所有文件原样复制若文件名命中renameFiles映射表见 packages/create-theme/index.mjs则重命名——即模板中的_gitignore复制为目标的.gitignore、_npmrc复制为.npmrc。之所以用下划线前缀是为了避免这些文件在发布到 npm 时被隐含忽略或产生歧义。package.json动态生成读取模板package.json后用目标包名覆盖其name字段并强制写入version: 0.0.0其余字段type: module、keywords、engines、scripts、slidev配置等原样继承最后序列化写出。这是“新主题从 0.0.0 起步、再通过npm version语义化发布”的通用约定。README.md做字符串模板替换将模板 README 中的{{package-name}}替换为完整包名如slidev-theme-mytheme将{{name}}替换为去前缀后的主题名由getThemeName()用正则/^slidev-theme-/剥离得到见 packages/create-theme/index.mjs用于theme: xxx的 frontmatter 声明。四、生成的主题工程长什么样脚手架产出即packages/create-theme/template的展开版。下面逐一说明每个部分的作用与写作时的改造入口。4.1 包描述文件与 Slidev 声明模板package.json见 packages/create-theme/template/package.json是理解“一个 Slidev 主题需要发布什么”的关键{ type: module, keywords: [slidev-theme, slidev], engines: { node: 20.12.0 }, scripts: { build: slidev build example.md, dev: slidev example.md --open, export: slidev export example.md, screenshot: slidev export example.md --format png }, dependencies: { slidev/types: ^52.19.1 }, devDependencies: { slidev/cli: ^52.19.1 }, slidev: { colorSchema: both, defaults: { fonts: { sans: Nunito Sans, mono: Fira Code } } } }几个关键点keywords必须包含slidev-theme这是官方主题目录/检索与 Slidev 自动补全识别主题包的重要标识dependencies仅声明类型包slidev/types运行时能力全部来自使用者的slidev/cli从而保持主题本身轻量slidev.colorSchema: both声明主题同时支持浅色/深色可选light/dark/bothslidev.defaults可注入默认 frontmatter 配置此处预置了fonts无衬线用 Nunito Sans、等宽用 Fira Code用户使用该主题时会自动获得这些字体设置除非在自身 frontmatter 中覆盖四个 npm scripts 围绕example.md构建dev本地预览、build产物构建、export导出 PDF、screenshot导出 PNG用于生成主题展示图。4.2 布局组件cover 与 intropackages/create-theme/template/layouts/下提供两个最小布局它们也是“写一个布局该长什么样”的标准示范。以cover.vue为例见 packages/create-theme/template/layouts/cover.vuescript setup langts import { handleBackground } from slidev/client import { computed } from vue const props defineProps({ background: { type: String, default: undefined }, }) const style computed(() handleBackground(props.background)) /script template div classslidev-layout cover :stylestyle div classmy-auto w-full slot / /div /div /template布局通过 props 接收 frontmatter 传入的属性此例为background图片 URL用官方导出的handleBackground()把背景字符串转换成 CSS 背景样式再整体垂直居中渲染默认插槽slot。intro.vue结构相同仅类名改为slidev-layout intro见 packages/create-theme/template/layouts/intro.vue。模板还保留空的components/目录供你添加可被幻灯片内!-- --语法直接引用的自定义组件。关于前端资源引用路径的一个细节差异cover.vue从slidev/client顶层导入handleBackground而intro.vue从slidev/client/layoutHelper子路径导入——两者最终都解析到同一布局辅助函数写作时二选一均可不必纠结差异。4.3 样式组织与主题变量模板把样式分成两层见 packages/create-theme/template/styles/index.ts显式 import 官方基础布局样式slidev/client/styles/layouts-base.css保证 default 等基础布局可用并注释提示“删除它即可获得完全的自定义”再 import 自己的layout.css做增量覆盖。layout.css见 packages/create-theme/template/styles/layout.css展示了两个核心惯例:root { /* default theme color */ /* can be overrided by uses themeConfig option */ --slidev-theme-primary: #5d8392; } .slidev-layout.cover, .slidev-layout.intro { apply h-full grid; h1 { apply text-6xl leading-20; } h1 p { apply -mt-2 opacity-50 mb-4; } p h2, ul h2, table h2 { apply mt-10; } }要点在:root声明 CSS 变量--slidev-theme-primary作为主题主色注释明确说明该变量可被使用方 frontmatter 的themeConfig覆盖是主题开放“可配置化”的标准做法类名以.slidev-layout.cover形式把样式挂到布局根节点上字号间距等直接使用 Tailwind/Windicss 风格的apply原子类因此模板中的样式天然跑在 UnoCSS 环境里构建、预览无需额外配置。4.4 代码高亮预设packages/create-theme/template/setup/shiki.ts通过官方暴露的defineShikiSetup配置 Shiki 主题集import type { ShikiSetupReturn } from slidev/types import { defineShikiSetup } from slidev/types export default defineShikiSetup((): ShikiSetupReturn { return { themes: { dark: vitesse-dark, light: vitesse-light }, } })setup/目录用于放置 Slidev 启动阶段的 hook 模块类似defineShikiSetup等这里按浅色/深色分别指定了vitesse-light与vitesse-dark两套内置高亮主题与前面colorSchema: both声明相呼应——启用深色模式时代码块会自动切换到深色高亮。4.5 演示幻灯片 example.mdexample.md见 packages/create-theme/template/example.md是主题的“说明书兼试衣间”。它的 frontmatter 用theme: ./指向主题自身目录因此开发期预览与用户使用时的解析路径一致其余页面依次演示了基本标题页、特性列表页、快捷键表格、layout: image-right 远程图片背景、代码高亮块、layout: center居中页等典型用法。它同时是你验收主题改动、导出主题宣传图npm run screenshot的样本输入。发布前建议改写这份文件让它真正代表你主题的风格与能力。4.6 发布前的 README 模板脚手架生成的 README 由 packages/create-theme/template/README.md 替换占位符而来其中有两类内容需要作者补充使用安装章节已在文案中给出标准安装姿势——用户在自身slides.mdfrontmatter 写入theme: 你的主题名启动 Slidev 时会被提示自动安装该主题包这与官方文档 docs/guide/theme-addon.md 中“use theme”的机制一致待办占位区## Layouts与## Components下方留了TODO:列表README首部注释也提醒作者补充该主题提供的布局/组件清单与效果截图、live demo 链接并指出更完整的主题写作规范见 docs/guide/write-theme.md。4.7 环境相关隐藏文件_gitignore → .gitignore忽略node_modules、dist、*.local、.remote-assets、.idea/、.vite-inspect、components.d.ts等本地开发与构建产物_npmrc → .npmrc写入shamefully-hoisttrue专门为 pnpm 用户保证依赖被提升shamefully hoist避免主题中深层依赖无法解析的问题——这是官方模板对“用户可能用 pnpm 开发该主题”的前置适配。五、从脚手架到正式主题后续操作建议结合模板工程与官方写作文档建议的推进路径是编辑packages/...目录内的layouts/、components/、styles/与setup/定义自己的视觉与行为期间用npm run dev实时预览example.md改layout.css中:root的主色变量与各布局排版逐步替换掉layouts-base.css提供的默认观感更新 README 的布局/组件清单用npm run screenshot生成主题预览 PNG 作为展示图调整slidev段的colorSchema与defaults等元信息在仓库根目录的 docs/guide/write-theme.md 指导下补齐主题发布细节如themeConfig的类型扩展与合并最终按npm publish语义化发布到 npm即可供任何用户在slides.md中theme: 包名一键使用。六、小结create-slidev-theme用一条npm init slidev-theme命令把“创建主题工程”所需的命名约束、npm 包结构、Slidev 元信息声明、最小布局/样式/高亮实现与演示幻灯片全部固化成了可复用的模板。理解它等于同时掌握了两个层面作为使用者你能在几分钟内得到一个可发布、可预览的主题骨架作为研究者packages/create-theme/index.mjs 中“prompts 交互 → 包名规范化 → 目录冲突确认 → 占位符替换拷贝 → 包管理器探测 → 引导提示”的流水线本身就是一套清晰、可迁移的 Node 脚手架范本值得在实现自己的代码生成器时参考复用。无法成文无法成文占位不应出现/无法成文【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 create-slidev-theme 搭建 Slidev 主题：脚手架原理与模板源码深度解读
用 create-slidev-theme 搭建 Slidev 主题脚手架原理与模板源码深度解读【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev本指南聚焦 Slidev 官方主题生成器create-slidev-theme先介绍如何用npm init slidev-theme一键生成可运行的主题工程再深入仓库内 CLI 源码packages/create-theme/index.mjs与内置模板文件拆解脚手架的工作流程、包名校验逻辑、目标目录冲突处理以及生成主题的目录结构、布局组件、样式与代码高亮配置。读完你既能独立创建并发布一个 Slidev 主题也能理解这类“官方脚手架”通常如何被设计实现。一、什么是 create-slidev-themecreate-slidev-theme是 Slidev 仓库中packages/create-theme包对外发布的命令行工具对应 npm 包名为create-slidev-theme功能是从内置 starter 模板生成一套可发布的 Slidev 主题工程。它本身是一个type: module的纯 ESM Node.js 脚本见 packages/create-theme/package.json入口为index.mjs在bin字段声明命令名create-slidev-theme工程运行要求 Node.js20.12.0。它只依赖四个轻量库ansis终端 ANSI 颜色输出Logo 图标、成功提示等彩色渲染minimist解析命令行位置参数与选项pathe跨平台安全的路径工具prompts交互式提问主题名、空目录确认等。运行时依赖全部通过catalog:协议引用仓库pnpm-workspace.yaml中声明的统一版本见 packages/create-theme/package.json确保 monorepo 内版本一致。该工具也是“社区主题从零开始的官方入口”生成出来的工程结构、布局写法与样式组织方式是官方在 docs/guide/write-theme.md 之外提供的可直接运行的参考实现两者结合阅读是学习写主题的最佳路径。二、快速开始两种等价命令README 给出的用法非常精简本质是同一条命令的两种包管理器写法npm init slidev-theme # 或 yarn create slidev-theme两条命令最终都会下载并执行create-slidev-theme这个二进制。除 npm/yarn 外pnpm 用户同样可运行pnpm create slidev-theme。从 packages/create-theme/index.mjs 的init()入口看完整交互过程如下输出启动横幅控制台打印Slidev Theme Creator与版本号版本读取自脚手架自身package.json。确定目标目录若命令行第一个位置参数缺省argv._[0]则用prompts弹出文本输入框询问Theme name默认值为slidev-theme-starter。规范化包名无论用户输入什么都会进入getValidPackageName()见 packages/create-theme/index.mjs先取路径的 basename若不以slidev-theme-开头则自动补前缀slidev-theme-保证最终包名符合 Slidev 主题的 npm 命名约定。创建并校验目标目录目录不存在则直接mkdirSync(root, { recursive: true })递归创建目录已存在且非空时会打印黄色警告Target directory ... is not empty.并弹出确认框选择是则执行emptyDir()清空后继续否则直接终止退出。拷贝模板调用prepareTemplate()将packages/create-theme/template目录内容复制到目标目录拷贝细节见下节。包管理器探测通过环境变量npm_execpath与npm_config_user_agent正则匹配判断当前是pnpm、yarn还是npm。输出后续命令提示按探测结果提示进入目录后执行install与devyarn 为yarn dev其余为npm run dev。注意模板example.md的 frontmatter 中使用了theme: ./相对路径引用主题自身见 packages/create-theme/template/example.md因此脚手架执行后无需额外npm init步骤直接npm install即可拥有完整可用的本地主题预览环境。安装依赖后启动npm run dev即可进入example.md的演示幻灯片默认自动打开浏览器。三、模板写入逻辑占位符替换与命名约定prepareTemplate()见 packages/create-theme/index.mjs展示了脚手架生成文件的核心机制分为三类处理普通文件直接拷贝遍历模板目录除package.json、README.md外的所有文件原样复制若文件名命中renameFiles映射表见 packages/create-theme/index.mjs则重命名——即模板中的_gitignore复制为目标的.gitignore、_npmrc复制为.npmrc。之所以用下划线前缀是为了避免这些文件在发布到 npm 时被隐含忽略或产生歧义。package.json动态生成读取模板package.json后用目标包名覆盖其name字段并强制写入version: 0.0.0其余字段type: module、keywords、engines、scripts、slidev配置等原样继承最后序列化写出。这是“新主题从 0.0.0 起步、再通过npm version语义化发布”的通用约定。README.md做字符串模板替换将模板 README 中的{{package-name}}替换为完整包名如slidev-theme-mytheme将{{name}}替换为去前缀后的主题名由getThemeName()用正则/^slidev-theme-/剥离得到见 packages/create-theme/index.mjs用于theme: xxx的 frontmatter 声明。四、生成的主题工程长什么样脚手架产出即packages/create-theme/template的展开版。下面逐一说明每个部分的作用与写作时的改造入口。4.1 包描述文件与 Slidev 声明模板package.json见 packages/create-theme/template/package.json是理解“一个 Slidev 主题需要发布什么”的关键{ type: module, keywords: [slidev-theme, slidev], engines: { node: 20.12.0 }, scripts: { build: slidev build example.md, dev: slidev example.md --open, export: slidev export example.md, screenshot: slidev export example.md --format png }, dependencies: { slidev/types: ^52.19.1 }, devDependencies: { slidev/cli: ^52.19.1 }, slidev: { colorSchema: both, defaults: { fonts: { sans: Nunito Sans, mono: Fira Code } } } }几个关键点keywords必须包含slidev-theme这是官方主题目录/检索与 Slidev 自动补全识别主题包的重要标识dependencies仅声明类型包slidev/types运行时能力全部来自使用者的slidev/cli从而保持主题本身轻量slidev.colorSchema: both声明主题同时支持浅色/深色可选light/dark/bothslidev.defaults可注入默认 frontmatter 配置此处预置了fonts无衬线用 Nunito Sans、等宽用 Fira Code用户使用该主题时会自动获得这些字体设置除非在自身 frontmatter 中覆盖四个 npm scripts 围绕example.md构建dev本地预览、build产物构建、export导出 PDF、screenshot导出 PNG用于生成主题展示图。4.2 布局组件cover 与 intropackages/create-theme/template/layouts/下提供两个最小布局它们也是“写一个布局该长什么样”的标准示范。以cover.vue为例见 packages/create-theme/template/layouts/cover.vuescript setup langts import { handleBackground } from slidev/client import { computed } from vue const props defineProps({ background: { type: String, default: undefined }, }) const style computed(() handleBackground(props.background)) /script template div classslidev-layout cover :stylestyle div classmy-auto w-full slot / /div /div /template布局通过 props 接收 frontmatter 传入的属性此例为background图片 URL用官方导出的handleBackground()把背景字符串转换成 CSS 背景样式再整体垂直居中渲染默认插槽slot。intro.vue结构相同仅类名改为slidev-layout intro见 packages/create-theme/template/layouts/intro.vue。模板还保留空的components/目录供你添加可被幻灯片内!-- --语法直接引用的自定义组件。关于前端资源引用路径的一个细节差异cover.vue从slidev/client顶层导入handleBackground而intro.vue从slidev/client/layoutHelper子路径导入——两者最终都解析到同一布局辅助函数写作时二选一均可不必纠结差异。4.3 样式组织与主题变量模板把样式分成两层见 packages/create-theme/template/styles/index.ts显式 import 官方基础布局样式slidev/client/styles/layouts-base.css保证 default 等基础布局可用并注释提示“删除它即可获得完全的自定义”再 import 自己的layout.css做增量覆盖。layout.css见 packages/create-theme/template/styles/layout.css展示了两个核心惯例:root { /* default theme color */ /* can be overrided by uses themeConfig option */ --slidev-theme-primary: #5d8392; } .slidev-layout.cover, .slidev-layout.intro { apply h-full grid; h1 { apply text-6xl leading-20; } h1 p { apply -mt-2 opacity-50 mb-4; } p h2, ul h2, table h2 { apply mt-10; } }要点在:root声明 CSS 变量--slidev-theme-primary作为主题主色注释明确说明该变量可被使用方 frontmatter 的themeConfig覆盖是主题开放“可配置化”的标准做法类名以.slidev-layout.cover形式把样式挂到布局根节点上字号间距等直接使用 Tailwind/Windicss 风格的apply原子类因此模板中的样式天然跑在 UnoCSS 环境里构建、预览无需额外配置。4.4 代码高亮预设packages/create-theme/template/setup/shiki.ts通过官方暴露的defineShikiSetup配置 Shiki 主题集import type { ShikiSetupReturn } from slidev/types import { defineShikiSetup } from slidev/types export default defineShikiSetup((): ShikiSetupReturn { return { themes: { dark: vitesse-dark, light: vitesse-light }, } })setup/目录用于放置 Slidev 启动阶段的 hook 模块类似defineShikiSetup等这里按浅色/深色分别指定了vitesse-light与vitesse-dark两套内置高亮主题与前面colorSchema: both声明相呼应——启用深色模式时代码块会自动切换到深色高亮。4.5 演示幻灯片 example.mdexample.md见 packages/create-theme/template/example.md是主题的“说明书兼试衣间”。它的 frontmatter 用theme: ./指向主题自身目录因此开发期预览与用户使用时的解析路径一致其余页面依次演示了基本标题页、特性列表页、快捷键表格、layout: image-right 远程图片背景、代码高亮块、layout: center居中页等典型用法。它同时是你验收主题改动、导出主题宣传图npm run screenshot的样本输入。发布前建议改写这份文件让它真正代表你主题的风格与能力。4.6 发布前的 README 模板脚手架生成的 README 由 packages/create-theme/template/README.md 替换占位符而来其中有两类内容需要作者补充使用安装章节已在文案中给出标准安装姿势——用户在自身slides.mdfrontmatter 写入theme: 你的主题名启动 Slidev 时会被提示自动安装该主题包这与官方文档 docs/guide/theme-addon.md 中“use theme”的机制一致待办占位区## Layouts与## Components下方留了TODO:列表README首部注释也提醒作者补充该主题提供的布局/组件清单与效果截图、live demo 链接并指出更完整的主题写作规范见 docs/guide/write-theme.md。4.7 环境相关隐藏文件_gitignore → .gitignore忽略node_modules、dist、*.local、.remote-assets、.idea/、.vite-inspect、components.d.ts等本地开发与构建产物_npmrc → .npmrc写入shamefully-hoisttrue专门为 pnpm 用户保证依赖被提升shamefully hoist避免主题中深层依赖无法解析的问题——这是官方模板对“用户可能用 pnpm 开发该主题”的前置适配。五、从脚手架到正式主题后续操作建议结合模板工程与官方写作文档建议的推进路径是编辑packages/...目录内的layouts/、components/、styles/与setup/定义自己的视觉与行为期间用npm run dev实时预览example.md改layout.css中:root的主色变量与各布局排版逐步替换掉layouts-base.css提供的默认观感更新 README 的布局/组件清单用npm run screenshot生成主题预览 PNG 作为展示图调整slidev段的colorSchema与defaults等元信息在仓库根目录的 docs/guide/write-theme.md 指导下补齐主题发布细节如themeConfig的类型扩展与合并最终按npm publish语义化发布到 npm即可供任何用户在slides.md中theme: 包名一键使用。六、小结create-slidev-theme用一条npm init slidev-theme命令把“创建主题工程”所需的命名约束、npm 包结构、Slidev 元信息声明、最小布局/样式/高亮实现与演示幻灯片全部固化成了可复用的模板。理解它等于同时掌握了两个层面作为使用者你能在几分钟内得到一个可发布、可预览的主题骨架作为研究者packages/create-theme/index.mjs 中“prompts 交互 → 包名规范化 → 目录冲突确认 → 占位符替换拷贝 → 包管理器探测 → 引导提示”的流水线本身就是一套清晰、可迁移的 Node 脚手架范本值得在实现自己的代码生成器时参考复用。无法成文无法成文占位不应出现/无法成文【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考