インクルードフックとjQueryを使ってDokuWikiをカスタマイズする [のふ処|NOFUDOKORO]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== インクルードフックとjQueryを使ってDokuWikiをカスタマイズする ======

===== インクルードフックとは =====

DokuWikiのテンプレートには[[https://www.dokuwiki.org/include_hooks|Include Hooks]]と呼ばれる仕組みがある。
テンプレートディレクトリに指定のHTMLファイルを置くと、その内容が生成されるWikiページの所定の場所に差し込まれるという機能だ。
例えば、''meta.html''なら''<head>''タグの中に展開されるといった具合。

下表がDokuWikiの標準的なフックである（2016-05-17現在）。

^ ファイル名 ^ HTMLが組み込まれる場所 ^
|meta.html|''<head>''タグの内側|
|topheader.html|''<body>''タグの後、右側ページの最上部|
|header.html|上部青線の上、ページ名とwikiタイトルの下|
|pageheader.html|パンくずの下、実コンテンツの上|
|pagefooter.html|下部青線の上、最終更新日の下|
|footer.html|''</body>''タグの直前、ページの最後尾| 

フックの処理はWiki側ではなくテンプレート側で実装されるものなので、規約というよりも紳士協定に近い。従ってテンプレートによっては対応してなかったり、逆に独自のフックを追加している場合もある。詳細は各テンプレートのドキュメント（とコード）で確認されたし。

インクルードフックを使うとテンプレートのコードを弄らずにWikiページをカスタマイズ出来るようになるが、全てのページに対し一律で適用されるため、フック単体ではあまり凝ったことはできない。フックのファイル名が表すとおり、ヘッダやフッタといった全ページ共通で内容も位置も静的なコンテンツを挿入するといった事が想定された使われ方だろうか。

===== jQueryと組み合わせて使う =====

だがしかし、インクルードフックとjQueryを組み合わせて使うことで一気に夢が広がリング。

このページを見るくらいの人ならjQueryの事は知ってると思うが、念のため簡単に説明すると、ブラウザでHTMLの構造（DOM）を動的に変更するためのJavaScriptライブラリである。

DOMをイジれるってことはHTMLの記述場所と実際の表示場所を変更できる訳で、つまるところ、Wiki本文内に表示したいHTMLをインクルードフックに“仮置き”しといて、jQueryで後から本文内に移動しちゃおうって寸法。

例えば、以下のようなインクルードフックを用意する。

<file html meta.html>
<script>
  jQuery(function() {
    var goto
    jQuery('h2').after(
</file>

<file html pageheader.html>
<a name="page-top" />
<div class="goto-page-top">
  <a href="#page-top">▲ページトップへ</a>
</div>
</code>