目次

インクルードフックとjQueryを使ってDokuWikiをカスタマイズする

インクルードフックとは

DokuWikiのテンプレートには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で後から本文内に移動しちゃおうって寸法。

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

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

<file html pageheader.html> <a name=“page-top” /> 

<a href="#page-top">▲ページトップへ</a>

</code>