====== DokuWikiのテンプレート ======
{{indexmenu_n>1}}
DokuWikiの表示画面を決めるのはテンプレートである。
もちろん標準のテンプレートでも良いのだが、サイドバーが欲しかったり、色を変えたり、デザイン自体を変更したい場合に、気に入ったテンプレートを利用する事によって、見栄えも随分変化する。
なお本ページは、arcticテンプレートを修正した物を利用している。
* [[:serverapp:dokuwiki#DokuWikiのInstall|インストール]]
* [[:serverapp:dokuwiki:plugin|プラグイン]]
* [[:serverapp:dokuwiki:template|テンプレート（このページ）]]
* [[:serverapp:dokuwiki:etc|その他]]
{{tag> dokuwiki template}}
===== テンプレートのインストール =====
DokuWikiサイトにあるほとんどのテンプレートを試してみたが、結局以下の3つだけ残った。
- arctic
- sidebar
- dokucms
筆者の要件として、
* 「サイドバーが欲しい」できれば「両サイドに設置したい」（将来、Google AdSenseを入れるため）
* 「名前空間を表示するのはサイドバーにしたい」
* 「blog」の名前空間は表示したくない
というものがあったため、サイドバーのカスタマイズがかなり細かく可能そうなarcticを利用する事にする。
テンプレートは、[[doku>>Template|DokuWiki Template]]に大量に掲載されているので、そこを参照。
テンプレートは、''some/where/dokuwiki-dir/lib/tpl''に設置する。
- まず、インストールしたいテンプレートをftp等で入手する
- アーカイブを展開し、それを''some/where/dokuwiki-dir/lib/tpl''にコピーする。
* この際、httpdの実行者が読み出し可能でないと、当然反映されないので、permissionは最低でも u+r,g+r,o+rにしておく必要がある。
- 「管理」→「サイト設定」→「基本」の「テンプレート」pull down menuに、インストールしたテンプレートが表示されるので、それを選択
- 一度保存を実行する
- 目次内に選択したテンプレートが表示される（通常は最下部に表示される）ので、選択すると、テンプレート毎の設定が記述できる。
===== テンプレートの変更 =====
arcticは非常に色々な調整が出来るテンプレートなので、個人の好みに合うように調整することが非常に簡単だった。
基本的な事は、全て[[doku>template:arctic]]に書かれている。
しかし、日本語ではないので、ちょっとだけ敷居が高そうとも思うので、少しだけ設定を書いておく。
==== Page Design(style) ====
ページデザイン（ページスタイル）の変更には、直接ファイルを変更する必要がある。
=== Color設定変更 ===
''some/where/dokuwiki-dir/lib/tpl/arctic/style.ini''を修正すれば、色やページサイズの調整が可能である。\\
ちなみに「ほほほのほ」は、以下の設定を行った。この設定は、基本的に背景をグリーンにするものである。
あとはその他の文字が見やすいように調整をしただけとなっている。
; ARCTIC-TEMPLATE-DEFAULT-STYLE.INI
; @author: Michael Klier
; Please see http://www.php.net/manual/en/function.parse-ini-file.php
; for limitations of the ini format used here
; Define the stylesheets your template uses here. The second value
; defines for which output media the style should be loaded. Currently
; print, screen and rtl are supported. rtl styles are loaded additionally
; to screen styles if a right-to-left language is selected (eg. hebrew)
[stylesheets]
layout.css = screen
arctic_layout.css = screen
design.css = screen
arctic_design.css = screen
style.css = screen
media.css = screen
arctic_media.css = screen
rtl.css = rtl
arctic_rtl.css = rtl
print.css = print
arctic_print.css = print
; This section is used to configure some placeholder values used in
; the stylesheets. Changing this file is the simplest method to
; give your wiki a new look.
[replacements]
; arctic template LAYOUT
__wiki_width__ = "98%" ; 84%
__header_height__ = "5em"
__body_margin__ = "1em" ; 1.5em
__page_padding__ = "0.5em;"
__footer_padding__ = "2em"
; arctic template FONT-SIZES AND FONT-COLORS
__font_size__ = "0.8125em"
__line_height__ = "150%"
__pagename_color__ = "#ffefff" ; #f8f8f8
__logo_color__ = "#ffefff" ; #f8f8f8
__headline_color__ = "#000" ; #333
; arctic template LAYOUT-COLORS
__body_background__ = "#c0ffc0" ; #f8f8f8
__header_background__ = "#002f00" ; #436976
__footer_background__ = "#002f00" ; #436976
__form_border__ = "#008000" ; #efffef
;--------------------------------------------------------------------------
;------ guaranteed dokuwiki color placeholders that every plugin can use
; main text and background colors
__text__ = "#333"
__background__ = "#efe" ; #fff
; alternative text and background colors
__text_alt__ = "#638c9c"
__background_alt__ = "#dee7ec"
; neutral text and background colors
__text_neu__ = "#666"
__background_neu__ = "#f5f5f5"
; border color
__border__ = "#ccc"
;--------------------------------------------------------------------------
; other text and background colors
__text_other__ = "#ccc"
__background_other__ = "#f7f9fa"
; these are used for links
__extern__ = "#2828a0" ; #436976
__existing__ = "#5050e0" ; #56b04f
__missing__ = "#e05050" ; #ed5353
; highlighting search snippets
__highlight__ = "#ff9"
;--------------------------------------------------------------------------
;------ for keeping old templates and plugins compatible to the old pattern
; (to be deleted at the next or after next release)
__white__ = "#fff"
__lightgray__ = "#f5f5f5"
__mediumgray__ = "#ccc"
__darkgray__ = "#666"
__black__ = "#000"
; these are the shades of blue
__lighter__ = "#f7f9fa"
__light__ = "#eef3f8"
__medium__ = "#dee7ec"
__dark__ = "#8cacbb"
__darker__ = "#638c9c"
; setup vim: ts=2 sw=2:
=== Justifyの変更 ===
画面表示の調整だが、一般に英語はjustifyすることが望ましい場合が多い。
しかし、日本語ページが中心である場合、justifyされると見た目が汚くなってしまうことが多い。
そこで、以下のファイル中にあるjustify宣言をコメントアウトする。
* arctic_design.css
* design.css
* print.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の幅に対する比率となっている。
* 適切な比率をトライアンドエラーで実験して決めればよい。
==== 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}}