Site updated: 2023-12-10 23:02:37

archives/2023/04/index.html

@@ -153,7 +153,7 @@ <h1 class="p-name">青橙日志</h1>
 
  <span>
 
- <a class="" href="/posts/giscus/">Hexo博客使用giscus评论系统教程</a>
+ <a class="" href="/posts/giscus/">Hexo博客教程 - 使用giscus评论系统通用方法</a>
 
 
 

archives/2023/index.html

@@ -249,7 +249,7 @@ <h1 class="p-name">青橙日志</h1>
 
  <span>
 
- <a class="" href="/posts/giscus/">Hexo博客使用giscus评论系统教程</a>
+ <a class="" href="/posts/giscus/">Hexo博客教程 - 使用giscus评论系统通用方法</a>
 
 
 

archives/index.html

@@ -249,7 +249,7 @@ <h1 class="p-name">青橙日志</h1>
 
  <span>
 
- <a class="" href="/posts/giscus/">Hexo博客使用giscus评论系统教程</a>
+ <a class="" href="/posts/giscus/">Hexo博客教程 - 使用giscus评论系统通用方法</a>
 
 
 

baidusitemap.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+ <url>
+ <loc>http://blog.webrelay.cn/posts/giscus/</loc>
+ <lastmod>2023-12-10</lastmod>
+ </url>
  <url>
  <loc>http://blog.webrelay.cn/posts/js-string-methods/</loc>
  <lastmod>2023-12-05</lastmod>
@@ -20,8 +24,4 @@
  <loc>http://blog.webrelay.cn/posts/minecraft-server/</loc>
  <lastmod>2023-11-30</lastmod>
  </url>
- <url>
- <loc>http://blog.webrelay.cn/posts/giscus/</loc>
- <lastmod>2023-11-21</lastmod>
- </url>
 </urlset> 

posts/alist/index.html

@@ -353,11 +353,11 @@ <h2 id="相关链接"><a href="#相关链接" class="headerlink" title="相关
  data-repo="orangelegy/orangelegy.github.io"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzNjE1MDg0NzE="
  data-category="Announcements"
- data-category-id="DIC_kwDOFYwud84CbM5z"
- data-mapping="pathname"
+ data-category-id="DIC_kwDOFYwud84CbM50"
+ data-mapping="title"
  data-strict="0"
  data-reactions-enabled="1"
- data-emit-metadata="0"
+ data-emit-metadata="1"
  data-input-position="top"
  data-theme="noborder_dark"
  data-lang="zh-CN"

posts/js-array-methods/index.html

@@ -237,11 +237,11 @@ <h3 id="迭代和查找方法："><a href="#迭代和查找方法：" class="hea
  data-repo="orangelegy/orangelegy.github.io"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzNjE1MDg0NzE="
  data-category="Announcements"
- data-category-id="DIC_kwDOFYwud84CbM5z"
- data-mapping="pathname"
+ data-category-id="DIC_kwDOFYwud84CbM50"
+ data-mapping="title"
  data-strict="0"
  data-reactions-enabled="1"
- data-emit-metadata="0"
+ data-emit-metadata="1"
  data-input-position="top"
  data-theme="noborder_dark"
  data-lang="zh-CN"

posts/js-string-methods/index.html

@@ -268,11 +268,11 @@ <h1 class="posttitle p-name" itemprop="name headline">
  data-repo="orangelegy/orangelegy.github.io"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzNjE1MDg0NzE="
  data-category="Announcements"
- data-category-id="DIC_kwDOFYwud84CbM5z"
- data-mapping="pathname"
+ data-category-id="DIC_kwDOFYwud84CbM50"
+ data-mapping="title"
  data-strict="0"
  data-reactions-enabled="1"
- data-emit-metadata="0"
+ data-emit-metadata="1"
  data-input-position="top"
  data-theme="noborder_dark"
  data-lang="zh-CN"

posts/minecraft-server/index.html

@@ -346,11 +346,11 @@ <h2 id="🎉-成功进入游戏-🥳"><a href="#🎉-成功进入游戏-🥳" cl
  data-repo="orangelegy/orangelegy.github.io"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzNjE1MDg0NzE="
  data-category="Announcements"
- data-category-id="DIC_kwDOFYwud84CbM5z"
- data-mapping="pathname"
+ data-category-id="DIC_kwDOFYwud84CbM50"
+ data-mapping="title"
  data-strict="0"
  data-reactions-enabled="1"
