hzzzzzzzq / Blog

这是我记录博客的地方,希望能多写一些技术博客,JS、ES、React、Vue等
14 stars 0 forks source link

个人博客搭建 - 4. Hexo - next 主题下 配置 Gitalk/Disqus 评论系统 #41

Open hzzzzzzzq opened 2 years ago

hzzzzzzzq commented 2 years ago

Hexo - next 主题下 配置 gitalk/Disqus 评论系统

因为在 next 主题下,都已经带有 gitalk 和 Disques 的配置了,所以不需要我们去修改主题内的文件,只与主题编辑文件有关。

gitalk 设置 - 不需要科学上网

主要流程

我们现在开始分步操作教学

image-20220119171611982

点击 Register application 之后,会进入这个页面,在这里 Client IDClient secrets 两个值,是需要存下来的,一会儿要用。

image-20220119172332985

Client secrets 是需要自己创建一个的不会给你自动创建的,点击之后,就会创建一个。

image-20220119172501736

image-20220120083817190

Repository name 仓库名称

添加一个 README file,点击创建就可以了。

如果你看过我的第一篇文章[《hexo-githubPages》](),你就可以直接用你 githubpages 的仓库(yourname.github.io),不需要新建一个仓库了。

配置完成之后,执行

$ hexo clean && hexo g -d # 清理缓存并发布
$ hexo s # 查看本地情况

你在本地或者你部署的网站,找到一篇文章,拉到底部,会看到这样的情况。

image-20220123104356814

点击登陆 github 即可。

error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdocs.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch

首先,确认是不是在本地点击的 使用 Github 登陆,如果本地,请先执行 hexo d,然后去部署的网站上点击登陆。如果还会有其他问题,可以看一下 gitalk 可能出现问题的解决方案

image-20220125135325746

Disqus 设置 - 需要科学上网才能显示

如果您的评论会有许多人,可以选择一个订阅购买,但是如果人数较少,可以选择底下的 Basic.

image-20220119141616333

image-20220119141706654

image-20220119142042285

image-20220119142214404

image-20220119142457348

image-20220119142532859

hexo - next 主题设置

在 next 主题中,以及为我们提供了 next 主题下 Disqus 相关配置

我们只需要编辑主题配置文件下的内容就可以了 ,在配置文件中,搜索 Disques,找到下面的代码。

image-20220119143343104

image-20220119144044662