そうだ、ブログに目次をつけよう

カテゴリー:  Tech タグ:  blogging javascript web
/images/2020/05/toc.jpg

仕事でjQueryのMigrationについて調査していて、「そういえば、ブログになんでjQueryなんて 使っている人がいるんだろう」とふと思い、調べてみたら、まぁ「いらないんじゃない？」って 使い方が多かったんですが、中に目次を自動生成しているサイトがありました。

一瞬良さげかなと思って調べてみました。

メジャーどころでは以下の2つに絞られるようです。

Tocbot

Tocbot はjQueryに依存しない目次生成を行ってくれる Javascriptです。

ブログで使用するなら、まずCDNからJavascript本体とスタイルシートを読み込むよう ヘッダーに以下のような指定を追加します。

<script
   src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js">
</script>
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">

そして、 </body> タグの直前にでも以下のようなJavascriptを追加します。

tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
  // For headings inside relative or absolute positioned containers within content.
  hasInnerContainers: true,
});

ブログのテンプレートなどを変更して、目次を挿入したい場所に js-toc というセレクタ を使用した要素を追加し、目次をつけたい記事を js-toc-content というセレクタで囲います。

<!-- ここに目次生成 -->
<nav class="js-toc"></nav>

<article class="article js-toc-content">
  <section>
    <h2>タイトル1</h2>
       ......
    <h2>次のタイトル</h2>
       ......
  </section>
</article>

TOC

TOC は、jQueryのプラグインによる目次生成のスクリプトです。

こちらはTOCをダウンロードしてきたら、jQueryとともにヘッダーに指定します。

<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
<script src="dist/toc.min.js"></script>

そして、 </body> タグの直前にでも以下のようなJavascriptを追加します。

jQuery('#js-toc').toc({
  'container': '.js-toc-content', /* 見出しを取得するエリア */
  'selectors': 'h2, h3', /* 取得する見出しレベル */
});

<!-- ここに目次生成 -->
<nav id="js-toc"></nav>

<article class="article js-toc-content">
  <section>
    <h2>タイトル1</h2>
       ......
    <h2>次のタイトル</h2>
       ......
  </section>
</article>

スタイルについては適当につけていく必要があります。

ちょっと待て、nikolaは！

ここまでまとめて来ましたが。。。

よく考えるとこのブログは静的ジェネレーターの nikola を使用してHTML生成していて、記事のソースは reStructuredText で記述しています。

reStructuredTextは目次をサポートしているので、後付けのJavaScriptなんぞ使わなくても 以下のディレクティブを記事中に記述すれば一発で目次生成できたんでした。

.. contents::

コメント

Comments powered by Disqus