Question

是否可以使用github-pages在一个博客中集成disqus html评论？我喜欢使用github，jekyll和markdown管理我的网站和博客的想法。但是，我想包括disqus评论功能。但是，由于markdown生成html - 如何为disqus包含html / js代码？

Answer 1

最简单，最干净的方法是使用disqus在_includes/文件夹中提供的HTML（例如_includes/disqus.html）创建一个部分，然后将其包含在帖子布局文件中（例如_layouts/post.md）：

{% include disqus.html %}

您可以在此处查看示例：post layout和disqus partial。

Answer 2

有一个＆＃34;官员＆＃34;完成这项任务的方法。您可以在this链接找到Disqus指示。

详细说明，程序如下：

将一个名为comments的变量添加到 YAML Front Matter （即帖子文件的标题）中，并将其值设置为true。示例前面的内容可能如下所示：

layout: default
comments: true
# other options

创建一个新的模板文件（即disqus.html）并将Universal Embed Code放在% if page.comments %和% endif %之间

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

希望有所帮助：）

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

总结：

使用第3条评论服务Disqus，创建一个帐户
将您的网站（即您的github网站）与disqus
在admin/settings/general/
编辑你的github的_config.yml，确保它包含以下内容：

disqus:
    shortname: <your disqus short name>

确保disqus.html下有_includes，看起来像是：

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

在disqus.html

_layouts/post.html

要启用评论，请在您的帖子yaml前面添加comments:true。通过设置comments: false或根本不包含评论选项来禁用它。

Answer 5

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

在Jekyll的disqus_comments.html文件夹中创建一个名为_includes的文件，并在{% 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>标记后面添加以下液体包含标记。

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

如果您遇到问题，可以按照我的详细博客文章了解如何add Disqus comments to Jekyll。

Answer 6

这是真的Jekyll将从您的Markdown文件呈现HTML（本地使用Jekyll或通过推送到gh页面远程）。然而，这并不重要，因为这种代码必须在一个层中，因此不在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脚本。

Answer 7

_config.yml

<t name="Web layout" t-name="web.layout">&lt;!DOCTYPE html&gt;

_posts / post_front_matter

disqus:
    shortname: <your disqus short name>
baseurl: "repo_name"
url : "https://username.github.io/repo_name"

注意：

comments: true

如何在github pages blog（Markdown）中使用disqus注释？

7 个答案: