Sveltepress 是面向文档与博客的 SvelteKit 站点构建工具。 启发自 VitePress。 基于 SvelteKit 与 UnoCSS 构建 —— 既有内容工具链,也保留 SSR、适配器、服务端路由与 hooks 等完整能力。
导航栏中的 演练场 会打开浏览器内的功能目录与 Starter。Markdown、默认主题与 Vite 插件条目共用默认主题 Starter。「文档版本管理」使用 Versions Starter(versions init / create · versions build)。「国际化」使用三语言 Starter。各语言演练场嵌入一份用该语言写在默认路径上的 Starter(例如 src/routes/+page.md、config/navbar.js),不会再增加 /zh/ 或 /bn/ 路由;只有「国际化」条目例外。「自定义主题」仅能从演练场首页进入(没有对应指南页);预览里的彩色边框对应下面的布局层级,分别标出 GlobalLayout、+layout.svelte 与 PageLayout。博客主题条目(配置、写文章、特性、自定义)共用 Blog starter。「虚拟模块」是 Kitchen-sink Starter 上的一条参考条目;在 virtual:sveltepress/site、locale 与 versions 页上的 Open in Playground 都会进入该条目。Kitchen sink 是「全部特性」条目,也是演练场顶部的 CTA(不是站点导航栏项)。博客主题和自定义主题不会进入该树。指南页仍使用不可编辑的 Live code;博客示例仍是成品展示。
与其他工具对比
Sveltepress 与主流的现代文档解决方案对比:
| 特性 / 维度 | Sveltepress | VitePress | Astro (Starlight) | Docusaurus |
|---|---|---|---|---|
| 核心生态 | Svelte / SvelteKit | Vue 3 | 框架中立 (UI-agnostic) | React |
| 底层构建 | Vite 8 + SvelteKit 2 | Vite + Vue 3 | Vite + Astro 编译器 | Webpack |
| 全栈能力 | 完整保留 SvelteKit 能力(SSR、API 路由、Hooks) | 偏向纯 SSG 静态构建 | 需借助 SSR 适配器 | 需二次配置 Node 插件 |
| 响应式体系 | Svelte 5 Runes 原生无缝混写 | Vue 3 Composition API | 默认纯静态 (Islands) | React Hooks |
| 代码交互 | 原生 Live Code 组件渲染 + Twoslash 类型悬浮 | 支持 Vue 组件 | 需配合各框架插件 | 需额外集成 react-live |
| 版本控制 | 基于内容寻址与不可变增量对比 | 外部多分支/子目录 | 需配合插件或多语言方案 | 基于目录快照拷贝 |
| 搜索方案 | Pagefind (内置静态分片) / DocSearch / Meilisearch | Pagefind / DocSearch | Pagefind | Algolia / 本地插件 |
AI 知识库 (llms.txt) | 原生自动构建支持 | 需第三方插件 | 需第三方插件 | 需第三方插件 |
项目结构
与 项目结构 - SvelteKit 完全一致 除此外,您还可以使用 .md 文件作为页面(+page)或者布局(+layout)
例如:
src/routes/+page.md将会被用作首页src/routes/+layout.md将会被用作自定义全局布局
Sveltepress 保留了 SvelteKit 的完整能力,你可以做的远不止静态站点构建 比如使用 +page.server.js, +layout.server.js, hooks.server.js 去做一些像鉴权,认证,数据库对接等功能
布局层级
必须有一个 src/routes/+layout.svelte 或者 src/routes/+layout.md 作为根布局组件 否则由主题提供的全局布局将不会工作!
假设你有一个这样的文件树:
.
├─ src
│ ├─ routes
│ │ └─ +layout.(svelte|md)
│ │ ├─ foo
│ │ │ ├─ +page.(svelte|md)
│ │ │ ├─ +layout.(svelte|md) theme.globalLayout > src/routes/+layout.(svelte|md) > theme.pageLayout > src/routes/foo/+layout.(md|svelte) > src/routes/foo/+page.md
这里有一个图表帮助你理解:
配置
配置项传递给 @sveltepress/vite 插件,你可以阅读Vite 插件选项 - 参考 来获得更多信息
需要多语言站点?请阅读国际化。
部署
推荐先阅读 适配器 - SvelteKit 章节
如果您使用了 npm/yarn/pnpm create @sveltepress 来创建一个新的项目 静态适配器 将会被默认使用
您可以根据需要换成任何想要的适配器