Sveltepress 是面向文档与博客的 SvelteKit 站点构建工具。 启发自 VitePress。 基于 SvelteKitUnoCSS 构建 —— 既有内容工具链,也保留 SSR、适配器、服务端路由与 hooks 等完整能力。

导航栏中的 演练场 会打开浏览器内的功能目录与 Starter。Markdown、默认主题与 Vite 插件条目共用默认主题 Starter。「文档版本管理」使用 Versions Starter(versions init / create · versions build)。「国际化」使用三语言 Starter。各语言演练场嵌入一份用该语言写在默认路径上的 Starter(例如 src/routes/+page.mdconfig/navbar.js),不会再增加 /zh//bn/ 路由;只有「国际化」条目例外。「自定义主题」仅能从演练场首页进入(没有对应指南页);预览里的彩色边框对应下面的布局层级,分别标出 GlobalLayout+layout.sveltePageLayout。博客主题条目(配置、写文章、特性、自定义)共用 Blog starter。「虚拟模块」是 Kitchen-sink Starter 上的一条参考条目;在 virtual:sveltepress/sitelocaleversions 页上的 Open in Playground 都会进入该条目。Kitchen sink 是「全部特性」条目,也是演练场顶部的 CTA(不是站点导航栏项)。博客主题和自定义主题不会进入该树。指南页仍使用不可编辑的 Live code;博客示例仍是成品展示。

与其他工具对比

Sveltepress 与主流的现代文档解决方案对比:

特性 / 维度SveltepressVitePressAstro (Starlight)Docusaurus
核心生态Svelte / SvelteKitVue 3框架中立 (UI-agnostic)React
底层构建Vite 8 + SvelteKit 2Vite + Vue 3Vite + 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 / MeilisearchPagefind / DocSearchPagefindAlgolia / 本地插件
AI 知识库 (llms.txt)原生自动构建支持需第三方插件需第三方插件需第三方插件

项目结构

项目结构 - SvelteKit 完全一致 除此外,您还可以使用 .md 文件作为页面(+page)或者布局(+layout)

例如:

  • src/routes/+page.md 将会被用作首页
  • src/routes/+layout.md 将会被用作自定义全局布局
SvelteKit 的完整能力

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)
txt

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 来创建一个新的项目 静态适配器 将会被默认使用

您可以根据需要换成任何想要的适配器