我学会用Giscus给网站配置评论啦！🎉（一把辛酸泪版）

📢 前方剧透：本文将用3000字详细描述如何把简单操作搞成史诗级冒险，并附赠「从暴躁到傻笑」的情绪过山车体验~

🎮 Level 1：信心满满地打开文档

“Giscus？听起来比Giscus更难的是……读懂它的文档！”

1. 第一步：创建GitHub仓库

   • 我：”这还不简单？新建仓库取名comments-for-my-awesome-blog，完美！”
   • GitHub：”仓库初始化成功……但您确定要用这个名字写求职简历吗？”

2. 第二步：安装giscus包

   • 终端里输入npm install giscus，结果……
   • 💻：”您确定要污染全局环境？检测到10086个依赖冲突！”
   • 我：”（双手合十）神明啊！我只想要一个评论框而已……”

🤯 Level 2：和GitHub OAuth玩猜谜游戏

“请问以下哪项不属于OAuth配置参数？A) Client ID B) 祖传秘方 C) 仓库地址 D) 猫主子的生日”

1. 生成OAuth App时：

   • ✅ 填了Homepage URL（虽然是我的个人博客，但莫名羞耻）
   • ❌ 授权回调地址栏空了五分钟，最后填了https://我的网站.com/其实我也不知道填啥
   • GitHub：”您确定这不是在申请火星探测器权限？”

2. 获取client_id和client_secret：

   • 我：”这两个参数应该放在……配置文件里？环境变量里？还是刻在石碑上？”
   • 最终解决方案：截图发到手机，再手动输入（别问为什么）

🛠️ Level 3：部署时的大型翻车现场

“代码复制粘贴一时爽，调BUG火葬场”

1. 插入评论组件：

   • 官方文档：”只需三行代码即可召唤神龙！”
   • 我的代码：

     1 2 3 4 5 6 7 8 9 10 11 12 13 14

     <!-- 神秘消失的第一行代码 --> <script src="https://giscus.app/client.js" data-repo="用户/仓库" data-repo-id="12345678" data-category="Comments" data-category-id="123456" data-mapping="pathname" data-strict="1" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="zh-CN"> </script>

   • 效果：页面底部惊现空白区域，仿佛在说”你来打我呀~”

2. 修改giscus的文件：
   果然不能直接全选粘贴进去，原来有许多代码

   • 将源代码一个一个对照粘贴进去
   • 结果：评论框变成会发光的芭比粉，连夜改回默认主题

💡 Level 4：柳暗花明靠玄学

“当所有办法都失败时，试试重启电脑……和人生”

1. 最终解决方案：

   • 第6次检查参数时发现：
     • data-repo应该填用户名/仓库名而不是用户名/仓库名.git
     • data-category-id要和GitHub Issues里的分类ID完全一致
   • 我：”所以前5次都在和空气对线？？”

2. 成功瞬间：

   • 刷新页面，评论框如魔法般出现！
   • 立刻用小号发测试评论：”博主是傻瓜！”
   • 看到评论同步到GitHub Issues时，差点感动到给显示器磕头

🎊 通关奖励：奇怪的成就感

1. 新技能解锁：

   • ✅ 能用Markdown写评论
   • ✅ 掌握GitHub Issues高级搜索
   • ✅ 学会用开发者工具抓包（虽然只会看Network标签）

2. 副作用：

   • 现在看到任何网站都想Ctrl+U检查有没有用Giscus
   • 产生错觉：”我也能成为全栈工程师！”（持续5分钟后清醒）

📝 最终配置代码（供后人乘凉）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<% if (
        theme.comment.system==='giscus' &&
        theme.comment.config.giscus.repo &&
        theme.comment.config.giscus.repo_id &&
        theme.comment.config.giscus.category_id
    ) { %>
    <div id="giscus-container"></div>
    <script <%= theme.global.single_page === true && 'data-swup-reload-script' %> defer>
        async function loadGiscus() {
            const giscusConfig = {
                'src': 'https://giscus.app/client.js',
                'data-repo': 'lemon2003/gitalk',
                'data-repo-id': 'R_kgDOOM7rWQ',
                'data-category': 'Announcements',
                'data-category-id': 'DIC_kwDOOM7rWc4CoXWC',
                'data-mapping': 'pathname',
                'data-strict': '0',
                'data-reactions-enabled': '1',
                'data-emit-metadata': '0',
                'data-theme': 'preferred_color_scheme',
                'data-lang': 'zh-CN',
                'data-input-position': 'bottom',
                'data-loading': 'lazy',
                'crossorigin': 'anonymous',
                'async': true
            }
            const giscusScript = document.createElement('script');
            for (const key in giscusConfig) {
                giscusScript.setAttribute(key, giscusConfig[key]);
            }
            document.getElementById('giscus-container').appendChild(giscusScript);
        }
        if ('<%= theme.global.single_page %>') {
            let loadGiscusTimeout = setTimeout(() => {
                loadGiscus();
                clearTimeout(loadGiscusTimeout);
            }, 1000);
        } else {
            document.addEventListener('DOMContentLoaded', loadGiscus);
        }
    </script>
<% } %>

🎬 彩蛋时间：
现在我的网站评论区已经可以：
✅ 用emoji反应
✅ 引用其他评论
✅ 收到GitHub通知
❌ 阻止我妈评论我的穿搭（这个功能求Giscus赶紧开发！）

💌 写在最后：
如果你也成功配置了Giscus——击掌！👏
如果还在挣扎——别放弃！毕竟我连猫都教会用键盘了（虽然它只学会了打”zzzz”）🐱💻