web-dev-qa-db-ja.com

githubページのブログ（Markdown）でdisqusコメントを使用するにはどうすればよいですか？

Github-pagesを使用してdisqus htmlコメントをブログに統合することは可能ですか？ github、jekyll、markdownを使用してサイトとブログを簡単に管理できるというアイデアが気に入っています。ただし、disqusコメント機能を含めたいと思います。ただし、markdownはhtmlを生成するので、disqusにhtml/jsコードを含めるにはどうすればよいですか？

jekyllgithub-pagesdisqus
57
Jon

最も簡単でクリーンな方法は、disqusが_includes/フォルダー（たとえば_includes/disqus.html）で提供するHTMLでパーシャルを作成し、それを投稿レイアウトファイル（たとえば_layouts/post.md）：

{% include disqus.html %}

ここに例を見ることができます： post layout および disqus partial 。

78
andersonvom

このタスクを達成する「公式の」方法があります。 Disqusの指示は this リンクにあります。

詳細には、手順は次のとおりです。

commentsという変数をYAML Front Matter（つまり、投稿ファイルのヘッダー）に追加し、その値をtrue。サンプルのフロントマターは次のようになります。

layout: default
comments: true
# other options

新しいテンプレートファイル（つまり、disqus.html）を作成し、% if page.comments %と% endif %の間に niversal Embed Code を配置します。

disqus.htmlファイルを投稿テンプレートに含めます。

それが役に立てば幸い ：）

11
riccardo.cardin

Disqusコメントをpost.htmlに含め、コメントカウントリンクの識別子を設定します。

<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>
4
helderdarocha

要約すると：

  1. 3番目のコメントサービスDisqusを使用して、アカウントを作成します
  2. サイト、つまりgithubサイトをdisqusに関連付けます
  3. admin/settings/general/でDisqusショートネームを取得
  4. Githubの_config.ymlを編集し、次のコンテンツが含まれていることを確認します。
disqus:
    shortname: <your disqus short name>

  1. 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 %}

    1. disqus.htmlに_layouts/post.htmlを含める

    2. コメントを有効にするには、comments:trueを投稿yamlフロントマターに追加します。 comments: falseを設定するか、コメントオプションをまったく含めないで無効にします。

2
frank

Config.ymlを開き、次のコード行disqus_shortname: usernameを追加します。 usernameをDisqusのショートネームに置き換えます。

Jekyllのdisqus_comments.htmlフォルダーに_includesというファイルを作成し、{% if page.comments %}と{% endif %}液体タグの間にDisqus Universal Embed Codeを追加します

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

JekyllにDisqusのコメントを追加する 行き詰まった場合の方法に関する詳細なブログ投稿をフォローできます。

1
Colin

それは本当です。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

このツリービューに従うと、Disqusスクリプトを含めることができるpostレイアウトを使用して、Markdownファイルをレンダリングできます。

0
aymericbeaumet