如何在github頁面博客（Markdown）中使用disqus評論？

Question

是否有可能使用github頁面在博客中集成disqus html評論？我喜歡使用github，jekyll和markdown來簡化管理我的網站和博客的想法。但是，我想包括disqus評論功能。但是，由於降價產生的HTML - 我如何包括分辨率的html/js代碼？

Answer 1

最容易和最乾淨的方法是使用disqus在您的_includes/文件夾中提供的HTML部分（例如， _includes/disqus.html），然後就包括它在您的文章佈局文件（例如_layouts/post.md）：

{% include disqus.html %} 

你可以在這裏看到一個例子：post layout和disqus partial。

Answer 2

這是真的，Jekyll會從您的Markdown文件（本地使用Jekyll或通過推送到gh頁面）呈現HTML。然而，這並不重要，因爲這種代碼必須位於圖層中，因此不在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 

通過下面這個樹形視圖中，您將能夠使用您的後佈局，它可以包含你Disqus腳本渲染你的降價文件。

Answer 3

包括在你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> 

Answer 4

有一種「官方」的方式來完成這項任務。你可以在this鏈接找到Disqus標誌。

在細節，程序如下：

被叫comments變量添加到YAML前頁（即你的信息文件的首部），並將其值設定爲true。樣本前面的問題可能是：

layout: default 
comments: true 
# other options 

創建一個新的模板文件（即disqus.html），並把那裏的Universal Embed Code，在% if page.comments %之間的% endif %

附上disqus.html文件到您的文章模板。

希望它能幫助:)

Answer 5

打開config.yml，並添加代碼 disqus_shortname: username以下行。將username替換爲Disqus的簡稱。

創建哲基爾的_includes文件夾名爲disqus_comments.html文件，並添加您Disqus通用嵌入代碼的{% if page.comments %}和{% endif %}液體標籤

{% 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>。

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

您可以按照有關如何add Disqus comments to Jekyll我詳細的博客文章，如果你會被卡住。