主页
Frontmatter
src/routes/+page.(md|svelte) 文件将会被当作主页
用当前站点使用的主页配置举例:
---
title: 一个以内容为中心的站点构建工具
description: 一个简单、易用、保留了 SvelteKit 的完整能力的站点构建工具
badge:
text: '⚡️ 全面支持 Svelte 5 与 Runes 响应式特性'
link: /guide/markdown/svelte-in-markdown/
installCommand: pnpm create sveltepress
actions:
- label: 阅读文档
to: /guide/introduction/
type: primary
- label: 在 Github 上查看
type: flat
to: https://github.com/SveltePress/sveltepress
external: true
features:
- title: 支持在 Markdown 中编写 Svelte 5
description: 在 Markdown 中直接使用 Svelte 5 组件与 Runes 状态管理,探索极致的交互式文档创作体验。
spotlight: true
tag: 杀手特性
icon:
type: iconify
collection: vscode-icons
name: file-type-svelte
link: /guide/markdown/svelte-in-markdown/
- title: 企业级不可变文档版本管理
description: 让当前文档保持简洁直观的 URL,同时发布不可变的历史快照,并提供内置版本导航和发布变化总览。
spotlight: true
tag: 核心优势
icon:
type: iconify
collection: material-symbols
name: history
link: /guide/version-management/
- title: 开箱即用高性能全文搜索
description: 基于 Pagefind 提供零配置的高性能客户端本地搜索,支持多语言过滤、历史版本索引隔离与 DocSearch 扩展。
spotlight: true
tag: 极速搜索
icon:
type: iconify
collection: material-symbols
name: search
link: /guide/default-theme/search/
- title: 以 Markdown 为中心
description: 以最小的配置开始写作,开箱即用代码高亮、提示块和自动目录,专注于内容创作。
tag: 写作体验
icon:
type: iconify
collection: vscode-icons
name: file-type-markdown
link: /guide/markdown/frontmatter/
- title: 基于 SvelteKit 构建
description: 完整继承 SvelteKit 的生态与能力,不仅支持 SSG 静态导出,更能轻松扩展服务端路由与 SSR。
tag: 全栈能力
icon:
type: iconify
collection: logos
name: svelte-icon
link: /guide/introduction/
- title: 内置多语言支持 (i18n)
description: 单站点开箱即用多语言体系,提供自动化路由前缀、语言切换器与跨语言版本状态保持。
tag: 国际化
icon:
type: iconify
collection: material-symbols
name: translate
link: /guide/i18n/
- title: TypeScript 类型友好
description: 所有 API 与配置均拥有完整的类型定义,内置 Twoslash 代码悬浮提示与类型推断支持。
tag: 类型安全
icon:
type: iconify
collection: logos
name: typescript-icon
link: /guide/typescript/
- title: 支持丰富的主题定制
description: 根据您的需要选择优雅的默认文档主题、博客主题、社区主题,或者轻松定制专属主题。
tag: 灵活扩展
icon:
type: iconify
collection: emojione
name: artist-palette
link: /guide/themes/
---
md
您可以在 本站的首页 看到效果
heroImage
首页的大 Logo 图片,推荐使用质量较高的图片。如果落地页需要把完整宽度留给正文、不显示默认 Hero 插图,可设置为 false。
本地化默认 Hero 视觉
省略 heroImage 时,默认主题会显示双面板代码预览。可以通过主题的 i18n.heroCode 配置本地化其中的文字:
import { } from '@sveltepress/theme-default'
({
: {
: {
: '你好',
: '在 ',
: 'Markdown',
: ' 中使用 Svelte',
: '提示',
: '计数:1',
},
},
}) ts
messageBefore、messageStrong 和 messageAfter 会组合成源码面板中的 Markdown 句子;tipLabel 和 counterLabel 用于自定义渲染结果面板。
tagline
在标题以及描述之下的补充文字
actions
动作按钮,每个按钮包含如下几个属性:
label按钮里的文案to按钮的链接。内部链接应使用逻辑路径,例如/guide/introduction/;默认主题会自动加上当前语言前缀。external是否展示外部链接的图标
features
特性卡片
title标题description描述icon自定义卡片图标type-'svg' 或者 'iconify'value- svg 的 DOM 内容collection- Iconfiy 分类名称name- Iconfiy 分类下的图标名称
link点击特性卡片跳转的链接地址。内部链接应使用逻辑路径,例如/guide/markdown/frontmatter/;默认主题会自动加上当前语言前缀。 当提供此项时特性卡片将会具有一个可点击的交互样式 以 http(s) 开头的链接将会被自动识别为外部链接,将会在卡片右上角出现一个外部图标
图标需要预构建
用到的图标需要加入 iconify 预构建配置 中
home
根路由默认使用首页布局。其他路由可以设置 home: true,复用相同的落地页展示形式,并使用该页面自己的 title、description 和 tagline。落地页不会展示文档侧边栏、页内目录、编辑元信息和上一篇/下一篇切换。
在根路由设置 home: false 可以移除默认首页内容,通常用于完全自定义首页。
插槽
hero-image
设置一个自定义的首页大 Logo 内容,比如:
/src/routes/+page.(md|svelte)
{#snippet
<div>
自定义 Logo 内容
</div>
{/snippet} svelte