首页

Mr.Hope ... 2020年10月13日 13:36 Layout
  • Home
  • Layout
大约 2 分钟

vuepress-theme-hope 对首页布局进行了一些改进。

如果想要使用它,请在 frontmatter 中设置 home: true。任何 YAML front matter 之后额外的内容将会以普通的 Markdown 被渲染,并插入到 features 的后面。

首页截图

# 配置选项

可以配置的 frontmatter 参数如下:

# home

  • 类型: boolean

设置为 true 时启用首页样式

# title

  • 类型: string | false
  • 默认值: 'Hello'

标题,填入 false 会取消显示。

# heroImage

  • 类型: string

主页图标 (logo) 地址,需要填入绝对路径 (图片需要放入 .vuepress/public 文件夹)

# darkHeroImage

  • 类型: string

深色模式下主页图标 (logo) 地址,需要填入绝对路径 (图片需要放入 .vuepress/public 文件夹),默认同 heroImage

# heroText

  • 类型: string

主页图标替代文字。

# tagline

  • 类型: string
  • 默认值: 'Welcome to your VuePress site'

附加文字描述

# action

  • 类型: ActionConfig | ActionConfig[]

ActionConfig 结构:

  • text: 按钮文字
  • link: 按钮链接
  • type: 按钮类型 (仅支持 'primary''default' (默认))

# features

  • 类型: Feature[]

Feature 结构:

  • title: string 标题
  • details: string 详情
  • link(可选): string 链接地址

特性说明

# 配置案例

---
home: true
title: 主页
icon: home
heroImage: /logo.svg
heroText: vuepress-theme-hope
tagline: 一个具有强大功能的 vuepress 主题✨
action:
  - text: 快速上手 💡
    link: /zh/guide/
    type: primary

  - text: 配置 🛠
    link: /zh/config/

features:
  - title: Markdown 增强 🧰
    details: 新增文字对齐、上下角标、脚注、标记、数学公式、流程图与幻灯片支持
    link: /zh/guide/markdown/

  - title: 浏览量与评论 💬
    details: 配合 Valine 与 Vssue 来开启阅读量统计与评论支持
    link: /zh/guide/feature/comment/

  - title: 文章信息展示 ℹ
    details: 为你的文章添加作者、写作日期、预计阅读时间、字数统计等信息
    link: /zh/guide/feature/page-info/

  - title: 博客支持 📝
    details: 为你的文章添加日期、标签和分类,即可自动生成文章、分类、标签与时间轴列表
    link: /zh/guide/blog/intro/

  - title: 文章加密 🔐
    details: 你可以为你的特定页面或特定目录进行加密,以便陌生人不能随意访问它们
    link: /zh/guide/feature/encrypt/

  - title: 主题色切换 🎨
    details: 支持自定义主题色并允许用户在预设的主题颜色之间切换
    link: /zh/guide/interface/theme-color/

  - title: 深色模式 🌙
    details: 可以自由切换浅色模式与深色模式
    link: /zh/guide/interface/darkmode/

  - title: SEO 增强和 Sitemap 🗺
    details: 主题可以自动为你的网站生成 Sitemap,并将最终生成的网页针对搜索引擎进行优化。
    link: /zh/guide/feature/seo-sitemap/

  - title: Feed 支持 📡
    details: 你可以生成你的 Feed,并通知你的用户订阅它。
    link: /zh/guide/feature/feed/

  - title: PWA 支持 📲
    details: 内置的 PWA 插件会让你的网站更像一个 APP。
    link: /zh/guide/feature/pwa/

  - title: TS 支持 🔧
    details: 为你的 VuePress 开启 TypeScript 支持
    link: /zh/guide/feature/typescript/

  - title: 更多新特性 ✨
    details: 包括博客主页、图标支持、路径导航、页脚支持、全屏按钮、返回顶部按钮等
    link: /zh/guide/feature/

footer: MIT Licensed | Copyright © 2019-present Mr.Hope
copyrightText: false
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67