• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• プラグインの変更箇所/contentsx.inc.php へ行く。
  • 1 (2020-01-08 (水) 17:43:30)
  • 2 (2020-01-09 (木) 15:19:30)
  • 3 (2020-01-20 (月) 10:10:24)
  • 4 (2020-02-05 (水) 20:31:59)
  • 5 (2020-02-05 (水) 20:31:59)
  • 6 (2020-02-05 (水) 20:31:59)
  • 7 (2020-02-05 (水) 20:31:59)
  • 8 (2020-02-05 (水) 20:31:59)
  • 9 (2020-02-05 (水) 20:31:59)
  • 10 (2020-02-05 (水) 20:31:59)
  • 11 (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 => {
	e.preventDefault();

	const ct = e.currentTarget;
	const ls = ct.closest('.plugin-tocx').querySelector('.tocx-list');
	const isVisible = ct.dataset.visible != null;

	if (isVisible) {
		ct.innerText = '表示';
		delete ct.dataset.visible;
		ls.style.display = 'none';
	} else {
		ct.innerText = '非表示';
		ct.dataset.visible = '';
		ls.style.display = 'block';
	}
}

最後にcssで以下を指定しておく。

.tocx-list {
	display: none;
}

細かい装飾はさておき、これで目次の切り替えが可能となる。

更新履歴

2024-08-27

内容を現在のサイト構成に合わせて更新。

• Plugin/contentsx.inc.php - Sonots' PukiWiki プラグイン (リンク切れ)
• pukiwiki-plugin/plugin at master · sonots/pukiwiki-plugin · GitHub

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