The other way round

bonさん、こんにちは ('0')/
TOCの件について

まず拝見したページ(entry-5.html)の内容は公式ちゃんねるで紹介されているものですよね。こちらは [太字]htmlによる手書き生成[/太字] で、私のものは [太字]JSによる自動生成[/太字] なので混ぜて利用することはできません。

公式の方の指南はしませんので、私の方の導入補助説明だけです。なのでどちらを利用するのかはっきり決めて、[太字]それぞれの作業チャートを忠実に守る[/太字] ようにしてください。
以降は私の方を導入するとして、記事内容の補足説明です(別ウィンドウで https://vanillaice000.blog.fc2.com/blog-entry-826.html を開いた状態で比較しながら読んでもらうと良いと思います, 別「タブ」でなく別「ウィンドウ」です)

【作業の前に考慮すべきこと】
・今後「追記」を使えるかどうか --- 理由は記事を熟読のこと。現在は「本文」に見出しが書かれており、OGPの記事概要に見出しリストが抽出されてしまっています。ちょっとこの件改めて記事にしようと思います。
・追記を利用するならば簡易モードをOFFに(ONだと追記が使えません)
・追記を利用する、という決断をした場合には見出しを全て追記に移動させる(カット&ペースト)

追記を使えない・使いたくない、という結論になった場合は私の方のTOCは使わない方が良いと思います。理由は記事内容を熟読。「全文タイプを今後も絶対に使わない」そして「本文200文字以内に絶対TOCを記載しない」と言い切れるならば利用可能です。理由は以下同文(笑)

【作業の前に削除すべきもの】
・記事内の手書きhtmlリスト(<div style="text-align〜〜省略〜〜</div>) --- 公式ちゃんねるのTOC内容
・追加したJS --- 私のTOC内容

-----
まず「何故「追記」への記載を推奨するのか」をしっかり読んでください。ここを理解できないと使いこなせません。

「導入手順」の章にあるスクリプト内容は [下線]テンプレートhtmlにそのままコピペすることはできません。[/下線]
何故かというと、「htmlのソースに記載できるのはhtml要素のみ」だからです。例えば
!function(e){"use strict"〜省略〜e.initTOC=u}(window);
これは「JSコード」です。htmlソース内に記載するには「html要素」にしなければいけません。
[斜体][斜体]<script>[/斜体][/斜体]!function(e){"use strict"〜省略〜e.initTOC=u}(window);[斜体][斜体]</script>[/斜体][/斜体]

冒頭のscript開始タグ、末尾のscript終了タグが付くことによってhtml要素になります。
何故記事内容のコードがhtmlになっていないかというと、[下線]外部ファイル化を推奨している[/下線] ためです。外部ファイルに仕上げる場合は逆に前後の<script>と</script>を削除して.js拡張子保存しなければいけません。
わかるかな ^^;

TOCの内容を外部ファイル化せずテンプレートhtml内に直書きする(インラインスクリプト, インラインJSと言います)場合は

[斜体][斜体]<script>[/色]JSコード[斜体][斜体]</script>[/斜体][/斜体]

という形です。外部ファイル化する場合は、そのファイルの中身は

JSコード

という形です。scriptタグは付けません(付けてはいけません)
そしてこのファイルをテンプレートhtmlに記載するときに

[斜体][斜体]<script src="JSファイル"></script>[/斜体][/斜体]

となるわけです。

bonさんがここで決めなければいけないのは
1. 全てを外部ファイル化する
2. 基本コードだけを外部ファイル化 + 個人設定(上書き用スクリプト)をインライン化
3. 全てをインライン化

この3択です。推奨は1の全外部ファイル化です。理由は「async指定ができるから」です。asyncというのは「準備が整ったら実行」という意味で、この指定を行うことでhtmlの描画準備(DOM構築)の邪魔をしません。結果表示スピードへの悪影響も最小限です。そして外部ファイル化したものは「キャッシュが効く」というのもメリットのひとつです。

インラインで書いたJSというのは「キャッシュが効かない」のがデメリット。htmlというのは原則キャッシュは効きません。html内の「ファイル化されたもの」はキャッシュが効きます。そしてインラインJSはasyncの指定ができません。

【1】1を選択した場合の最終形(テンプレートhtmlに記載する形)

【2】2を選択した場合の最終形

【3】3を選択した場合

こうなります。1を選ぶのが推奨。2を選ぶ理屈としては「テンプレートを変更したときに上書き内容が変わる可能性を考慮」です。全てを外部ファイル化した場合はscopeなど変更内容が有ればファイル自体を再作成&再アップロードする必要があります。
3を選ぶ理屈は「メンテナンスを楽にしたい」ですかね。頻繁に内容を変更する可能性がある場合です(まず無いと思います)

ここまでが説明です。

ちょっと意地悪をして後回しにしました。
以下を開いてコピペで.JS保存。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/user-toc2020-4-11.js

その後テンプレートhtmlの</body>の直前に

<script src="JSファイル" async></script>

を記載。「最初から見せろや (;`ｰ´)o」と思うかもですが、理解することで応用が効くようになるからです。例えば誰かの提供する「xxxができるJS」
を使いたいと思ったとき、その雛形コードが
function〜〜〜
と書かれていればこれはhtmlではなくJSなので<script>と</script>で囲わないと使えないのでコピペだけでは完了しない。
<script>function〜〜〜</script>
と書かれていればこれはhtmlのscript要素なのでコピペだけで完了、とすぐにわかるようになります。また、ファイル化するかインライン化するかの選択も理屈がわかれば自分で決められますよね。

ここまでがスクリプトの導入です。
あとはCSSのスタイリングを選んでスタイルシート末尾に記載、そしてTOCを出したい記事の追記に

を記載。これは定形ですから「もくじ」などで辞書登録してください。
手順をしっかり守ればこれで表示されるはずです。

* 注意
テンプレートを変更した場合にスムーススクロールが効かなくなることがあります。最近の私のテンプレートではTOCを導入してもスムーススクロールが効くようにスムーススクロール側のJSを操作しています。
その処理が無い場合にはTOCの方にスムーススクロールを追加する必要が生じます。先にお伝えしておきますね。

管理者にだけ表示を許可する