VuePress博客优化新增Vssue评论功能

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。本文讲的是如何使用Vssue快速实现评论功能。内置主题因为我使用的是vuepress-theme-reco主题，主题内置评论插件@vuepress-reco/vuepress-plugin-comments，大家可以根据自己的喜好选择Valine或者Vssue。然后介绍一下Vssue。Vssue官网：https://vssue.js.org/zh/Vssue是一个Vue驱动的，基于Issue的评论插件。它支持多种代码托管平台，包括GitHub、GitLab、Bitbucket、Gitee和Gitea。因为它是基于Vue的，所以它可以作为Vue插件使用，很容易集成到Vue应用程序中。您可以点击官网链接进入首页，在页面的评论框中直接体验评论效果。开始1.创建GitHubOAuthApp这里我们使用GitHub作为托管平台，打开GitHub的开发者设置：https://github.com/settings/developers选择“OauthApps”，然后点击“Registeranewapplication”：对于本地测试，我们将主页URL和授权回调URL写为http://localhost:8080。创建应用后，我们点击Generateanewclientsecret来生成Clientsecrets：最后，我们会得到ClientID和Clientsecrets。2.修改config.jsmodule.exports={theme:'reco',themeConfig:{vssueConfig:{platform:'github',owner:'OWNER_OF_REPO',repo:'NAME_OF_REPO',clientId:'YOUR_CLIENT_ID',clientSecret:'YOUR_CLIENT_SECRET',}}}3。效果展示运行项目可以看到效果：但是注意，一开始没有评论的时候，需要点击图片中的“ClicktocreateIssue”才能正常评论。当你点击“CreateIssue”的时候，你对应的Github仓库也会创建一个issue，之后所有的回复都会出现在这个issue中。这是有评论后的效果：4.评论区开启。如果如果想默认不加载评论，只在某些页面显示评论功能，可以在valineConfig或vssueConfig中设置showComment:false，在需要显示评论的页面设置isShowComments:true。如果不设置想设置只对某篇文章开启评论功能，可以在front-matter中设置isShowComments:false问题：多个页面的评论混在一起，如果在多个页面创建评论，会发现所有的评论是在一起的，这是因为Vssue在尝试加载评论时，会根据标签和标题请求对应的Issue，参考Vssue的配置文档：https://vssue.js.org/zh/options/，其实我们可以配置这样的属性s标签，但是因为我们没有配置，所以请求的时候请求是一样的，自然就混在一起了。如果我们只是做一个留言板，是没有问题的，但是比如我的是一个TypeScript文档，我肯定希望每篇文章的评论是分开的，那怎么实现呢？虽然我们可以直接在config.js中这样写：YOUR_CLIENT_ID',clientSecret:'YOUR_CLIENT_SECRET',labels:'xxx'}}}但是如果不能动态设置标签，还是没用。最后我决定不使用reco主题自带的评论插件，而是使用Vssue提供的插件。其实reco内置的评论插件是在Vssue提供的插件的基础上进行了一层封装。如何实现？参考Vssue提供的VuePress指南：1.安装插件yarnadd@vssue/vuepress-plugin-vssue-Dyarnadd@vssue/api-github-v3-D2。使用插件//.vuepress/config.jsmodule.exports={plugins:{'@vssue/vuepress-plugin-vssue':{platform:'github',owner:'OWNER_OF_REPO',repo:'NAME_OF_REPO',clientId:'YOUR_CLIENT_ID',clientSecret:'YOUR_CLIENT_SECRET',},},};3、使用Vssue组件Vssue已经注册为Vue组件，你可以直接在你的VuePressMarkdown文件中使用它。参考Vssue提供的配置文档：Vssue组件支持传入三个属性：titlelabels和title是对应Issue的标识，存放评论.所以请务必在不同的页面为Vssue使用不同的标题。具有相同标题的Vssues将对应于相同的Issue并具有相同的评论。issueId如果设置了issueId，Vssue会直接使用它来决定使用哪个Issue，而不是根据标签和标题去寻找对应的Issue。这将加快Vssue的初始化过程。但在这种情况下，您必须手动创建Issue。如果对应的Issue不存在，Vssue不会尝试为你创建新的Issue。optionspropoptions中设置的属性将覆盖Vue.use()设置的属性。它可以接收VssueOptions中的所有配置。您可以将通过Vue.use()设置的配置视为Vssue的全局/默认配置，将通过prop选项设置的配置视为本地配置。因为我翻译的TypeScript文档也在我的GitHub上同步了，所以希望评论也能同步。为此，我选择使用issueId获取指定issue的评论数据。对于正常使用，我仍然使用自定义标题属性。4.效果展示先看一下效果：问题：调整评论区的位置上图之所以用红色矩形标注是为了让大家注意，因为我们的Vssue组件代码是写在md文件中的,所以comment是和内容相连的，更新时间和上下文链接在最下方。如果评论内容很长，会有点奇怪。那么如果我们想让评论区出现在底部呢？如何实现？我尝试了很多方法，比如挂载时将DOM元素移到底部，在enhanceApp.js中挂载组件，但都以失败告终。最后还是决定不说武功了，直接改reco内置的vuepress-plugin-comments组件源码：1.修改vuepress-plugin-comments源码找到vuepress-plugin-的代码目录-node_modules中注释，修改/.bin/Vssue.vue文件：//在组件中添加一行：issue-id="issueId"//添加issueId计算属性到脚本2.修改config.jsmodule.exports={theme:'reco',themeConfig:{vssueConfig:{platform:'github',owner:'mqyqingfeng',repo:'Blog',clientId:'YOUR_CLIENT_ID',clientSecret:'YOUR_CLIENT_SECRET'},}}3。在md文件中添加issueId属性，在每个markdown文件的最开头添加FrontMatter，并写上文章对应的issueId：---issueId:228---4。效果展示系列文章博客搭建系列是我目前唯一写的一篇系列实战教程，预计20篇左右，讲解如何使用VuePress搭建和优化博客，部署到GitHub、Gitee、私服等平台。本文为第26篇。全系列文章地址：https://github.com/mqyqingfeng/Blog微信：“mqyqingfeng”，加我到SaeYu的唯一读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。