chlonolog

web, digital gadgets, and more.

Hexoのサイドバーに目次を表示する

サイドバーのところに目次(TOC)を表示したくてサイドバーの部分へ

<%- toc(page.content) %>

としたのですが、「pageなんぞない」と怒られて駄目でした。
それでもなんとかしたいなーといろんな方のテンプレートを調べた結果、以下の方法でなんとかなりましたのでまとめておきます。


パラメータをひたすら渡してゆく

要は「今のページがインデックスかどうか」が目次作成時に分かればいいので、それを確認できるページから目次の表示部分まで、ひたすらパラメータをリレーしてゆきます。

  1. 以下をサイドバーの入る部分に記述します。
(略)

<%- partial('_partial/widget') %>

(略)
  1. ページがインデックスページ(index.html)かどうかをチェックし、パラメータとして取得してからlayout/_partial/sidebar.ejsに渡します。
<% 
var idx = false;
idx = page.path.includes('index.html');
%>
<%- partial('./sidebar', {
  index: idx,
  archive: url.includes('/archives/'),
  postObj: page,
  tag:url.includes('/tags/'),
  category: url.includes('/categories/')
}) %>
  1. layout/_partial/widget.ejsから受け取ったパラメータを、今度は各ウィジェットへ渡してやります。
<% theme.widgets.forEach(function(widget) { %>
  <%- partial('_widget/' + widget, {
        index: index,
        archive: archive,
        postObj: postObj,
        tag: tag,
        category: category
        }) %>
<% }) %>
  1. 目次を出力するウィジェットまで、パラメータが届きました。これで条件判定を使用できます。
<% if (!index && toc(page.content)) { %>
  <div class="sidebar-module">
    <h4>目次</h4>
    <%- toc(page.content, {list_number: false}) %>
  </div>
<% } %>
  1. theme.widgets.forEach()で目次のウィジェットを読み込むように、_config.ymlへ値を追加します。
(略)

# Sidebar
widgets:
- toc # ←追加
- recent_posts
- tagcloud
- archive

(略)

少々面倒臭いですが、これで

  • 個別ページで目次がある場合は、サイドバーに目次を表示する
  • それ以外は表示しない

という処理が実装できました。

コメント

© 2018 chlono