プラグインの変更箇所/contentsx.inc.php

カテゴリ：カスタマイズ プラグイン改造

変更箇所のまとめ

• 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

質問や指摘などあればどうぞ。