差分
このページの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をカスタマイズする ====== | ====== インクルードフックとjQueryを使ってDokuWikiをカスタマイズする ====== | ||
- | ===== インクルードフック ===== | + | ===== インクルードフックとは |
+ | DokuWikiのテンプレートには[[https:// | ||
+ | テンプレートディレクトリに指定のHTMLファイルを置くと、その内容が生成されるWikiページの所定の場所に差し込まれるという機能だ。 | ||
+ | 例えば、'' | ||
- | DokuWikiのテンプレートには[[https:// | + | 下表がDokuWikiの標準的なフックである(2016-05-17現在)。 |
- | テンプレートディレクトリに指定の名前のHTMLファイルを置くと、その内容を生成されるWikiページの特定の場所に組み込む機能だ。 | + | |
- | 例えば、'' | + | |
- | + | ||
- | この機能を使うと、テンプレートのコードを直接編集する事無く、ある程度、Wikiページをカスタマイズすることが可能だ。 | + | |
- | + | ||
- | 以下の表が利用可能なフックである(2016-05-17現在) | + | |
^ ファイル名 ^ HTMLが組み込まれる場所 ^ | ^ ファイル名 ^ HTMLが組み込まれる場所 ^ | ||
|meta.html|''< | |meta.html|''< | ||
|topheader.html|''< | |topheader.html|''< | ||
- | |header.html|Above the upper blue bar, below the pagename and wiki title| | + | |header.html|上部青線の上、ページ名とwikiタイトルの下| |
|pageheader.html|パンくずの下、実コンテンツの上| | |pageheader.html|パンくずの下、実コンテンツの上| | ||
- | |pagefooter.html|Above the lower blue bar, below the last changed Date| | + | |pagefooter.html|下部青線の上、最終更新日の下| |
|footer.html|''</ | |footer.html|''</ | ||
+ | フックの処理はWiki側ではなくテンプレート側で実装されるものなので、規約というよりも紳士協定に近い。従ってテンプレートによっては対応してなかったり、逆に独自のフックを追加している場合もある。詳細は各テンプレートのドキュメント(とコード)で確認されたし。 | ||
+ | |||
+ | インクルードフックを使うとテンプレートのコードを弄らずにWikiページをカスタマイズ出来るようになるが、全てのページに対し一律で適用されるため、フック単体ではあまり凝ったことはできない。フックのファイル名が表すとおり、ヘッダやフッタといった全ページ共通で内容も位置も静的なコンテンツを挿入するといった事が想定された使われ方だろうか。 | ||
+ | |||
+ | ===== jQueryと組み合わせて使う ===== | ||
+ | |||
+ | だがしかし、インクルードフックとjQueryを組み合わせて使うことで一気に夢が広がリング。 | ||
+ | |||
+ | このページを見るくらいの人ならjQueryの事は知ってると思うが、念のため簡単に説明すると、ブラウザでHTMLの構造(DOM)を動的に変更するためのJavaScriptライブラリである。 | ||
+ | |||
+ | DOMをイジれるってことはHTMLの記述場所と実際の表示場所を変更できる訳で、つまるところ、Wiki本文内に表示したいHTMLをインクルードフックに“仮置き”しといて、jQueryで後から本文内に移動しちゃおうって寸法。 | ||
+ | |||
+ | 例えば、以下のようなインクルードフックを用意する。 | ||
+ | |||
+ | <file html meta.html> | ||
+ | < | ||
+ | jQuery(function() { | ||
+ | var goto | ||
+ | jQuery(' | ||
+ | </ | ||
+ | <file html pageheader.html> | ||
+ | <a name=" | ||
+ | <div class=" | ||
+ | <a href="# | ||
+ | </ | ||
+ | </ |