Sveltepress

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

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

heroImage

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

本地化默认 Hero 视觉

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

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  

DefaultThemeOptions.i18n?: {
    navbarMenu?: string;
    heroCode?: {
        title?: string;
        messageBefore?: string;
        messageStrong?: string;
        messageAfter?: string;
        tipLabel?: string;
        counterLabel?: string;
    };
    onThisPage?: string;
    suggestChangesToThisPage?: string;
    lastUpdateAt?: string;
    previousPage?: string;
    nextPage?: string;
    expansionTitle?: string;
    expandCode?: string;
    pwa?: {
        tip?: string;
        reload?: string;
        close?: string;
        appReadyToWorkOffline?: string;
        newContentAvailable?: string;
    };
    ... 22 more ...;
    searchClear?: string;
} | undefined
i18n: {
    

heroCode?: {
    title?: string;
    messageBefore?: string;
    messageStrong?: string;
    messageAfter?: string;
    tipLabel?: string;
    counterLabel?: string;
} | undefined
heroCode: {
      title?: string | undefinedtitle: '你好',
      messageBefore?: string | undefinedmessageBefore: '在 ',
      messageStrong?: string | undefinedmessageStrong: 'Markdown',
      messageAfter?: string | undefinedmessageAfter: ' 中使用 Svelte',
      tipLabel?: string | undefinedtipLabel: '提示',
      counterLabel?: string | undefinedcounterLabel: '计数：1',
    },
  },
})
ts

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 const heroImage: () => ReturnType<import("svelte").Snippet>heroImagetype ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any
Obtain the return type of a function type
()}
  <div>
    自定义 Logo 内容
  </div>
{/snippet}
svelte