差分

このページの2つのバージョン間の差分を表示します。

--- dokuwiki:customize_dokuwiki_using_include_hooks_and_jquery [2016-05-17 10:21]
Decomo 作成
+++ dokuwiki:customize_dokuwiki_using_include_hooks_and_jquery [2017-01-20 21:01] (現在)
Decomo
@@ 行 1: / 行 1: @@
 ====== インクルードフックとjQueryを使ってDokuWikiをカスタマイズする ======
-===== インクルードフック =====
+===== インクルードフックとは =====
+DokuWikiのテンプレートには[[https://www.dokuwiki.org/include_hooks|Include Hooks]]と呼ばれる仕組みがある。
+テンプレートディレクトリに指定のHTMLファイルを置くと、その内容が生成されるWikiページの所定の場所に差し込まれるという機能だ。
+例えば、''meta.html''なら''<head>''タグの中に展開されるといった具合。
-DokuWikiのテンプレートには[[https://www.dokuwiki.org/include_hooks|Include Hooks]]という機能─というか決まり事がある。
+下表がDokuWikiの標準的なフックである（2016-05-17現在）。
-テンプレートディレクトリに指定の名前のHTMLファイルを置くと、その内容を生成されるWikiページの特定の場所に組み込む機能だ。
-例えば、''meta.html''であれば''<head>''タグの中にファイル内容が展開されるという具合。
-この機能を使うと、テンプレートのコードを直接編集する事無く、ある程度、Wikiページをカスタマイズすることが可能だ。
-以下の表が利用可能なフックである（2016-05-17現在）
 ^ ファイル名 ^ HTMLが組み込まれる場所 ^
 |meta.html|''<head>''タグの内側|
 |topheader.html|''<body>''タグの後、右側ページの最上部|
-|header.html|Above the upper blue bar, below the pagename and wiki title|
+|header.html|上部青線の上、ページ名とwikiタイトルの下|
 |pageheader.html|パンくずの下、実コンテンツの上|
-|pagefooter.html|Above the lower blue bar, below the last changed Date|
+|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>