Sveltepress

介绍

传递 theme 选项至 sveltepress 来使用一个主题

阅读 Vite 插件选项参考 来获得更多信息

选择适用场景内容模型搜索
默认主题文档、产品指南和 API 参考使用 Markdown 或 Svelte 编写的 SvelteKit 路由Algolia DocSearch，或通过自定义包装组件接入 Meilisearch（见生产构建限制）
博客主题编辑型站点和按时间发布的内容src/posts 中的 Markdown 与自动生成路由内置 Pagefind

默认主题

安装

npm install --save @sveltepress/theme-default
sh
yarn add @sveltepress/theme-default
sh
pnpm install @sveltepress/theme-default
sh
bun add @sveltepress/theme-default
sh

在 vite.config.(js|ts) 中配置

vite.config.(js|ts)
+
-
+
+
+
import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default' 
import { const sveltepress: (options?: SveltepressVitePluginOptions) => PluginOptionsveltepress } from '@sveltepress/vite'

import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct


UserConfig


object, or a function that returns it.
The function receives a


ConfigEnv


object.
defineConfig } from 'vite'

const const config: UserConfigconfig = function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct


UserConfig


object, or a function that returns it.
The function receives a


ConfigEnv


object.
defineConfig({
  UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
    function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress(), 
    function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress({ 
      SveltepressVitePluginOptions.theme?: ResolvedTheme | undefinedtheme: function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme(/** theme options */) 
    }) 
  ],
})

export default const config: UserConfigconfig
ts

阅读默认主题参考来获得更多信息

博客主题

博客主题提供文章索引、分页、标签、分类、RSS、Open Graph 图片、相关文章、评论和 Pagefind 搜索界面。它生成静态站点，当前需要 @sveltejs/adapter-static，并在 Vite 构建后运行 Pagefind。

从博客主题快速上手开始。在线 Demo是成品展示；演练场中的博客主题条目会自动启动 Blog starter。

自定义主题

自定义主题没有对应的指南页。请从演练场首页进入 —— 功能目录条目会按作者提交的内容，在 src/routes/+layout.svelte 与 src/routes/+page.md 自动启动一个新编写的自定义主题 Starter（不含默认主题，也不含博客主题）。预览里的彩色边框对应布局层级 的每一层：theme.globalLayout（GlobalLayout.svelte）、src/routes/+layout.svelte、theme.pageLayout（PageLayout.svelte）以及页面。打开 /foo 还能看到 src/routes/foo/+layout.svelte。中文和孟加拉语分别嵌入 custom-theme-zh / custom-theme-bn，示例写在同样的默认路径上，不会再增加 /zh/ 或 /bn/ 路由。

演练场中的 Kitchen sink 条目是可共存的最大默认主题项目（Markdown、默认主题、国际化、文档版本、Vite 插件与虚拟模块）。博客主题和自定义主题不会进入该树。