VuePress

VuePress 主题：

1. Default Theme - VuePress 官方提供的主题，简洁大方，适用于一般的文档类型网站。
2. @vuepress/theme-blog - 面向博客型网站的主题，支持文章分类、标签、分页等功能。同时也支持集成评论插件和 Google Analytics 等第三方工具。
3. @vuepress/theme-portfolio - 面向个人作品展示型网站的主题，支持作品分类和作品展示集锦等功能。可以通过定制个人信息卡片来增强自我表现。
4. @vuepress/plugin-blog-theme - 是一个基于 @vuepress/theme-blog 开发的插件，提供更多丰富的博客主题样式和可配性。如果默认主题不能满足需求，可以尝试使用该插件。
5. @vuepress-reco/theme-reco - 是一个功能比较全面的主题，支持侧边栏、搜索、评论、分享等功能，还支持集成 Gitalk、Valine、Disqus、Livere 等常用评论插件。同时也支持多版本文档切换和英文翻译等高级特性。(https://bbs.csdn.net/topics/607761494)

plugin-blog-theme 和 theme-reco 都是 hexo 博客主题，二者的区别主要在以下几个方面：

1. 设计风格：theme-reco 的设计风格比较简单大气，注重阅读体验，适合写技术博客；而 plugin-blog-theme 更加注重视觉效果和排版，适合写摄影、艺术等类型的博客。
2. 功能：theme-reco 内置了多种实用的功能，包括社交媒体链接、归档分类、SEO 优化等；而 plugin-blog-theme 更加专注于博客的表现形式，提供了多种展示图片、视频、音频等媒体内容的方式，并支持自定义文章封面等。
3. 配置难度：相对而言，theme-reco 的配置较为简单，可以通过配置文件和主题内置脚本即可快速实现各种功能；而 plugin-blog-theme 的配置可能需要一些编程基础和前端开发经验，对用户的技术水平要求更高。

综上所述，如果你的主要目的是写技术博客，注重阅读体验，那么选择 theme-reco 会更好；如果你更关注博客的视觉表现和展示效果，并且具备一定的技术能力，那么 plugin-blog-theme 或许更适合你。

search插件： https://blog.sofineday.com/vuepress-fulltext-search.html#通过插件-vuepress-plugin-fulltext-search-实现全文搜索

https://blog.csdn.net/weixin_40026797/article/details/121735175

插件：真棒-vuepress/v1.md at main ·Vuepress/Awesome-Vuepress ·GitHub

主题：Awesome-vuepress/v2.md at Main ·Vuepress/Awesome-Vuepress ·GitHub

https://blog.csdn.net/web13638107087/article/details/123054283

http://www.fenovice.com/doc/vuepress-next/guide/configuration.html#配置文件

https://blog.csdn.net/weixin_34121304/article/details/91451160

https://blog.51cto.com/aiyc/4895736?articleABtest=0

https://segmentfault.com/a/1190000014666185?sort=newest

主题选择：vuepress-theme-vdoing

VuePress Theme Hope

目录： https://github.com/cmaas/markdown-it-table-of-contents

1. 初始化项目

# 初始化项目
yarn init -y # npm init -y (-y免去确认)
# 安装为本地依赖项
npm install -D vuepress
# 或者
yarn add -D vuepress 

 
# 创建一个 docs 目录
mkdir docs
 
# 创建一个 markdown 文件
echo # Hello VuePress > docs/README.md
 
# 给package.json 添加一些 scripts 脚本：{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
# 运行项目
yarn run docs:dev 

2. 配置文件

文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

对于上述的配置，如果你运行起 dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。

右侧菜单栏

https://www.cnblogs.com/dingshaohua/p/16618802.html

npm install -d vuepress-plugin-anchor-right

// docs/.vuepress/config.js
const vuepressPluginAnchorRight = require ('vuepress-plugin-anchor-right') ;

module.exports = {
  ...,
  plugins: [
    [vuepressPluginAnchorRight()],
  ]
};

toc | VuePress (vuejs.org)

3. 参数配置

vuepress 提供了两类配置：

• 配置文件，如 .vuepress/config.js，需要导出一个js对象，一般用于进行全局配置
• YAML front matter，配置在 md 文件头部，其后的内容才作为文档内容被渲染，一般用于针对当前文档的配置

3.1 主题配置

新建完后用户默认看到的页面是非常简陋的，只有一个包含搜索框的 head，vuepress 的强大之处在于可以灵活地进行主题配置，完成配置后一个丰富的技术文档页就构建好了，下面罗列常用的配置项及其功能，具体配置内容参考官方文档。

3.1.1 主页(homepage)

默认主题提供了一个首页（Homepage）布局，用于网站的主页 docs/README.md，使用 YAML front matter 配置。

3.1.2 导航栏(navbar)

themeConfig.nav 导航栏包括 左侧页面标题、搜索框、导航栏链接、多语言支持、仓库链接，支持下拉分组菜单，还支持在全局或单页面中禁用。

3.1.3 侧边栏(sidebar)

themeConfig.sidebar 侧边栏一般用于文档的目录索引，可以直接在 config.js 中配置链接数组，也在页面中配置 sidebar:auto 自动生成侧边栏目录，但是自动生成只能生成当前页。侧边栏还支持以下更加细节的设置：

• 设置嵌套层数
• 是否展开所有
• 标题链接是否激活(禁用可以懒加载提升性能)
• 分组
• 侧边栏分页面定制
• 禁用

目录结构

├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的-该目录中的 Vue 组件将会被自动注册为全局组件)
│   │   ├── theme (可选的-用于存放本地主题)
│   │   │   └── Layout.vue
│   │   ├── public (可选的- 静态资源目录)
│   │   ├── styles (可选的-用于存放样式相关的文件。)
│   │   │   ├── index.styl （将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级）
│   │   │   └── palette.styl（用于重写默认颜色常量，或者设置新的 stylus 颜色常量。）
│   │   ├── templates (可选的, 谨慎配置-- 存储 HTML 模板文件)
│   │   │   ├── dev.html （用于开发环境的 HTML 模板文件。）
│   │   │   └── ssr.html（构建时基于 Vue SSR 的 HTML 模板文件。）
│   │   ├── config.js (可选的- 配置文件的入口文件，也可以是 YML 或 toml。)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide (一般用户都在这个目录下创建网站指南,当然可以不用)
│   │   └── README.md （指南里面的具体内容）
│   └── config.md
│ 
└── package.json 项目初始化时，根目录下自动生成的配置文件,定义了项目的基本配置信息及需要依赖的各个模块、指定运行脚本命令的npm命令行缩写等。

vuepress-theme-hope主题使用

https://blog.csdn.net/wdj_yyds/article/details/125299527

npm init vuepress-theme-hope@next docs

npm run docs:dev