もくじをカンタンに自動生成する方法いろいろ

ブログを書いていると、文章が長くなる。
長くなると、どこにどの項目があるか、探すのがメンドウ。
リンクで該当項目に移動する目次が欲しい。

見つけたもので、使いやすいな、というものをメモしておく。

JavaScriptプラグイン

「WordPressにプラグイン沢山入れるのもな…」ていう同志や、自作システムに使いたい人には、Javascriptタイプをオススメする。

サンプルを作っておいたので、使い方等はソースを見て貰えればと。
『もくじ』とかもくじタイトルを付けたい人向けに、付け方例も書いておいた。

jgallen23/toc

GitHub - jgallen23/toc: jQuery Table of Contents Plugin
ダウンロードの仕方が若干厄介。
2019年7月現在、最新版より旧バージョン版(v0.3.2)を使うことを、個人的にはオススメする。

最新版

単純にgit落とすや、それに『npm init』するでは使えなくて、暫く悩んだ。
windowsだからか、延々エラー続きで出来ない、tocディレクトリ…

  • まずnode.js使えるようにしておく
  • ディレクトリ作って、コマンド実行できるもので、作ったディレクトリまで移動(cd)。
  • npm install import '@firstandthird/toc'

    を実行

  • 作られた内『node_modules\@firstandthird\toc\dist』がもくじ機能の対象

タグに対象タグを指定するだけで使える。
h1~h5があるページにおいて、h2とh3だけ表示させるということも簡単。
ただし、hの数字が大きい順から表示するので、他階層が複数あると順番がおかしいので、使い所を考える必要がある。
jgallen23/toc最新版サンプル

旧バージョン版(v0.3.2)

落とし方諸々については、下記を参照すると良いです。
見出しから目次を自動生成してくれるjQueryライブラリ「TOC」のダウンロードと使い方! | HPcode
最新版にあるエラーがない。しかしjQueryが必須となる。
jgallen23/toc v0.3.2サンプル

小粋空間tocプラグイン

jQueryで目次を自動生成する「tocプラグイン」: 小粋空間
使うまでがスゴく簡単。設定も少ない。jQuery必須。
一番上階層を指定して、それ以下の階層を全て表示する。外すことはできない。
デフォルトはh3以下。それ以外を指定する場合は、オプションstartLevelを指定する。
もくじdevはclass指定は出来ず、id指定のみ。
小粋空間tocサンプル

WordPressプラグイン

WordPressのプラグインの通常の入れ方でカンタンに設置出来る。
設定も解りやすい。

コメント

タイトルとURLをコピーしました