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

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 側設定

コマンド二行です。

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

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

<% 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に目次を自動的に追加する方法]https://gazee.net/hexo/hexo-add-toc/)

テンプレートの編集

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

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

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

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

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