当前位置: 首页 > article >正文

hexo+butterfly博客功能完善和美化(三)---评论功能载入

hexo+butterfly博客功能完善和美化(三)—评论功能载入

文章目录

  • hexo+butterfly博客功能完善和美化(三)---评论功能载入
    • 1.twikoo
    • 2.笔者推荐--giscus
      • 简介
      • 具体步骤
        • 1.创建新仓库
        • 2.安装 Giscus
        • 3.配置仓库 Discuss 部分
        • 4.进入 Giscus 配置
        • 5.博客配置

1.twikoo

基于 Hexo 键入评论功能 | 唐志远

笔者直接跟着这篇做的,配了一个多小时,先别急,看完我说的再去这篇文章

结果就是

关于Vercel被墙导致获取Twikoo评论失败的解决方案 | 唐志远

这个解决方案是,把人外网的域名换成国内的域名,意思是你还得自己有域名,当然如果你自己有域名的话,这个我觉得就挺好的,效果图如下所示,输入昵称和邮箱可以评论

image-20250321160236364

2.笔者推荐–giscus

笔者没买过域名,也懒得去配那些东西

就直接找了一个简单的

看看效果吧先

image-20250321205754865

最吸引我的是不需要额外连接数据库,直接就把评论扔到github的代码仓库了,所以配置起来简单很多,不过你想要评论的话就得登录github账号,这也算是个限制吧

简介

由 GitHub Discussions 驱动的评论系统。让访客借助 GitHub 在你的网站上留下评论和反应吧!本项目受 utterances 强烈启发。

  • 开源。🌏
  • 无跟踪,无广告,永久免费。📡 🚫
  • 无需数据库。全部数据均储存在 GitHub Discussions 中。
  • 支持自定义主题!🌗
  • 支持多种语言。🌐
  • 高度可配置。🔧
  • 自动从 GitHub 拉取新评论与编辑。🔃
  • 可自建服务!🤳

详细介绍请看 Giscus 官网。

具体步骤

1.创建新仓库

名称随意。

创建新仓库

2.安装 Giscus

点击此链接安装:Github Apps - giscus

点击安装

选择要安装的仓库

在这里,你可以选安装到全局也可以选择安装到某一个仓库(这个其实无所谓,后面可以改

然后点击 Install 安装

3.配置仓库 Discuss 部分

打开你的仓库链接,点击 Settings

点击 Settings

用Ctrl+F寻找
找到 Discussion 后,将方框勾选即可。
勾选完毕

随后点击 Set up discussions,进入 Discussions 配置界面。

创建Announcements板块

点击 Start discussion 即可。

好耶撒花!

4.进入 Giscus 配置

传送门:Giscus 官网
找到此处,在输入框内填写你的仓库信息,格式 myusername/myrepo
在这里填写
成功

然后将 页面 ↔️ discussion 映射关系处的选项改为 Discussion 的标题包含页面的 URL
如图所示
分类则选择刚刚创建的 Announcements
选择分类

5.博客配置

配置完上述部分后,去找启动 giscus 处,会看到一段js文件,我们需要复制几个必要的值

如图所示

将上一步复制的数值填到 butterfly 主题配置文件即可

  • 请将启用 giscus 处复制的 data-repo 的值粘贴至 butterfly 主题配置文件中的 repo 处;
  • data-repo-id 处复制的值粘贴值配置文件中的 repo-id 处;
  • data-category-id 处复制的值粘贴至配置文件中的 category-id 处。
# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  theme:
    light: light
    dark: dark
  option:

复制的值不需要引号

最后重新部署就可以看到和笔者一样的效果了,十分的简单


http://www.kler.cn/a/595701.html

相关文章:

  • C#Dictionary值拷贝还是引用
  • IDEA导入jar包后提示无法解析jar包中的类,比如无法解析符号 ‘log4j‘
  • 流式语音识别概述-paddlespeech
  • Solana Anchor 程序接口定义语言(IDL)
  • 【回归算法解析系列09】梯度提升回归树(GBRT, XGBoost, LightGBM)
  • Metasploit 跳板攻击
  • StarRocks 升级注意事项
  • django怎么配置404和500
  • VLAN综合实验报告
  • 【 Kubernetes 风云录 】- MutatingWebhook 实现自动注入
  • 解决 SQL Server 日常使用中的疑难杂症,提供实用解决方案
  • 阿里云国际站代理商:服务器网页如何应对恶意网络爬虫?
  • CI/CD管道
  • Apache Tomcat CVE-2025-24813 安全漏洞
  • MES汽车零部件制造生产监控看板大屏
  • FineBI_实现求当日/月/年回款金额分析
  • electron-builder创建桌面应用
  • 【MCP】如何解决duckduckgo MCP 命令执行错误
  • 数据库—sql语法基础
  • 深入解读《白帽子讲 Web 安全》之业务逻辑安全