主页

Frontmatter

src/routes/+page.(md|svelte) 文件将会被当作主页

用当前站点使用的主页配置举例：

---
title: 一个以内容为中心的站点构建工具
description: 一个简单、易用、保留了 SvelteKit 的完整能力的站点构建工具
actions:
  - label: 阅读文档
    to: /guide/introduction/
    type: primary
  - label: 在 Github 上查看
    type: flat
    to: https://github.com/SveltePress/sveltepress
    external: true
features:
  - title: 以 Markdown 为中心
    description: 以最小的配置开始写作
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-markdown
  - title: 基于 Sveltekit 构建
    description: 保留了 Sveltekit 的完整能力，你可以做的远不止 SSG
    icon:
      type: iconify
      collection: logos
      name: svelte-kit
  - title: 支持在 Markdown 中编写 Svelte
    description: 在 Markdown 中自由的编写 Svelte，探索无限可能
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-svelte
  - title: 类型友好
    description: 所有的 API 以及配置均有 TS 类型提示
    icon:
      type: iconify
      collection: logos
      name: typescript-icon
  - title: 文档版本管理
    description: 让当前文档保持简洁 URL，同时发布不可变的历史快照，并提供内置版本导航和发布变化总览。
    icon:
      type: iconify
      collection: material-symbols
      name: history
    link: /guide/version-management/
  - title: 支持主题自定义
    description: 根据您的需要选择默认主题，社区主题，或者自行开发主题own.
    icon:
      type: iconify
      collection: emojione
      name: artist-palette
---

Expand code

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

`heroImage`

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

本地化默认 Hero 视觉

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

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

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

messageBefore、messageStrong 和 messageAfter 会组合成源码面板中的 Markdown 句子；tipLabel 和 counterLabel 用于自定义渲染结果面板。

`tagline`

在标题以及描述之下的补充文字

`actions`

动作按钮，每个按钮包含如下几个属性：

label 按钮里的文案
to 按钮的链接
external 是否展示外部链接的图标

`features`

特性卡片

title 标题
description 描述
icon 自定义卡片图标
- type - 'svg' 或者 'iconify'
- value - svg 的 DOM 内容
- collection - Iconfiy 分类名称
- name - Iconfiy 分类下的图标名称
link 点击特性卡片跳转的链接地址当提供此项时特性卡片将会具有一个可点击的交互样式以 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

在 Github 上编辑此页