今天做了什么？

博客搭完了基础功能，今天来加两个让博客活起来的东西——评论区 💬 和视觉特效 ✨

📌 一、评论系统：Giscus

啥是 Giscus？简单说——用 GitHub Discussions 当后台的评论区。

别人在我博客留言 → 自动变成 GitHub 仓库里的一个 Discussion → 数据在我自己手里，不依赖第三方平台。

配置步骤（备忘）：

  1. 仓库 Settings → 开启 Discussions
  2. 安装 Giscus App 授权仓库访问
  3. 去 giscus.app 获取 repo_id 和 category_id
  4. 填入 _config.butterfly.yml
# 配置长这样
comments:
  use: giscus

giscus:
  repo: yukina-2006/yukina-2006.github.io
  repo_id: R_kgDOTZEXBw
  category_id: DIC_kwDOTZEXB84DCI79

小贴士： Giscus 默认用 GitHub 登录，留言时用户名会直接显示，不需要再注册一堆账号，省心。

✨ 二、页面美化：让博客有点生气

今天开了两个效果：

1️⃣ 背景蛛网效果 — canvas_nest
位置 页面背景，线条连接各元素
配置 canvas_nest.enable: true
效果 像蜘蛛网一样的线条在背景浮动

（配一张截图放这里效果会更棒）

2️⃣ 点击爱心 — click_heart

在页面任意位置点一下就会冒出一颗：

参数 值
颜色 默认红色渐变 🖤→❤️
手机端 mobile: true 也开启 
click_heart:
  enable: true
  mobile: true  # 手机也能点

🛠️ 附：今日对比

功能 改之前 改之后
评论区 ❌ 没有 ✅ Giscus
背景连线 ❌ 空白背景 🕸️ 蛛网动画
点击特效 ❌ 啥也没有 🖤 爱心

🎯 总结

“博客是写给自己的，但评论区是留给朋友的。”

今天这两件事让博客不再只是一个单向输出的地方——朋友可以留言互动，页面也不再冷冰冰的。

明天还想继续折腾：

  • 评论区
  • 背景特效
  • 副标题打字机 （也许下次）
  • PWA 离线支持
  • 点击爱心

「搭建博客第五天，还在慢慢变成想要的样子。」

Markdown 炫技小课堂 📝（本文用到的花样）：

语法 效果
**加粗** 加粗
*斜体* 斜体
~~删除线~~ 删除线
`行内代码` 行内代码
> 引用 灰色引用块
--- 分割线
[链接](url) 点击跳转
- [x] 已完成 ✅ 已完成

以上就是今天的全部内容~ 🎉

—— yukina 写于 2026.07.28