首页

大约 1 分钟布局布局主页

vuepress-theme-hope 保留了默认主题的首页配置，在此基础上改进样式与配置。

如果想要使用它，请在 frontmatter 中设置 home: true。任何 frontmatter 之后的内容将会以普通的 Markdown 被渲染，并插入到主页渲染内容的底部。

首页截图首页截图

站点信息

你可以使用 heroText 设置主标题，并通过 tagline 设置副标题。

如果你有一个 Logo，你可以将其放置在 public 文件夹中，并通过 heroImage 设置它，如果你在夜间模式希望展示另一个 Logo， 可以使用 heroImageDark。为了更好的 A11y，我们建议你设置 Logo 的描述到 heroAlt。

主页按钮

你可以将一些重要的链接以按钮的形式展示在主页中。

你可以通过 actions 设置它们，它是一个数组，每个元素都是一个对象，包含以下键值:

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

项目特性

你可以通过 features 设置并展示项目特性，它是一个数组，每个元素都是一个对象，包含以下键值:

  • title: 标题
  • details: 详情
  • icon(可选): 可填入完整路径或绝对路径的图片链接，或 FontClass
  • link(可选): 链接地址

相关信息

关于完整的配置项目，请参见 主页 Frontmatter 配置。

配置案例

---
home: true
title: 主页
icon: home
heroImage: /logo.svg
heroText: VuePress Theme Hope
tagline: 一个具有强大功能的 vuepress 主题✨
actions:
  - text: 使用教程 🧭
    link: /zh/cookbook/tutorial/
    type: primary

  - text: 介绍 💡
    link: /zh/guide/get-started/intro.html

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

  - text: 在线案例 🪀
    link: https://stackblitz.com/fork/vuepress-theme-hope

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

  - title: 幻灯片页面
    icon: person-chalkboard
    details: 添加幻灯片页面以显示你喜欢的内容
    link: /zh/guide/layout/slides

  - title: 布局增强
    icon: object-group
    details: 添加路径导航、页脚、改进的导航栏、改进的页面导航等。
    link: /zh/guide/layout/

  - title: 浏览量与评论
    icon: comment-dots
    details: 配合 Waline 来开启阅读量统计与评论支持
    link: /zh/guide/feature/comment.html

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

  - title: 博客支持
    icon: blog
    details: 使用一些很棒的布局提供博客功能，通过文章的日期、标签和分类，自动生成文章、分类、标签与时间轴列表
    link: /zh/guide/blog/intro.html

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

  - title: 深色模式
    icon: circle-half-stroke
    details: 可以自由切换浅色模式与深色模式
    link: /zh/guide/interface/darkmode.html

  - title: 完整的无障碍支持
    icon: universal-access
    details: 为你的网站带来完整的无障碍支持
    link: /zh/guide/interface/accessibility.html

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

  - title: 搜索支持
    icon: search
    details: 支持 docsearch 和基于客户端的搜索
    link: /zh/guide/feature/search.html

  - title: 代码复制
    icon: copy
    details: 一键复制代码块中的代码
    link: /zh/guide/feature/copy-code.html

  - title: 图片预览
    icon: image
    details: 像相册一样允许你浏览、缩放并分享你的页面图片
    link: /zh/guide/feature/photo-swipe.html

  - title: SEO 增强
    icon: dumbbell
    details: 将最终生成的网页针对搜索引擎进行优化。
    link: /zh/guide/advanced/seo.html

  - title: Sitemap
    icon: sitemap
    details: 自动为你的网站生成 Sitemap
    link: /zh/guide/advanced/sitemap.html

  - title: Feed 支持
    icon: rss
    details: 生成你的 Feed，并通知你的用户订阅它
    link: /zh/guide/advanced/feed.html

  - title: PWA 支持
    icon: mobile-screen
    details: 让你的网站更像一个 APP
    link: /zh/guide/advanced/pwa.html

  - title: 更多新特性
    icon: ellipsis
    details: 包括图标支持、全屏按钮、返回顶部按钮等
    link: /zh/guide/feature/

copyright: false
footer: MIT Licensed | Copyright © 2019-present Mr.Hope
---
Loading...
MIT Licensed | Copyright © 2019-present Mr.Hope