如何在 GitHub Pages 博客（Markdown）中使用 Disqus 评论？

Question

是否可以在使用Github Pages管理博客时集成Disqus HTML评论？我喜欢使用Github、Jekyll和Markdown来管理我的网站和博客，以此来简化。但是，我想要包括Disqus评论功能。然而，由于Markdown生成了HTML，那么我该如何包含Disqus的HTML/JS代码呢？

- Jon

---

Markdown允许原始HTML。但是，我不确定GitHub Pages是否会添加自己的限制。 - Matt Ball

@MattBall：它不会添加任何限制。但是，您应该将其放在布局文件中，通常是HTML文件。 - SLaks

Answer 1

最简单、最干净的方法是在_includes/文件夹中创建一个包含disqus提供的HTML代码的部分文件（例如_includes/disqus.html），然后在您的文章布局文件（例如_layouts/post.md）中引用它：

{% include disqus.html %}

你可以在这里看到一个例子： 文章布局 和 Disqus 部分。

- andersonvom

---

正确答案。此外，您可以在 front matter 中添加 comments: true 或 comments: false，然后在包含标记周围使用 {% if page.comments %} ... {% endif %}。 - David Dahan

Answer 2

有一个“官方”的方法可以完成这个任务。你可以在这个链接中找到Disqus的指示。具体来说，步骤如下：

1. 添加一个名为comments的变量到文章文件的YAML Front Matter（即文章文件头部），并将其值设置为true。一个示例Front Matter如下：

    layout: default
    comments: true
    # other options
   

2. 创建一个新的模板文件（例如disqus.html），并将通用嵌入代码放置在{% if page.comments %}和{%- endif -%}之间。

3. 将disqus.html文件包含到您的帖子模板中。

希望可以帮到您:)

- riccardo.cardin

---

官方 Disqus 链接现在在这里：https://disqus.com/admin/install/platforms/jekyll/ - Dylan Hogg

Answer 3

总结一下：

1. 使用第三方评论服务Disqus，创建一个账户
2. 将您的网站，即您的GitHub网站，与Disqus关联
3. 在admin/settings/general/中获取Disqus短名称
4. 编辑您的GitHub的_config.yml文件，确保其包含以下内容：

disqus:
    shortname: <your disqus short name>

5. Make sure there is disqus.html under _includes and it looks like:

   {% if page.comments %}
   <div class="comments">
   <div id="disqus_thread"></div>
   <script type="text/javascript">
   var disqus_shortname = '{{ site.disqus.shortname }}';
   (function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();    
   </script>
   <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
   </div> 
   {% endif %}
   

   6. Include disqus.html in _layouts/post.html

   7. To enable comment, add comments:true on your post yaml front matter. Disable it by setting comments: false or by not including the comments option at all.

- frank

---

步骤5、6已默认包含在最小主题中。 - Access Denied

Answer 4

在您的post.html中包含Disqus评论，并为评论计数链接设置标识符：

<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '<your-disqus-name>'; 
    var disqus_identifier = '{{ page.id }}'; 
...
</script>

在您的default.html模板中包含评论计数脚本：

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<your-disqus-name>';
...
</script>

然后使用 data-disqus-identifier 属性将链接添加到评论中，这样每篇文章在您博客的主页面上都会显示评论计数：

<a href="{{post.id}}" data-disqus-identifier="{{post.id}}">Leave a comment</a>

- helderdarocha

Answer 5

打开config.yml文件，添加以下代码行disqus_shortname: username。将username替换为您的Disqus短名称。

在Jekyll的_includes文件夹中创建一个名为disqus_comments.html的文件，并在{% if page.comments %}和{% endif %}液态标记之间添加您的Disqus通用嵌入代码。

{% raw %}{% if page.comments != false %}
<div id="disqus_thread"></div>
<script type="text/javascript">
  var disqus_shortname  = '{{ site.disqus_shortname }}';
  var disqus_identifier = '{{ page.url }}';

  (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}{% endraw %}

您可以在任何一篇文章的头信息中添加comments: false来关闭该文章的评论功能。

最后，打开您的 post.html 文件，在 </article> 标签结束后添加如下 liquid include 标签。

{% if site.disqus_shortname %}
  {% include disqus_comments.html %}
{% endif %}

如果你遇到问题，可以查看我的详细博客文章，了解如何在Jekyll上添加Disqus评论。

- Colin

Answer 6

没错，Jekyll 可以将你的 Markdown 文件渲染成 HTML（本地使用 Jekyll 或远程推送到 gh-pages）。但是这并不重要，因为这种代码必须在层中，而不是在 Markdown 源文件中。

_layouts
    `- default.html
    `- post.html <- `layout: default` in the YAML header
_posts
    `- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header

通过遵循这个树形视图，您将能够使用您的post布局呈现您的Markdown文件，该布局可以包含您的Disqus脚本。

- aymericbeaumet