転載・引用について

ユーザ用ツール

サイト用ツール


serviceapp:dokuwiki:template

DokuWikiのテンプレート

WARNING

本記事は大変に古いので、以下の記事内容は過去記録のためのみに残してあります。 いつかまたTemplateを自前で頑張る時が来たら大幅に更新します。

DokuWikiにおいて、表示されるデザインを決めるのはテンプレートである。

Dokuwikiには、様々なテンプレートがっ準備されており、非常に便利になっている。最近では、標準のテンプレートにもサイドバーが入っていたりと、機能的にも標準でよい場合が多い。

しかし筆者は、長い間Arcticを利用してきたため、「いまさら」標準テンプレートに移行することは「面倒」である。 (いや、今のデザインは「ダサい」感じもあるので、少しはいじりたいと思わないでもないが、その時間も取れない)

というわけで、arcticテンプレートを修正して使うためのメモを記載しておく。

テンプレートのインストール

筆者が使い始めた当時のDokuwikiに標準で添付されていたテンプレートは、まだ初期でもあったため、あまり機能が無かった。 そのため、その頃DokuWikiサイトにあったほとんどのテンプレートを試した結果として、結局以下の3つに絞り込んだ。

  1. arctic
  2. sidebar
  3. dokucms

当時(2009年初頭)の筆者の要件として、(今考えれば愚かな要求だが)

  • 「サイドバーが欲しい」できれば「両サイドに設置したい」
  • 「名前空間を表示するのはサイドバーにしたい」
  • 「blog」の名前空間は表示したくない

というものがあったため、サイドバーのカスタマイズがかなり細かく可能にみえたarcticを利用する事にしたのが、Arcticとの付き合いの始まりである。 なお、テンプレートは、DokuWiki Templateに大量に掲載されている。

  1. Template(arctic)をダウンロードする
  2. アーカイブを展開し、それをsome/where/dokuwiki-dir/lib/tplにコピーする。
    • この際、httpdの実行者が読み出し可能でないと、当然反映されないので、permissionは最低でも u+r,g+r,o+rにしておく必要がある。
  3. 「管理」→「サイト設定」→「基本」の「テンプレート」プルダウンメニューに、インストールしたテンプレートが表示されるので、それを選択
  4. 一度「保存」を実行する
  5. 目次内に選択したテンプレートが表示される(通常は最下部に表示される)ので、選択すると、テンプレート毎の設定が記述できる。

テンプレートの変更

arcticは非常に色々な調整が出来るテンプレートなので、個人の好みに合うように調整することが非常に簡単だった。

基本的な事は、全てtemplate:arcticに書かれている。

しかし、日本語ではないので、ちょっとだけ敷居が高そうとも思うので、少しだけ設定を書いておく。

テンプレート変更の基本

テンプレートは、頻度は低いがそれでも更新されることがある。その更新のたびに「デザイン変更」作業を行うのは明らかに馬鹿げている。 従って、そのような作業を行わなくてすむように以下の方法を利用する。

Dokuwikiにおいて、多くの(恐らく全ての)テンプレートは、以下の順でテンプレートのデザインを読み出すと考えられる。

  1. style.ini
  2. style.iniに記載されているcssファイル
  3. style.local.ini
  4. 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%に設定した。 これは、好みの問題もあるのであまりお勧めはしないが、やり方だけは書いておく。

  1. lib/tpl/arctic/arctic_design.cssをエディターで開く
  2. 以下のように変更する
    • 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から検索フィールドを切り離せばいいのかもしれないが、それよりはサイズを変更する方が簡単だったので、そちらで対応。

  1. some/where/dokuwiki-dir/conf/userstyle.cssを作成
  2. 以下の内容を書き込む
    • div.dokuwiki #qsearch__in {
        width: 65%;
      }
    • ここでのwidthの値は、sidebarの幅に対する比率となっている。
    • 適切な比率をトライアンドエラーで実験して決めればよい。

Code Blockで表示領域を小さくする

幾つかのページで、Codeブロックに取り込んでいるcodeが長く、画面を大幅に食ってしまった。 これが非常に気に入らなかったので、Designを修正して対応する。

  • design.local.cssファイルを開く
  1. Codeブロックの高さ制限を入れる
    1. design.css内のdiv.dokuwiki pre.codeをコピーし、以下の2行を加える
        max-height:       25em;
        overflow:         auto;
  2. Fileブロックの高さ制限を入れる
    1. design.css内のdiv.dokuwiki pre.fileをコピーし、以下の2行を加える
        max-height:       25em;
        overflow:         auto;

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}}
このウェブサイトはクッキーを使用しています。 Webサイトを使用することで、あなたはあなたのコンピュータにクッキーを保存することに同意します。 また、あなたはあなたが私たちのプライバシーポリシーを読んで理解したことを認めます。 同意しない場合はウェブサイトを離れてください。クッキーに関する詳細情報
serviceapp/dokuwiki/template.txt · 最終更新: 2018/05/14 14:37 by 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki