主题介绍

主题初衷

VuePress 默认主题只是一个提供基础文档布局的主题。 例如：它不会注入元标记或生成用于 SEO 优化的站点地图。此外，虽然 VuePress 在一定程度上扩展了 Markdown 语法，但仍然缺少一些常用的功能，例如文本对齐、标记、流程图、公式、演示等，同时默认主题提供的一些功能较弱或缺失，如图片预览、代码块复制、目录页等。

在这种情况下，vuepress-theme-hope 和一些系列插件就应运诞生。

与默认主题相比，我们不仅大大改进了美观度，而且通过主题插件为 VuePress 提供了全方位的增强功能。

设计目标

强大且独立的功能

我们将每个功能提取到一个插件中，以便用户可以在其他主题中使用它们或单独自定义它们的行为。

最小化配置

如果可能，所有功能都会尝试使用默认值，因此你可以在零配置或最小配置下使用它们。

这有助于减少你的迁移或学习成本，同时直接享受它们的便利。

改进的布局

主题界面已经完全重构，以提供可定制和漂亮的布局。

可拆分

借助 Vue3 的组合 API，主题在保持强大的同时充分实现了“Tree-shaking”。

主题将只运行你想要的功能，而不会因其他功能而变慢或影响打包大小。

因何强大

更丰富的内容

主题为 Markdown 提供了大量的扩展语法支持，让你在正文插入更多的内容。

• 如果你是一名文学爱好者想放置一些随笔，主题提供了 自定义对齐 与 脚注。

• 我们对 图片进行了一些内置增强。

• 如果你希望存放一些知识笔记，主题提供了 自定义容器、标记、徽章、任务列表 与 公式 支持。

• 如果你是一名程序员需要大量展示代码与 demo，本主题为代码块提供了浅色与深色两种主题，代码组 与 "一键复制" 按钮。同时我们还提供 代码演示，Playground Kotlin Playground 和 Vue Playground 功能，方便你展示自己的 Vue、React 组件或者其他 demo。

• 如果你需要提供产品文档与展示，主题提供了 选项卡、幻灯片、图表、echarts、流程图 与 Mermaid 图表 功能。

• 为了重新组织您的内容，主题提供了文件包含功能。

• 为了设置内容的样式，主题提供了下标和上标、属性设置和 [样式化](../markdown/stylize. md) 功能，并为您提供了很多有用的组件。

总之，任何人都可以享受 Markdown 增强语法带来的便利。

UI 改进

• 夜间模式支持

• 图标支持

• 自定义代码块主题

• 主题颜色: 允许您在浏览过程中动态切换

• 更多:

  全屏按钮、返回顶部按钮、打印按钮、无障碍完整支持 和 RTL 布局。

布局改进

• 导航栏:

  • 支持图标和路径前缀。
  • 改进了移动设备上的布局。

• 侧边栏:

  • 支持图标和路径前缀。
  • 从 页面标题 和 文件结构 自动生成。

• 全新主页外观，支持特性与亮点

• 更多:

  增加 路径导航, 页面标题 与 页脚 支持。

页面元数据

• 页面信息 包括：

  • 作者
  • 书写日期
  • 字数统计和预计阅读时间
  • 标签和类别
  • 浏览量

• 贡献者和最后更新时间

• 编辑链接

功能

• 图片预览 支持缩放、拖动、幻灯片浏览、分享和下载

• 自动生成目录页

• 搜索功能

  • 基于 docsearch 的爬虫搜索支持
  • 基于 slimsearch 的强大客户端搜索支持。

• 页面加密 功能来限制访问。

• 复制时 附加版权信息，或直接禁用页面复制和选择

• 搜索引擎优化

  • SEO 增强 完全支持 OGP 和 JSON-LD 协议

  • 站点地图生成

  • PWA 功能

完整的博客支持

该主题支持博客，有置顶功能的文章列表，星标文章，自动摘录生成，自动摘要。

• 支持类别和标签、时间线。

• 全新的博客主页。

• 提供 评论功能 以便你可以与你的访客交流。

• 支持创建 Feed，以便他人可以订阅你的网站。

内置插件 🧩

本主题包含了以下内建插件，如果有需要，你也可以单独进行使用或搭配其他主题。

• vuepress-plugin-auto-catalog: VuePress2 的目录自动生成插件
• vuepress-plugin-blog2: VuePress2 的博客插件
• vuepress-plugin-comment2: 评论与浏览量功能
• vuepress-plugin-components: 提供一些开箱即用的插件
• vuepress-plugin-copy-code2: 提供一键复制代码块功能。
• vuepress-plugin-copyright2: 在用户复制时追加版权信息，或禁用站点的复制与选择。
• vuepress-plugin-feed2: Feed 支持
• vuepress-plugin-md-enhance: 提供更多 Markdown 语法
• vuepress-plugin-photo-swipe: 基于 Photo Swipe 的图片浏览插件
• vuepress-plugin-pwa2: 增强的 PWA 支持
• vuepress-plugin-reading-time2: 阅读时间与字数统计
• vuepress-plugin-sass-palette: 面向全部插件和主题的 Sass 配置插件
• vuepress-plugin-seo2: SEO 增强插件
• vuepress-plugin-sitemap2: Sitemap 插件

提示

这里还有一些其他没有被主题捆绑的插件，你可以根据自己的需求自行启用。

• vuepress-plugin-lightgallery: 基于 lightgallery 图片浏览插件
• vuepress-plugin-redirect: 重定向插件
• vuepress-plugin-remove-pwa: 移除 PWA 插件
• vuepress-plugin-search-pro: 客户端搜索插件