如何在github页面博客(Markdown)中使用disqus评论?

是否有可能使用github页面在博客中集成disqus的html评论? 我喜欢使用github,jekyll和markdown来简化pipe理我的网站和博客的想法。 但是,我想包括disqus评论function。 但是,由于降价产生的HTML – 我如何包括分辨率的HTML / JS代码?

最简单最干净的方法是用disqus在你的_includes/文件夹(例如_includes/disqus.html )中提供的HTML创build一个partial,然后将其包含在你的文章布局文件(例如_layouts/post.md ) :

 {% include disqus.html %} 

你可以在这里看到一个例子: post layout和disqus partial 。

有一个“官方”的方式来完成这项任务。 你可以在这个链接findDisqus标识。

具体过程如下:

将一个名为comments的variables添加到YAML Front Matter (即您的发布文件的标题)中,并将其值设置为true 。 前面的示例可能如下所示:

 layout: default comments: true # other options 

创build一个新的模板文件(即disqus.html ),并在那里放置通用embedded代码 , % if page.comments %% endif %

disqus.html文件包含到您的发布模板中。

希望能帮助到你 :)

在你的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> 

这是真的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脚本的post布局来呈现您的Markdown文件。

打开config.yml并添加以下代码行disqus_shortname: username 。 用您的Disqus短名称replaceusername

在Jekyll的_includes文件夹中创build一个名为disqus_comments.html的文件,并将您的Disqus通用embedded代码添加到{% 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 %} 

您只需在任何post的前面添加comments: false来closures该评论。

最后,打开你的post.html文件,在结尾</article>标签后面添加下面的液体包含标签。

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

你可以按照我的详细的博客文章,如何joinDisqus评论杰基尔,如果你卡住了。

Interesting Posts