プラグインの変更箇所/contentsx.inc.php
2024-08-27 (火) 03:14:01
変更箇所のまとめ
- HTML構造と目次タイトルを変更
- 表示・非表示の切替機能を追加
変更の詳細
HTML構造と目次タイトルを変更
tableレイアウトからHTML5準拠のタグを使用した構造に変更し、目次タイトルも「Table of Contents」から「目次」に変更する。ついでにFontAwesomeでアイコンを付ける。
- $html = '<table border="0" class="toc"><tbody>' . "\n"-
- . '<tr><td class="toctitle">' . "\n"
- . '<span>' . _('Table of Contents') . "</span>\n"
- . "</td></tr>\n"
- . '<tr><td class="toclist">' . "\n"
- . $html
- . "</td></tr>\n"
- . "</tbody></table>\n";
+ $html = <<<EOD
+ <nav id="$id" class="plugin-tocx">
+ <div class="tocx-title">
+ <i class="fa-solid fa-list-ul"></i><span>目次</span>
+ </div>
+ <div class="tocx-list">
+ $html
+ </div>
+ </nav>
+ EOD . "\n";
表示・非表示の切替機能を追加
ページによっては目次がべらぼうに長くなるので、Javascriptを使った表示・非表示機能を追加し、デフォルトで非表示の状態にしておく。
まずは"目次"表記の横に切替用のボタン (リンク) を追加する。
<i class="fa-solid fa-list-ul"></i><span>目次</span>
+ <span class="tocx-toggle small">[<a href="#" onclick="tocxToggle(event)">表示</a>]</span>
見た目としては [表示] ← こんな感じ。
次に切り替えのためのスクリプトを追加する。当サイトでは専用の別ファイルを用意しているが、通常はskinディレクトリのmain.jsに追記する形になる。
const tocxToggle = e => {
const ct = e.currentTarget;
const parent = ct.closest('.plugin-tocx');
const isVisible = parent.dataset.visible != null;
if (isVisible) {
ct.innerHTML = '表示';
delete parent.dataset.visible;
} else {
ct.innerHTML = '非表示';
parent.dataset.visible = '';
}
}
最後にcssで以下を指定しておく。
.plugin-tocx[data-visible] .tocx-list {
display: block;
}
.tocx-list {
display: none;
}
細かい装飾はさておき、これで目次の切り替えが可能となる。
更新履歴
- 2024-08-27
- 内容を現在のサイト構成に合わせて更新。
Plugin/contentsx.inc.php - Sonots' PukiWiki プラグイン(リンク切れ)- pukiwiki-plugin/plugin at master · sonots/pukiwiki-plugin · GitHub
質問や指摘などあればどうぞ。
Loading comments…