个人网站一键引入免费开关评论功能 giscus
<h1 id="快速接入">快速接入</h1><p>选择 giscus 连接到的仓库。请确保:</p>
<ol>
<li>
<p>该仓库是公开的,否则访客将无法查看 discussion。</p>
</li>
<li>
<p>giscus app 已安装,否则访客将无法评论和回应。</p>
</li>
<li>
<p>Discussions 功能已在你的仓库中启用。</p>
</li>
</ol>
<h2 id="1创建仓库">1、创建仓库</h2>
<p>github 创建一个公开的仓库</p>
<blockquote>
<p>https://github.com/houbb/my-discussion</p>
</blockquote>
<h2 id="2安装-app">2、安装 app</h2>
<p>https://github.com/apps/giscus/installations 可以选择刚才的仓库,安装。</p>
<h2 id="3启动-discussions">3、启动 Discussions</h2>
<p>第三个,就是到项目的【Setting】=>【General】=>Features 下,勾选上 [√]Discussions</p>
<h2 id="验证">验证</h2>
<p>可以到 https://giscus.app/zh-CN 这个页面验证一下。</p>
<h1 id="配置使用">配置使用</h1>
<p>根据页面提示,选择一下主题、分类。</p>
<p>可以生成对应的脚本,这里是简单的 github light 主题。</p>
<h2 id="脚本">脚本</h2>
<pre><code class="language-js"><script src="https://giscus.app/client.js"
data-repo="houbb/my-discussion"
data-repo-id="R_kgDOPLJ4lA"
data-category="General"
data-category-id="DIC_kwDOPLJ4lM4Cs15z"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="light"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
</code></pre>
<p>直接引用到自己的网站上。</p>
<h2 id="提交看效果">提交看效果</h2>
<p>https://houbb.github.io/2025/07/12/personal-website-discuss</p>
<p>聊天在最下方。</p>
<p>效果还是比较简洁的,类似于 github 聊天。</p><br><br>
来源:https://www.cnblogs.com/houbbBlogs/p/18980439
頁:
[1]