首页
vuepress-theme-hope
保留了默认主题的首页配置,在此基础上改进样式与配置。
如果想要使用它,请在 frontmatter 中设置 home: true
。任何 frontmatter 之后的内容将会以普通的 Markdown 被渲染,并插入到主页渲染内容的底部。
站点信息
你可以使用 heroText
设置主标题,并通过 tagline
设置副标题。
如果你有一个 Logo,你可以将其放置在 public
文件夹中,并通过 heroImage
设置它,如果你在夜间模式希望展示另一个 Logo, 可以使用 heroImageDark
。为了更好的 A11y,我们建议你设置 Logo 的描述到 heroAlt
。
你可以通过 bgImage
和 bgImageDark
设置背景图片,但需要注意必须填入完整 URL 或绝对路径。如果你希望信息全屏展示,你可以设置 heroFullScreen: true
。
如果你需要定制一些样式,你可以通过 heroImageStyle
和 bgImageStyle
设置 Logo 与背景图片的样式。
主页按钮
你可以将一些重要的链接以按钮的形式展示在主页中。
你可以通过 actions
设置它们,它是一个数组,每个元素都是一个对象,包含以下键值:
text
: 按钮文字link
: 按钮链接type
: 按钮类型 (仅支持"primary"
与"default"
(默认))
项目亮点与功能
你可以通过 highlights
来设置和显示项目亮点,它是一个数组,每个元素都是一个对象,代表一个亮点部分。
你也可以通过 features
来设置和显示项目特性,它是一个数组,每个元素都是一个对象,代表一个特性部分。
亮点和功能都支持 header
和 description
属性。 其中 header
是章节的标题,description
是章节的描述。 你可以为它们设置 HTML 字符串。
亮点使用 highlights
来设置亮点,功能使用 features
来设置功能。两者都是数组,每个元素都是一个对象,代表一个亮点或者功能项:
title
: 标题,支持 HTML 字符串details
: 细节,支持 HTML 字符串icon
(可选):可以填写完整路径或绝对路径图片链接,或 FontClasslink
(可选):链接地址
亮点还支持以下属性:
color
: 文字颜色image
: 章节图像imageDark
:在深色模式中使用的章节图像bgImage
:章节背景图像bgImageDark
:在暗深色模式中使用的章节背景图像type
:"order"
,"un-order"
(默认) 或"no-order"
相关信息
关于完整的配置项目,请参见 主页 Frontmatter 配置。
配置案例
---
home: true
title: 主页
icon: home
heroImage: /logo.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/6-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/6-dark.svg
bgImageStyle:
background-attachment: fixed
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
highlights:
- header: 易于安装
image: /assets/image/box.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/3-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/3-dark.svg
highlights:
- title: 运行 <code>pnpm create vuepress-theme-hope hope-project</code> 以创建一个新的主题项目。
- title: 在已有项目根目录下运行 <code>pnpm create vuepress-theme-hope add .</code> 以在项目中添加主题。
- header: Add things you want in markdown
description: We extended the standard commonMark specification and added tons of new features for you.
image: /assets/image/markdown.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
bgImageStyle:
background-repeat: repeat
background-size: initial
highlights:
- title: 标记内容
icon: highlighter
details: 自定义容器,属性,高亮和样式化支持
- title: 文章创作
icon: feather
details: 自定义对齐,角标,片段导入和新的图片格式支持
- title: 丰富你的内容
icon: star
details: Tex,幻灯片,选项卡,上下角标,任务列表和卡片支持
- title: 插入图表
icon: chart-simple
details: Chart.js, ECharts, 流程图和 Mermaid 支持
- title: 展示你的代码和工作
icon: lightbulb
details: 代码选项卡,在线演示,代码交互和 Vue Playground。
- header: 布局
description: 一个带有完整无障碍支持的响应式布局。
image: /assets/image/layout.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
highlights:
- title: 布局增强
icon: object-group
details: 添加路径导航、页脚、改进的导航栏、改进的页面导航等。
link: /zh/guide/layout/
- title: 深色模式
icon: circle-half-stroke
details: 可以自由切换浅色模式与深色模式
link: /zh/guide/interface/darkmode.html
- title: 主题色切换
icon: palette
details: 支持自定义主题色并允许用户在预设的主题颜色之间切换
link: /zh/guide/interface/theme-color.html
- title: 幻灯片页面
icon: person-chalkboard
details: 添加幻灯片页面以显示你喜欢的内容
link: /zh/guide/layout/slides
- title: 更多
icon: ellipsis
details: RTL 布局,打印支持,全局按钮等
link: /guide/interface/others.html
- header: 新功能
image: /assets/image/features.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/1-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/1-dark.svg
highlights:
- 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: 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
- header: Blogging
description: Create personal blog with theme
image: /assets/image/blog.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
highlights:
- title: 博客功能
icon: blog
details: 通过文章的日期、标签和分类展示文章
link: /zh/guide/blog/intro.html
- title: 博客主页
icon: home
details: 全新播客主页
link: /zh/guide/blog/home.html
- title: 博主信息
icon: home
details: 自定义名称、头像、座右铭和社交媒体链接
link: /zh/guide/blog/blogger.html
- title: 时间线
icon: home
details: 在时间线中浏览和通读博文
link: /zh/guide/blog/timeline.html
- header: 高级
description: 增强站点与用户体验的高级功能
image: /assets/image/advanced.svg
bgImage: https://theme-hope-assets.vuejs.press/bg/4-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/4-dark.svg
highlights:
- 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
copyright: false
footer: MIT Licensed | Copyright © 2019-present Mr.Hope
---