Sveltepress

virtual:sveltepress/site 虚拟模块导出了在 sveltepress({ siteConfig }) 中配置的核心站点元数据（title、description）。

自定义主题、全局组件或布局模板可以导入该模块来展示全局站点名称与描述，或者填充 HTML meta 标签。

演练场中的 虚拟模块 条目会按作者提交的内容启动 Kitchen-sink Starter，打开 src/routes/reference/virtual-modules/+page.md。中文和孟加拉语分别嵌入 kitchen-sink-zh / kitchen-sink-bn，示例写在同样的默认路径上。该页直接在 Markdown 中写 Svelte，用与本页相同的 JsonViewer 渲染 virtual:sveltepress/site、locale 与 versions。文档页继续使用 svelte live，以便同时展示源代码和渲染结果。本页、virtual:sveltepress/locale 与 virtual:sveltepress/versions 上的 Open in Playground 都会进入该条目。

实时数据

以下是当前站点 siteConfig 配置数据的实时交互展示：

<script>
  import { 

type JsonViewer = SvelteComponent<Record<string, any>, any, any>
const JsonViewer: LegacyComponentType
JsonViewer } from 'svelte-json-discovery'
  import 

const siteConfig: {
    title: string;
    description: string;
}
siteConfig from 'virtual:sveltepress/site'
</script>

<div class: stringclass="viewer">
  <const JsonViewer: LegacyComponentTypeJsonViewer 

data: {
    title: string;
    description: string;
}
data={

const siteConfig: {
    title: string;
    description: string;
}
siteConfig} />
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow: auto;
  }
  :global(html.dark) .viewer {
    --discovery-background-color: #1a1a1a;
    --sjd-app-bg: #1a1a1a;
    --sjd-fmt-color: #999;
    --sjd-fmt-hover-color: #aaa;
    --sjd-fmt-property-color: #d17a8c;
    --sjd-fmt-number-color: #0f8dc2;
    --sjd-fmt-atom-color: #0f8dc2;
    --sjd-fmt-string-color: #7faf20;
    --sjd-fmt-string-underline-color: #85ab51;
    --sjd-fmt-string-hover-color: #97cf26;
    --sjd-ui-color: #ccc;
    --sjd-match-bg: #565638;
    --sjd-match-border: #a7a73b;
    --sjd-error-border: #0004;
    --sjd-error-bg: #622b29;
    --sjd-error-color: #c66;
    --sjd-error-message-bg: #443232;
    --sjd-toggle-color: #72b372;
    --sjd-touch-button-color: #aaa;
    --sjd-touch-button-bg: #50505080;
    --sjd-popup-bg: #333;
    --sjd-popup-color: #ccc;
    --sjd-popup-notes-color: #999;
    --sjd-popup-error-color: #e66;
    color-scheme: dark;
  }
</style>
svelte
Expand code

模块导出

default

  • 类型：{ title: string, description: string }

默认导出即为站点元配置对象：

  • title：在 siteConfig.title 中配置的站点标题。若未提供，默认为 'Untitled site'。
  • description：在 siteConfig.description 中配置的站点描述。若未提供，默认为 'Build by sveltepress'。

与 TypeScript 一起开发

在 src/app.d.ts 中引入 @sveltepress/vite/types，即可获得 virtual:sveltepress/site 的完整类型提示：

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

// 其它类型
ts