主页

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
Expand code

您可以在 本站的首页 看到效果

heroImage

首页的大 Logo 图片,推荐使用质量较高的图片。如果落地页需要把完整宽度留给正文、不显示默认 Hero 插图,可设置为 false

本地化默认 Hero 视觉

省略 heroImage 时,默认主题会显示双面板代码预览。可以通过主题的 i18n.heroCode 配置本地化其中的文字:

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

({
  : {
    : {
      : '你好',
      : '',
      : 'Markdown',
      : ' 中使用 Svelte',
      : '提示',
      : '计数:1',
    },
  },
})
ts

messageBeforemessageStrongmessageAfter 会组合成源码面板中的 Markdown 句子;tipLabelcounterLabel 用于自定义渲染结果面板。

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,复用相同的落地页展示形式,并使用该页面自己的 titledescriptiontagline。落地页不会展示文档侧边栏、页内目录、编辑元信息和上一篇/下一篇切换。

在根路由设置 home: false 可以移除默认首页内容,通常用于完全自定义首页。

插槽

hero-image

设置一个自定义的首页大 Logo 内容,比如:

/src/routes/+page.(md|svelte)
{#snippet 
  <div>
    自定义 Logo 内容
  </div>
{/snippet}
svelte
最后更新于: 2026/09/05 03:57