主页
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) 开头的链接将会被自动识别为外部链接,将会在卡片右上角出现一个外部图标
图标需要预构建
用到的图标需要加入 iconify 预构建配置 中
home
设置为 false
可以移除所有的默认首页内容,通常用于需要自定义首页内容时
插槽
hero-image
设置一个自定义的首页大 Logo 内容,比如:
/src/routes/+page.(md|svelte)
<div slot="hero-image">
Custom hero image content
</div>
html