• 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2020-01-20T10:10:24+09:00","default:kanateko0404","kanateko0404")
RIGHT:&tag(カスタマイズ,プラグイン改造);
#author("2022-07-06T04:29:04+09:00;2020-02-05T20:31:59+09:00","default:kanateko","kanateko")
&tag(カスタマイズ,プラグイン改造);

#contentsx

*変更箇所のまとめ [#hfba57c4]
-目次タイトルを変更
-表示・非表示の切替機能を追加

*変更の詳細 [#sf783ded]
**目次タイトルを変更する [#title]
そのままだと"Table of Contents"と英語表記なので普通に"目次"表記に変更する。

#prism(diff-php diff-highlight){{
             if ($html != '') {
             $html = '<table border="0" class="toc"><tbody>' . "\n"
                 . '<tr><td class="toctitle">' . "\n"
-                . '<span>' . _('Table of Contents') . "</span>\n"
-                . '<span>' . _('目次') . "</span>\n"
}}

**表示・非表示の切替機能を追加 [#toggle]
ページによっては目次がべらぼうに長くなるので、Javascriptを使った表示・非表示機能を追加する。
WordPressとかだとよくあるあれ。

まずは"目次"表記の横に切替用のボタン (リンク) を追加する。
#prism(diff-php diff-highlight){{
-                . '<span>' . _('目次') . "</span>\n"
+                . '<span>' . _('目次') . '</span><span class="toctoggle">[<a href="#" id="togglelink">表示</a>]</span>' . "\n"
}}
見た目としては [表示] ← こんな感じ。

次に切り替えのためのスクリプトを$htmlの最後に追加する。
一行一行追加していくのがメンドイのでヒアドキュメントを使う。
#prism(diff-php diff-highlight){{
                 . $html 
                 . "</td></tr>\n"
                 . "</tbody></table>\n";
+            $html .= <<<EOD
+ <script type="text/javascript">
+ $('a[href="#"]').click(function(){
+   return false;
+ });
+ $('#togglelink').on('click', function () {
+  if ($(this).text() === '表示') {
+    $(this).text('非表示');
+    $(".toclist").show();
+  } else {
+    $(this).text('表示');
+    $(".toclist").hide();
+  }
+});
+</script>
+EOD;
             }
             return $html;
         } while (false);
}}

今の所非表示状態がデフォルトにしてある。
そして基本的に各ページに一個しか設置しないため、複数個置いたときの事は考えていない。
複数個置く場合はregionみたいにグローバル変数でカウントしてid振るか、もしくは2個以上設置したらエラー吐けばいいのかな?

----
[[Plugin/contentsx.inc.php - Sonots' PukiWiki プラグイン:http://pukiwiki.sonots.com/?Plugin%2Fcontentsx.inc.php]]

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

#pcomment(,10,above,reply)
#pcomment(reply)