Vite 插件

插件选项

footnoteLabel?: string
}

export type RemarkPluginsOrderer  = ((themeRemarkPlugins : Plugin[]) => Plugin[])

export type RehypePluginsOrderer  = ((themeRehypePlugins : Plugin[]) => Plugin[])
ts

siteConfig

export type ThemeVitePlugins  = PluginOption [] | ((corePlugin : PluginOption ) => Promise <PluginOption []>) | ((corePlugin : PluginOption ) => PluginOption [])

export interface SiteConfig {
  title ?: string
ts
  • title: 站点标题，默认为：'Untitled site'
  • description: 站点描述，默认为：'Build by sveltepress'

addInspect

如果设置为 true，将会添加 Vite plugin inspect

theme

查看下方 ResolvedTheme

remarkPlugins

阅读 Remark plugins 来获得更多信息

rehypePlugins

阅读 Rehype plugins 来获得更多信息

自定义 remark 与 rehype 插件顺序

remarkPlugins 与 rehypePlugins 可以是以下两种形式：

  1. 一个 Plugins 数组. 这里提供的插件将会自动在主题提供的插件之后运行
  2. 一个函数，接受 themeRemarkPlugins 作为参数，然后返回一个 Plugins 数组，例如：
vite.config.ts
import { defaultTheme  } from '@sveltepress/theme-default'
import { sveltepress  } from '@sveltepress/vite'
import { defineConfig  } from 'vite'

export default defineConfig ({
  plugins : [
    sveltepress ({
      theme : defaultTheme (/* 主题选项 */),
      remarkPlugins : (themeRemarkPlugins ) => {
        // 添加你的自定义插件，并且可以控制最终的调用顺序
        return [
          ...themeRemarkPlugins 
        ]
      }
    })
  ]
})
ts

ResolvedTheme

description?: string
}
export interface ResolvedTheme {
name : string
globalLayout : string
pageLayout : string
vitePlugins : ThemeVitePlugins 
highlighter : Highlighter 
remarkPlugins ?: Plugin[]
rehypePlugins ?: Plugin[]
/**
 * The footnote label used for [remark rehype](https://github.com/remarkjs/remark-rehype#api)
 */
ts

name

主题名称

globalLayout

全局布局文件的绝对路径， 应当为一个 svelte 文件 例如：path.resolve(process.cwd(), 'ThemeGlobalLayout.svelte')

pageLayout

页面布局文件的绝对路径， 应当为一个 svelte 文件 例如：path.resolve(process.cwd(), 'ThemePageLayout.svelte')

vitePlugins

  • 如果传递了一个单一插件或者一组插件，这些插件将会在 sveltepress 核心插件之前被注册
  • 如果传递了一个函数，将会接受 sveltepress 插件作为入参，并且该函数需要返回插件组，您可以通过此方式来自定义插件顺序
关于提供 Vite 插件选项

也许这种行为显得比较奇怪，但是当主题需要添加一些自定义 虚拟模块 时会很有用

highlighter

代码高亮渲染函数 例如，默认主题使用了 shiki . 阅读 默认主题源代码 来查看具体用法

remarkPlugins

阅读 Remark plugins 来获得更多信息

rehypePlugins

阅读 Rehype plugins 来获得更多信息

插件顺序

主题提供的 remark 以及 rehype 插件将会在 vite 插件提供的之前调用 例如：

vite.config.(js|ts)
import { defaultTheme  } from '@sveltepress/theme-default'
import { sveltepress  } from '@sveltepress/vite'
import { defineConfig  } from 'vite'

export default defineConfig ({
  plugins : [
    sveltepress ({
      theme : defaultTheme (/* 默认主题选项 */),
      remarkPlugins : [/* 你的 remark 插件 */]
    })
  ]
})
ts

“你的 remark 插件”将会在默认主题中的 remark plugins 之后调用

footnoteLabel

自定义脚注标题，默认为："Footnotes"

虚拟模块

virtual:sveltepress/site

这个模块默认导出 siteConfig，示例：

站点标题为：Sveltepress

站点描述：一个以内容为中心的站点构建工具

<script>
  import siteConfig  from 'virtual:sveltepress/site'
</script>

<p>站点标题为：{siteConfig .title }</p>
<p>站点描述：{siteConfig .description }</p>
svelte
点击展开/折叠代码

更低层级的 markdown API

@sveltepress/vite 包导出了一个名为 mdToSvelte 的更低层级的函数，它支撑了所有 Sveltepress 的 markdown 渲染

这个函数可以作为一些 Markdown 转换 Svelte 工具的基础，这是一个使用的示例

import { mdToSvelte  } from '@sveltepress/vite'

const mdSource  = `
---
title: Foo
---
<script>
  const foo = 'bar'
</script>
# Title

foo in script is: {foo}

[Foo Link](https://foo.bar)
`

const { code , data  } = await mdToSvelte ({
  mdContent : mdSource ,
  remarkPlugins : [], // 自定义 remark 插件
  rehypePlugins : [], // 自定义 rehype 插件
  highlighter : async (code , lang , meta ) => Promise .resolve ('高亮后的 HTML 结果'), // 自定义代码高亮函数
  filename : 'Foo.svelte', // 虚拟文件路径
})

// 渲染后的 Svelte 代码
code 

// 解析后的 frontmatter 对象，这里是： { title: 'Foo' }
data
ts

Typescript

您需要在 src/app.d.ts 文件中包含 @sveltepress/vite/types 来获得相关的类型提示

/src/app.d.ts
/// <reference types="@sveltepress/vite/types" />

// Your other types
ts
在 Github 上编辑此页
最后更新于： 2025/11/29 11:55:50
下一页
默认主题