主页

Frontmatter

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

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

---
title: 一个以内容为中心的站点构建工具
description: 一个简单、易用、保留了 SvelteKit 的完整能力的站点构建工具
heroImage: /android-chrome-192x192.png
tagline: 一个简单的、易用的，保留了 SvelteKit 的完整能力的站点构建工具
actions:
  - label: 阅读文档
    to: /guide/introduction/
    type: primary
  - label: 在 Github 上查看
    type: flat
    to: https://github.com/Blackman99/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: 根据您的需要选择默认主题，社区主题，或者自行开发主题own.
    icon:
      type: iconify
      collection: emojione
      name: artist-palette
---
md

您可以在

本站的首页
看到效果

heroImage

首页的大 Logo 图片，推荐使用质量较高的图片

tagline

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

actions

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

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

features

特性卡片

  • title
    标题
  • description
    描述
  • icon
    自定义卡片图标
    • type - 'svg' 或者 'iconify'
    • value - svg 的 DOM 内容
    • collection - Iconfiy 分类名称
    • name - Iconfiy 分类下的图标名称
  • link
    点击特性卡片跳转的链接地址
    当提供此项时特性卡片将会具有一个可点击的交互样式
    以 http(s) 开头的链接将会被自动识别为外部链接，将会在卡片右上角出现一个外部图标
图标需要预构建

用到的图标需要加入

中

home

设置为 false 可以移除所有的默认首页内容，通常用于需要自定义首页内容时

插槽

hero-image

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

/src/routes/+page.(md|svelte)
<div slot="hero-image">
Custom hero image content
</div>
html
在 Github 上编辑此页
最后更新于： 2024/03/22 12:44:22