Hexo にコメント機能と自動生成目次(toc)を追加しました

Index

  1. コメント機能の追加
    1. Disqus アカウント作成
    2. Disqus 側設定
    3. Hexo 側設定
    4. つまずいたところ
    5. 参考
  2. 自動生成される目次(ToC: Table of Contents)の導入
    1. テンプレートの編集
    2. 参考

hexo をいじるのが目的化していますが、コメント機能と自動生成目次(toc)を追加しました。
少しひっかかったところがあったのでメモしておきます・

コメント機能の追加

Hexo の先人たち同様 Disqusを利用しました。

Disqus アカウント作成

Twitter 連携でさっと済ませました。

Disqus 側設定

I want to install Disqus on my site を選択

サイト名と後から必要になるshortname の作成。

先達めのやりかたと少し変更されているのか、 What platform is your site? と聞かれるので、
I don't see my platform listed, install manually with Universal Code を選択して、Finishしました。

Hexo 側設定

コマンド二行です。

1
2
hexo config disqus_shortname {YOUR_SHORTNAME}
hexo --config themes/light/_config.yml config comment_provider disqus

このコマンドによって、記事のフッタ部分の ejs テンプレートに以下のようなセクションが追加されていました。
=>訂正です。もともとのテンプレートに既に記述ありでした。

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

つまずいたところ

その後 hexo s で確認してもうまく反映されなかったのですが、hexo d -g してパブリッシュしてみると、反映されていました。

参考

Disqusを使ってブログ(Hexo)にコメント欄を設置しました & ブログにコメント欄を設置した理由
Hexoでの記事の追加とコメント機能について

自動生成される目次(ToC: Table of Contents)の導入

いいなぁと思っていたので、目次も導入しました。
きっかけは、Hexoブログで使っているプラグインを晒してみる でした。
その後 hexo-toc を導入してみましたが、うまくいかず、別の手段を探していた時にちょうど同様の事象にあたっている方を発見しました。
Hexoに目次を自動的に追加する方法

テンプレートの編集

以下を記事のテンプレートに追加します。場所は <%- post.content %> の上です。

vi themes/lhogehoge/layout/_partial/article.ejs

1
2
3
4
5
6
<% if (!index){ %>
<div id="toc" class="toc-article">
<p class="toc-title">目次</p>
<%- toc(post.content) %>
</div>
<% } %>

ただし、私の場合は、list が重複してしまったので、以下のように微調整を施しました。

1
2
3
4
5
6
<% if (!index){ %>
<div id="toc" class="toc-article">
<p class="toc-title">目次</p>
<%- toc(post.content, {list_number: false}) %>
</div>
<% } %>

参考

在Hexo中给文章加目录(Table Of Contents
Hexoブログで使っているプラグインを晒してみる
Hexoに目次を自動的に追加する方法

Share Comments

related posts