#author("2024-08-27T03:14:01+09:00","default:kanateko","kanateko")
#author("2024-08-27T04:23:54+09:00;2024-08-27T03:14:01+09:00","default:kanateko","kanateko")
&tag(カスタマイズ,プラグイン改造);
#contentsx
*変更箇所のまとめ [#hfba57c4]
-HTML構造と目次タイトルを変更
-表示・非表示の切替機能を追加
*変更の詳細 [#sf783ded]
**HTML構造と目次タイトルを変更 [#title]
tableレイアウトからHTML5準拠のタグを使用した構造に変更し、目次タイトルも「Table of Contents」から「目次」に変更する。ついでにFontAwesomeでアイコンを付ける。
#prism(diff-php diff-highlight){{
- $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";
}}
**表示・非表示の切替機能を追加 [#toggle]
ページによっては目次がべらぼうに長くなるので、Javascriptを使った表示・非表示機能を追加し、デフォルトで非表示の状態にしておく。
まずは"目次"表記の横に切替用のボタン (リンク) を追加する。
#prism(diff-php diff-highlight){{
<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`に追記する形になる。
#prism(javascript){{
const tocxToggle = e => {
e.preventDefault();
const ct = e.currentTarget;
const ls = ct.closest('.plugin-tocx').querySelector('.tocx-list');
const isVisible = ct.dataset.visible != null;
const parent = ct.closest('.plugin-tocx');
const isVisible = parent.dataset.visible != null;
if (isVisible) {
ct.innerText = '表示';
delete ct.dataset.visible;
ls.style.display = 'none';
ct.innerHTML = '表示';
delete parent.dataset.visible;
} else {
ct.innerText = '非表示';
ct.dataset.visible = '';
ls.style.display = 'block';
ct.innerHTML = '非表示';
parent.dataset.visible = '';
}
}
}}
最後にcssで以下を指定しておく。
#prism(css){{
.plugin-tocx[data-visible] .tocx-list {
display: block;
}
.tocx-list {
display: none;
}
}}
細かい装飾はさておき、これで目次の切り替えが可能となる。
*更新履歴 [#zd9d78cb]
:2024-08-27|
内容を現在のサイト構成に合わせて更新。
----
-%%[[Plugin/contentsx.inc.php - Sonots' PukiWiki プラグイン:http://pukiwiki.sonots.com/?Plugin%2Fcontentsx.inc.php]]%% (リンク切れ)
-[[pukiwiki-plugin/plugin at master · sonots/pukiwiki-plugin · GitHub:https://github.com/sonots/pukiwiki-plugin/tree/master/plugin]]
質問や指摘などあればどうぞ。
#pcomment(reply)
