🚀 侧边栏
侧边栏的配置在 sidebar.ts中
侧边栏的配置，我们可以分两种情况：全局导航栏、根据每个导航栏栏目分离式导航栏。
💎 全局侧边栏配置
你可以设置侧边栏导航和导航栏的路由一一对应，这样就相当于是全局的侧边栏。
对于侧边栏的具体条目，可以通过设置children: "structure"根据当前目录下的文件名称自动生成。
import { sidebar } from "vuepress-theme-hope"; export default sidebar({ "/": [ "", { text: "React系列", icon: "react", prefix: "react/", children: "structure", }, { text: "Vue系列", icon: "vue", prefix: "vue/", children: "structure", }, { text: "Vite系列", icon: "tool", prefix: "vite/", children: "structure", }, { text: "新框架尝鲜系列", icon: "geometry", prefix: "framework/", children: "structure", }, { text: "杂谈", icon: "study", prefix: "posts/", children: "structure", }, // "intro", // "slides", ], });
此时页面侧边栏如下图
💎 分离式导航栏
分离式菜单配置更简洁，如下所示：当设置structure时，默认根据目录下的文件自动生成侧边栏。
import { sidebar } from "vuepress-theme-hope"; export default sidebar({ "/react/": "structure", "/framework/": "structure", "/vite/": "structure", "/vue/": "structure", "/posts/": "structure", });
💎 自动生成目录页面
另外，我们还根据文件夹下的文件列表自动为每个文件夹生成目录页面。我们只需要在theme.ts中添加如下设置。
plugins: { autoCatalog: { index: true }, }
就可以自动生成目录页面了。例如：
🚀 搜索功能
该主题内置了几种常见搜索插件的支持，你只需下载你喜欢的插件和配置文件即可，我使用的是vuepress-plugin-search-pro插件，配置参考的官方配置。
plugins: [ searchProPlugin({ // 索引全部内容 indexContent: true, // 为分类和标签添加索引 customFields: [ { getter: (page) => page.frontmatter.category as any, formatter: "分类：$content", }, { getter: (page) => page.frontmatter.tag as any, formatter: "标签：$content", }, ], }), ]
效果如下：
🚀 自动部署
该主题已经自动添加了workflows文件，你只需添加仓库，修改触发分支。
不过我在部署时遇到问题：
Dependencies lock file is not found in /home/{username}/runners.../repository_name. Supported file patterns: package-lock.json,yarn.lock
需要修改下workflows文件：去除npm cache设置
- name: 设置 Node.js uses: actions/setup-node@v3 with: node-version: 18 # cache: npm
cicd执行成功后，会多一个部署gh-pages分支，这是文件流中配置的，你可以修改
- name: 部署文档 uses: JamesIves/github-pages-deploy-action@v4 with: # 这是文档部署到的分支名称 branch: gh-pages folder: src/.vuepress/dist
接着最重要的一步，到仓库的设置页面设置如下的内容：
该设置的意思是，将选中的分支内容部署在github自带的页面服务中。
接着点击save按钮，就可以去对应的站点访问了。
我的站点：https://mmdctjj.github.io/blogs2/
🚀 添加评论功能
不同的插件，评论的实现原理不同，我接触过最早的原理是通过将评论信息映射到仓库的issue中。
然而，后来开始流行Discussions，这也是vuepress-theme-hope推荐的方式，
❝如果你的博客面向程序员，请使用
❞Giscus，面向大众请选择Waline, 所以我选择了Giscus
首先需要你创建一个空的仓库。其次，由于评论需要用户登录到GitHub，所以，我们还需要提供登录应用的服务。
这里我们不用担心，因为Github为我们提供了简单的登陆应用的功能：giscus,
首先安装Giscus：https://github.com/apps/giscus
点击install按钮，在配置详情页中选择对应的生效仓库。（这里我选择仅仅对评论仓库生效）
然后回到评论仓库，点击seething，选中Feature下的Discussions
点击set up discussions，默认的文本不需要修改，点击提交即可出现如下页面，说明该功能启用成功。
接着，我们前往https://giscus.app/zh-CN 设置你的仓库和分类
在启用栏目复制以下几个信息。
接着将以下信息复到theme.ts即可：
plugins: { comment: { // You should generate and use your own comment service provider: "Giscus", repo: "mmdctjj/blogs-comments", repoId: "xxxx", // 替换下 category: "Announcements", categoryId: "xxxx" // 替换下 }, }
此时当我们评论之后，在评论仓库查看，
🎉 最后
vuepress-theme-hope 主题通过默认的配置就提供了丰富的开箱即用的功能，使得配置体验相比较与vuepress-theme-reco有了明显的提升。这是我替换博客主题最大的体验，
今天的分享就到这了，如果文中有错误的地方，还请在评论中告诉我，感激不尽。
