Vite 插件

插件选项

export interface SveltepressVitePluginOptions {
  ?: 
  ?: 
  ?: boolean
  ?: Plugin[]
  ?: Plugin[]

siteConfig

export interface SiteConfig {
  ?: string
  ?: string
}

• title: 站点标题，默认为：'Untitled site'
• description: 站点描述，默认为：'Build by sveltepress'

addInspect

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

theme

查看下方 ResolvedTheme

remarkPlugins

阅读 Remark plugins 来获得更多信息

rehypePlugins

阅读 Rehype plugins 来获得更多信息

ResolvedTheme

export interface ResolvedTheme {
  : string
  : string
  : string
  :  | ((: ) => [] | <[]>)
  : 
  ?: Plugin[]
  ?: Plugin[]
  /**
   * The footnote label used for [remark rehype](https://github.com/remarkjs/remark-rehype#api)
   */
  ?: string
}

name

主题名称

globalLayout

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

pageLayout

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

vitePlugins

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

highlighter

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

remarkPlugins

阅读 Remark plugins 来获得更多信息

rehypePlugins

阅读 Rehype plugins 来获得更多信息

import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : (/* 默认主题选项 */),
      : [/* 你的 remark 插件 */]
    })
  ]
})

footnoteLabel

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

虚拟模块

virtual:sveltepress/site

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

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

<p>站点标题为：{.}</p>
<p>站点描述：{.}</p>

更低层级的 markdown API

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

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

import {  } from '@sveltepress/vite'

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

foo in script is: {foo}

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

const { ,  } = await ({
  : ,
  : [], // 自定义 remark 插件
  : [], // 自定义 rehype 插件
  : async (, , ) => .('高亮后的 HTML 结果'), // 自定义代码高亮函数
  : 'Foo.svelte', // 虚拟文件路径
})

// 渲染后的 Svelte 代码


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

Typescript

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

/// <reference types="@sveltepress/vite/types" />

// Your other types