DokuWikiのテンプレート
WARNING
本記事は大変に古いので、以下の記事内容は過去記録のためのみに残してあります。 いつかまたTemplateを自前で頑張る時が来たら大幅に更新します。
DokuWikiにおいて、表示されるデザインを決めるのはテンプレートである。
Dokuwikiには、様々なテンプレートがっ準備されており、非常に便利になっている。最近では、標準のテンプレートにもサイドバーが入っていたりと、機能的にも標準でよい場合が多い。
しかし筆者は、長い間Arcticを利用してきたため、「いまさら」標準テンプレートに移行することは「面倒」である。 (いや、今のデザインは「ダサい」感じもあるので、少しはいじりたいと思わないでもないが、その時間も取れない)
というわけで、arcticテンプレートを修正して使うためのメモを記載しておく。
テンプレートのインストール
筆者が使い始めた当時のDokuwikiに標準で添付されていたテンプレートは、まだ初期でもあったため、あまり機能が無かった。 そのため、その頃DokuWikiサイトにあったほとんどのテンプレートを試した結果として、結局以下の3つに絞り込んだ。
- arctic
- sidebar
- dokucms
当時(2009年初頭)の筆者の要件として、(今考えれば愚かな要求だが)
- 「サイドバーが欲しい」できれば「両サイドに設置したい」
- 「名前空間を表示するのはサイドバーにしたい」
- 「blog」の名前空間は表示したくない
というものがあったため、サイドバーのカスタマイズがかなり細かく可能にみえたarcticを利用する事にしたのが、Arcticとの付き合いの始まりである。 なお、テンプレートは、DokuWiki Templateに大量に掲載されている。
- Template(arctic)をダウンロードする
- アーカイブを展開し、それを
some/where/dokuwiki-dir/lib/tpl
にコピーする。- この際、httpdの実行者が読み出し可能でないと、当然反映されないので、permissionは最低でも u+r,g+r,o+rにしておく必要がある。
- 「管理」→「サイト設定」→「基本」の「テンプレート」プルダウンメニューに、インストールしたテンプレートが表示されるので、それを選択
- 一度「保存」を実行する
- 目次内に選択したテンプレートが表示される(通常は最下部に表示される)ので、選択すると、テンプレート毎の設定が記述できる。
テンプレートの変更
arcticは非常に色々な調整が出来るテンプレートなので、個人の好みに合うように調整することが非常に簡単だった。
基本的な事は、全てtemplate:arcticに書かれている。
しかし、日本語ではないので、ちょっとだけ敷居が高そうとも思うので、少しだけ設定を書いておく。
テンプレート変更の基本
テンプレートは、頻度は低いがそれでも更新されることがある。その更新のたびに「デザイン変更」作業を行うのは明らかに馬鹿げている。 従って、そのような作業を行わなくてすむように以下の方法を利用する。
Dokuwikiにおいて、多くの(恐らく全ての)テンプレートは、以下の順でテンプレートのデザインを読み出すと考えられる。
- style.ini
- style.iniに記載されているcssファイル
- style.local.ini
- style.local.iniにに記載されているcssファイル
従って、テンプレートが更新されても全ての設定を「維持できる」/「最小限の設定変更ですませることが出来る」ようにするには、
- 全体共通のパラメータの変更は style.local.iniに記載
- 個別のデザイン変更はstyle.local.iniに記載されているcssファイル
に書けばよい事がわかる。
※注:但し、筆者はarcticでしか試していないので、各人で各人が利用しているテンプレートで試すこと。
個別デザイン変更に関しては、例えば、design.cssの変更を行いたいなら、design.local.cssというファイルを準備して、必要な設定を投入することにする。これによって、何を変更したかが判りやすくなることが期待できる。
Page Design(style)
ページデザイン(ページスタイル)の変更には、直接ファイルを変更する必要がある。
Color設定変更
some/where/dokuwiki-dir/lib/tpl/arctic/style.ini
を修正すれば、色やページサイズの調整が可能である。
ちなみに本サイトでは、以下のような設定を行った。この設定は、基本的に背景をグリーンにし、文字が見やすいように調整をしただけとなっている。
- style.local.ini
; ; Dokuwiki Arctic style customization. ; [stylesheets] design.local.css = screen print.local.css = print arctic_design.local.css = screen userstyle.css = screen [replacements] __wiki_width__ = "98%" __body_margin__ = "1em" __font_size__ = "0.9em" __pagename_color__ = "#ffe0ff" __logo_color__ = "#ffe0ff" __headline_color__ = "#000" __body_background__ = "#c0ffc0" __header_background__ = "#002f00" __footer_background__ = "#002f00" __form_border__ = "#008000" __text__ = "#333" __background__ = "#efe" __text_alt__ = "#906090" __background_alt__ = "#e0d0e0" __text_neu__ = "#666" __background_neu__ = "#f0f0f0" __border__ = "#ccc" __text_other__ = "#ccc" __background_other__ = "#f0fff0" __extern__ = "#2828a0" __existing__ = "#5050e0" __missing__ = "#e05050" __visited__ = "#285060"
Justifyの変更
画面表示の調整だが、一般に英語はjustifyすることが望ましい場合が多い。 しかし、日本語ページが中心である場合、justifyされると見た目が汚くなってしまうことが多い。 そこで、以下のファイル中のjustify宣言があるブロックを抜きだし、justifyを取り除いて宣言する。
- arctic_design.css → arctic_design.local.css
- design.css → design.local.css
- print.css → print.local.css
Sidebarのサイズ変更
サイドバーのサイズを画面全体の横幅に対して15%に設定した。 これは、好みの問題もあるのであまりお勧めはしないが、やり方だけは書いておく。
- lib/tpl/arctic/arctic_design.cssをエディターで開く
- 以下のように変更する
- Sidebarのサイズは画面全体の15%とする。Sidebarを片側、もしくは両側開いても大丈夫なように修正を投入
div.dokuwiki div.left_sidebar { float: left; width: 15%; /* Original: 22% */ padding: 0.2em 0.5em 0 0; border-right: 1px solid __border__; } div.dokuwiki div.right_sidebar { float: right; width: 15%; /* Original: 22% */ padding: 0.2em 0em 0 0.5em; border-left: 1px solid __border__; } div.dokuwiki div.left_page, div.dokuwiki div.right_page { /* text-align: justify; */ /* これはjustifyを削除したため。 */ float: left; width: 80% !important; /* Original: 72% */ width: 78%; /* Original: 69% */ padding: 2%; } div.dokuwiki div.center_page { /* text-align: justify; */ float: left; width: 64% !important; /* Original: 49% */ width: 62%; /* Original: 47% */ padding: 2% !important; padding: 1%; }
これで、サイドバーのサイズは15%に変更される。
検索フィールドサイズの変更
sidebarの大きさを変えたので、検索フィールドが不格好になってしまった。
sidebarから検索フィールドを切り離せばいいのかもしれないが、それよりはサイズを変更する方が簡単だったので、そちらで対応。
some/where/dokuwiki-dir/conf/userstyle.css
を作成- 以下の内容を書き込む
div.dokuwiki #qsearch__in { width: 65%; }
- ここでのwidthの値は、sidebarの幅に対する比率となっている。
- 適切な比率をトライアンドエラーで実験して決めればよい。
Code Blockで表示領域を小さくする
幾つかのページで、Codeブロックに取り込んでいるcodeが長く、画面を大幅に食ってしまった。 これが非常に気に入らなかったので、Designを修正して対応する。
- design.local.cssファイルを開く
- Codeブロックの高さ制限を入れる
- design.css内の
div.dokuwiki pre.code
をコピーし、以下の2行を加えるmax-height: 25em; overflow: auto;
- Fileブロックの高さ制限を入れる
- design.css内の
div.dokuwiki pre.file
をコピーし、以下の2行を加えるmax-height: 25em; overflow: auto;
Sidebar
sidebarは役割によって作成される名前空間が異なる。
- main: 名前空間は sidebar (?id=sidebar)
- user: 名前空間は user:username:sidebar (?id=user:username:sidebar)
- group: 名前空間は group:username:sidebar (?id=group:username:sidebar)
これだけ判っていれば恐らく大丈夫だと思われる。
本ページの昔のサイドバーは以下のような設定をしていた。(現在は、このような設定はしていない)
====== Site Contents Index ====== ~~NOCACHE~~ * [[:Diary|日記]] * [[:diaryidx|日記の目次]] {{indexmenu>os#1|js#bj-tango.png navbar nocookie id#random tsort msort}} {{indexmenu>serverapp#1|js#bj-tango.png navbar nocookie id#random tsort msort}} * [[:Tips|Tips]] * [[http://www.dokuwiki.org/%3Aja%3Asyntax|Wiki構文]] {{indexmenu>wiki|js#bj-tango.png navbar nocookie id#random tsort msort}}