- data-emit-metadata="0"
+ data-emit-metadata="1"
  data-input-position="top"
  data-theme="noborder_dark"
  data-lang="zh-CN"

posts/web-font/index.html

@@ -353,11 +353,11 @@ <h2 id="字体格式的建议"><a href="#字体格式的建议" class="headerlin
  data-repo="orangelegy/orangelegy.github.io"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzNjE1MDg0NzE="
  data-category="Announcements"
- data-category-id="DIC_kwDOFYwud84CbM5z"
- data-mapping="pathname"
+ data-category-id="DIC_kwDOFYwud84CbM50"
+ data-mapping="title"
  data-strict="0"
  data-reactions-enabled="1"
- data-emit-metadata="0"
+ data-emit-metadata="1"
  data-input-position="top"
  data-theme="noborder_dark"
  data-lang="zh-CN"

search.xml

@@ -121,18 +121,20 @@
 
 
  <entry>
- <title>Hexo博客使用giscus评论系统教程</title>
+ <title>Hexo博客教程 - 使用giscus评论系统通用方法</title>
  <link href="/posts/giscus/"/>
  <url>/posts/giscus/</url>
 
- <content type="html"><![CDATA[<p><strong>giscus</strong> 是一个开源的评论系统，可以与 Github Discussions 集成。它提供了一个轻量级、易于使用和高度可配置的评论解决方案，用户可以将其添加到他们的静态网站或博客上，以使其变得更加交互式和社区化。giscus 支持多种语言和主题，并允许用户自定义外观。</p><hr><h2 id="一、选择理由"><a href="#一、选择理由" class="headerlink" title="一、选择理由"></a>一、选择理由</h2><ul><li>配置简单，自动生成代码添加即可，不需要写一行代码，也不需要改原有的代码</li><li>国内可用，比gitalk更加强大，与Github关联，自动从Discussions中拉取最新评论</li><li>干净简洁，无广告、永久免费，使用GitHub登录即可发表评论</li><li>配置自由，可自定义功能、主题等，并支持多种语言</li></ul><hr><h2 id="二、配置"><a href="#二、配置" class="headerlink" title="二、配置"></a>二、配置</h2><h3 id="🌟打开自己的GitHub，选择博客所在仓库或可新建一个仓库："><a href="#🌟打开自己的GitHub，选择博客所在仓库或可新建一个仓库：" class="headerlink" title="🌟打开自己的GitHub，选择博客所在仓库或可新建一个仓库："></a>🌟打开自己的GitHub，选择博客所在仓库或可新建一个仓库：</h3><ul><li><p><strong>确保仓库是公开的（<code>Public</code>）</strong></p><p>如果你的仓库是<code>Private</code>，在仓库中点击最右边的<code>Settings</code> - <code>General</code>，划到最下方，选择<code>change visibility</code> - <code>change to public</code></p><p><a href="https://pic.webrelay.cn/img/giscus1.png"><img src="https://pic.webrelay.cn/img/giscus1.png" alt="img"></a></p><p><a href="https://pic.webrelay.cn/img/giscus2.png"><img src="https://pic.webrelay.cn/img/giscus2.png" alt="img"></a></p></li><li><p><strong>确保仓库开启了 Discussions</strong></p><p>如果你的仓库没有开启<code>Discussions</code>，同样点击<code>Settings</code> - <code>General</code>，勾选<code>Discussions</code>即可</p><p><a href="https://pic.webrelay.cn/img/giscus3.png"><img src="https://pic.webrelay.cn/img/giscus3.png" alt="img"></a></p></li><li><p><strong>确保安装了 giscus app</strong></p><blockquote><p><strong><a href="https://github.com/apps/giscus">giscus app</a>👈点击安装</strong></p></blockquote><p>可选择指定仓库，默认是访问所有仓库</p></li></ul><h3 id="⚙️打开官方配置页面，生成代码"><a href="#⚙️打开官方配置页面，生成代码" class="headerlink" title="⚙️打开官方配置页面，生成代码"></a>⚙️打开官方配置页面，生成代码</h3><blockquote><p><strong><a href="https://giscus.app/zh-CN">giscus</a> 👈点击打开</strong></p></blockquote><p>配置以下内容：</p><ul><li><p><strong>语言</strong>：选择评论框所显示的语言</p><p><a href="https://pic.webrelay.cn/img/giscus4.png"><img src="https://pic.webrelay.cn/img/giscus4.png" alt="img"></a></p></li><li><p><strong>仓库</strong>：填写格式：<code>你的用户名/你的仓库名</code>，配置好前面的这一步直接会显示成功</p><p><a href="https://pic.webrelay.cn/img/giscus5.png"><img src="https://pic.webrelay.cn/img/giscus5.png" alt="img"></a></p></li><li><p><strong>页面 ↔️ discussion 映射关系</strong>，推荐选择<code>title</code>，这样就会在GitHub Discussions里生成一个你文章名命名的讨论，这个讨论即自己的评论区，跟你的那篇文章是绑定的，确保不会出现我的A文章加载了B文章的评论区的情况。如果B文章并未创建讨论，那么直接在B文章评论区中评论会自动在Discussions中创建讨论。</p><p><a href="https://pic.webrelay.cn/img/giscus6.png"><img src="https://pic.webrelay.cn/img/giscus6.png" alt="img"></a></p></li><li><p><strong>Discussion 分类</strong>：推荐选择<code>General</code>即可</p><p><a href="https://pic.webrelay.cn/img/giscus7.png"><img src="https://pic.webrelay.cn/img/giscus7.png" alt="img"></a></p></li><li><p><strong>特性</strong>：帖子上的反应可根据喜好开启，评论框在上方建议开启，不然每次评论都要划到最下面，懒加载也推荐开启</p><p><a href="https://pic.webrelay.cn/img/giscus8.png"><img src="https://pic.webrelay.cn/img/giscus8.png" alt="img"></a></p><p>反应功能预览：</p><p><a href="https://pic.webrelay.cn/img/giscus9.png"><img src="https://pic.webrelay.cn/img/giscus9.png" alt="img"></a></p></li><li><p><strong>主题</strong>：推荐与你的博客风格一致的主题，不然会很突兀</p><p><a href="https://pic.webrelay.cn/img/giscus10.png"><img src="https://pic.webrelay.cn/img/giscus10.png" alt="img"></a></p></li></ul><hr><h2 id="三、启用"><a href="#三、启用" class="headerlink" title="三、启用"></a>三、启用</h2><h3 id="🚀获取代码"><a href="#🚀获取代码" class="headerlink" title="🚀获取代码"></a>🚀获取代码</h3><ul><li><p>填写好上面的配置之后giscus会自动给我们生成代码，我们点击右上角的复制按钮复制代码</p><p><a href="https://pic.webrelay.cn/img/giscus11.png"><img src="https://pic.webrelay.cn/img/giscus11.png" alt="img"></a></p></li></ul><h3 id="🔧布置代码"><a href="#🔧布置代码" class="headerlink" title="🔧布置代码"></a>🔧布置代码</h3><ul><li><p>在你的博客主题布局文件内寻找合适的位置粘贴，以 <a href="https://ppoffice.github.io/hexo-theme-hueman/"><strong>Hueman</strong></a> 主题为例，在<code>hexo目录</code>&#x2F;<code>themes</code>&#x2F;<code>hueman</code>&#x2F;<code>layout</code>&#x2F;<code>common</code>下，打开<code>article.ejs</code>，然后粘贴到以下位置：</p><p><a href="https://pic.webrelay.cn/img/giscus12.png"><img src="https://pic.webrelay.cn/img/giscus12.png" alt="img"></a></p><p><strong>更多主题的配置方法请留言告诉我</strong></p></li></ul><h3 id="💡本地预览"><a href="#💡本地预览" class="headerlink" title="💡本地预览"></a>💡本地预览</h3><ul><li><p>在终端中输入以下命令：</p><p><code>hexo cl</code></p><p><code>hexo g</code></p><p><code>hexo s</code></p></li><li><p>打开 <code>http://localhost:4000/</code>，本地预览效果如下：</p><p><a href="https://pic.webrelay.cn/img/giscus13.png"><img src="https://pic.webrelay.cn/img/giscus13.png" alt="img"></a></p></li></ul><h3 id="🎉结束"><a href="#🎉结束" class="headerlink" title="🎉结束"></a>🎉结束</h3><ul><li>使用 <code>hexo d</code> 命令推送即可</li></ul><blockquote><p>相关链接：</p><p>giscus：<a href="https://giscus.app/zh-CN">https://giscus.app/zh-CN</a></p><p>Hueman：<a href="https://ppoffice.github.io/hexo-theme-hueman/">https://ppoffice.github.io/hexo-theme-hueman/</a></p><p>网络驿站：<a href="https://webrelay.cn/">https://webrelay.cn/</a></p></blockquote>]]></content>
+ <content type="html"><![CDATA[<h2 id="一、配置"><a href="#一、配置" class="headerlink" title="一、配置"></a>一、配置</h2><h3 id="🌟打开自己的GitHub，选择博客所在仓库或新建仓库："><a href="#🌟打开自己的GitHub，选择博客所在仓库或新建仓库：" class="headerlink" title="🌟打开自己的GitHub，选择博客所在仓库或新建仓库："></a>🌟打开自己的GitHub，选择博客所在仓库或新建仓库：</h3><ul><li><p><strong>确保仓库是公开的（<code>Public</code>）</strong></p><p>如果你的仓库是<code>Private</code>，在仓库中点击最右边的<code>Settings</code> - <code>General</code>，划到最下方，选择<code>change visibility</code> - <code>change to public</code></p><p><a href="https://pic.webrelay.cn/img/giscus1.png"><img src="https://pic.webrelay.cn/img/giscus1.png" alt="img"></a></p><p><a href="https://pic.webrelay.cn/img/giscus2.png"><img src="https://pic.webrelay.cn/img/giscus2.png" alt="img"></a></p></li><li><p><strong>确保仓库开启了 Discussions</strong></p><p>如果你的仓库没有开启<code>Discussions</code>，同样点击<code>Settings</code> - <code>General</code>，勾选<code>Discussions</code>即可</p><p><a href="https://pic.webrelay.cn/img/giscus3.png"><img src="https://pic.webrelay.cn/img/giscus3.png" alt="img"></a></p></li><li><p><strong>确保安装了 giscus app</strong></p><blockquote><p><strong><a href="https://github.com/apps/giscus">giscus app</a>👈点击安装</strong></p></blockquote><p>可选择指定仓库，默认访问用户所有仓库</p></li></ul><h3 id="⚙️打开官方配置页面，生成代码"><a href="#⚙️打开官方配置页面，生成代码" class="headerlink" title="⚙️打开官方配置页面，生成代码"></a>⚙️打开官方配置页面，生成代码</h3><blockquote><p><strong><a href="https://giscus.app/zh-CN">giscus</a> 👈点击打开</strong></p></blockquote><p>配置以下内容：</p><ul><li><p><strong>语言</strong>：选择评论框所显示的语言</p><p><a href="https://pic.webrelay.cn/img/giscus4.png"><img src="https://pic.webrelay.cn/img/giscus4.png" alt="img"></a></p></li><li><p><strong>仓库</strong>：填写格式：<code>你的用户名/你的仓库名</code>，配置好前面的这一步直接会显示成功</p><p><a href="https://pic.webrelay.cn/img/giscus5.png"><img src="https://pic.webrelay.cn/img/giscus5.png" alt="img"></a></p></li><li><p><strong>页面 ↔️ discussion 映射关系</strong>，推荐选择<code>title</code>，这样就会在GitHub Discussions里生成一个你文章名命名的讨论，这个讨论即自己的评论区，跟你的那篇文章是绑定的，确保不会出现我的A文章加载了B文章的评论区的情况。如果B文章并未创建讨论，那么直接在B文章评论区中评论会自动在Discussions中创建讨论。</p><p><a href="https://pic.webrelay.cn/img/giscus6.png"><img src="https://pic.webrelay.cn/img/giscus6.png" alt="img"></a></p></li><li><p><strong>Discussion 分类</strong>：推荐选择<code>General</code>即可</p><p><a href="https://pic.webrelay.cn/img/giscus7.png"><img src="https://pic.webrelay.cn/img/giscus7.png" alt="img"></a></p></li><li><p><strong>特性</strong>：帖子上的反应可根据喜好开启，评论框在上方建议开启，不然每次评论都要划到最下面，懒加载也推荐开启</p><p><a href="https://pic.webrelay.cn/img/giscus8.png"><img src="https://pic.webrelay.cn/img/giscus8.png" alt="img"></a></p><p>反应功能预览：</p><p><a href="https://pic.webrelay.cn/img/giscus9.png"><img src="https://pic.webrelay.cn/img/giscus9.png" alt="img"></a></p></li><li><p><strong>主题</strong>：推荐与你的博客风格一致的主题，不然会很突兀</p><p><a href="https://pic.webrelay.cn/img/giscus10.png"><img src="https://pic.webrelay.cn/img/giscus10.png" alt="img"></a></p></li></ul><hr><h2 id="二、启用"><a href="#二、启用" class="headerlink" title="二、启用"></a>二、启用</h2><h3 id="🚀获取代码"><a href="#🚀获取代码" class="headerlink" title="🚀获取代码"></a>🚀获取代码</h3><ul><li><p>填写好上面的配置之后giscus会自动给我们生成代码，我们点击右上角的复制按钮复制代码</p><p><a href="https://pic.webrelay.cn/img/giscus11.png"><img src="https://pic.webrelay.cn/img/giscus11.png" alt="img"></a></p></li></ul><h3 id="🔧布置代码"><a href="#🔧布置代码" class="headerlink" title="🔧布置代码"></a>🔧布置代码</h3><ul><li><strong>主题支持giscus</strong></li></ul><p>将代码里的参数填写到config文件里完成配置。</p><ul><li><strong>主题不支持giscus</strong></li></ul><p>将代码粘贴到正确的页面结构文件的合适位置中。</p><p>如果你不知道具体位置，可参考大致思路：一般在主题目录下的<code>layout</code>布局文件夹下，关键词通常为<code>index</code>、<code>article</code>等，要粘贴的位置通常在文章正文下面。</p><p>如果你是前端小白看不懂代码，我将以Hueman主题举例，找到合适的文件后，比如ariticle.ejs。用文本编辑器打开文件，分析文件的结构，代码分为：</p><p><code>article-header</code>（文章头部，比如标题）</p><p><code>article-meta</code>（文章元数据，比如标签、作者、日期等）</p><p><code>article-entry</code>（文章的正文等）</p><p><code>article-footer</code>（文章的页脚，如打赏、分享功能等）</p><p>HTML标签通常成对出现，如<code>&lt;a&gt;</code>和<code>&lt;/a&gt;</code>为一对，总之我们的代码要写在带<code>/</code>的标签后面。因为这个文章页脚并非整个页面的页脚，所以我们粘贴在这个文章页脚下面正好合适。错了也没关系慢慢试。</p><p><img src="https://pic.webrelay.cn/img/giscus12.png" alt="img"></p><blockquote><p><a href="https://ppoffice.github.io/hexo-theme-hueman/"><strong>Hueman</strong></a>主题位置：<code>..\themes\hueman\layout\common\article.ejs</code></p><p><strong>Cactus</strong>主题位置：<code>..\themes\cactus\layout\index.ejs</code></p></blockquote><p><strong>不同主题配置方法稍有不同，欢迎提供你的主题配置方法</strong></p><h3 id="💡本地预览"><a href="#💡本地预览" class="headerlink" title="💡本地预览"></a>💡本地预览</h3><ul><li><p>在终端中输入以下命令：</p><p><code>hexo cl</code></p><p><code>hexo g</code></p><p><code>hexo s</code></p></li><li><p>打开 <code>http://localhost:4000/</code>，本地预览效果如下：</p><p><a href="https://pic.webrelay.cn/img/giscus13.png"><img src="https://pic.webrelay.cn/img/giscus13.png" alt="img"></a></p></li></ul><h3 id="🎉完成"><a href="#🎉完成" class="headerlink" title="🎉完成"></a>🎉完成</h3><ul><li>使用 <code>hexo d</code> 命令推送即可</li></ul><h2 id="三、其他"><a href="#三、其他" class="headerlink" title="三、其他"></a>三、其他</h2><p>介绍几种其他的评论系统，可以了解一下，选择自己喜欢的</p><ul><li>国外的（国内访问困难）<ul><li><a href="https://disqus.com/">Disqus</a></li></ul></li><li>基于Github Issues的<ul><li><a href="https://gitalk.github.io/">Gitalk</a></li><li><a href="https://utteranc.es/">utterances</a></li></ul></li><li>基于Github Discussions的<ul><li><a href="https://giscus.app/">giscus</a></li></ul></li><li>带后端的（搭建麻烦，但是最好用）<ul><li><a href="https://waline.js.org/">Waline</a></li><li><a href="https://twikoo.js.org/">Twikoo</a></li></ul></li></ul><blockquote><p>相关链接：</p><p>giscus：<a href="https://giscus.app/zh-CN">https://giscus.app/zh-CN</a></p><p>Hueman：<a href="https://ppoffice.github.io/hexo-theme-hueman/">https://ppoffice.github.io/hexo-theme-hueman/</a></p><p>网络驿站：<a href="https://webrelay.cn/">https://webrelay.cn/</a></p></blockquote>]]></content>
 
 
 
  <tags>
 
  <tag> 教程 </tag>
 
+ <tag> Hexo </tag>
+
  <tag> 博客 </tag>
 
  </tags>