Arcticテンプレート

サイドバーがあってカスタマイズ性も高く人気らしいテンプレート。ここから入手。

~~ダウンロード＆解凍後、「dokuwiki/lib/tpl」にフォルダごと入れる。「管理画面 > 基本 > テンプレート」で選ぶと使えるようになる。~~

今は普通に管理者画面の拡張機能管理から「Arctic Template」で検索して自動インストールできる。下記の記述は、レンタルサーバの都合でプラグインの自動インストール機能を利用できなかった頃のもののため、異なる部分があるかも知れない。

あと、今はBootstrap3 Templateが、カスタマイズ性高くてレスポンシブ対応も出来ていいらしい。

サイドバーの内容変更

最初はサイドバーにエラーっぽい表示が出るかもしれない。これは初期設定でサイドバーに表示するページが「(root):sidebar」になっているのに、そのようなページが存在しないためである。言われた通りsidebarという名前のページを作る。サイドバーが必要ないなら管理画面から表示しないようにする。

「左サイドバーの順序（カンマ区切り）」

index,toc

「左サイドバーの内容」は、index,tocのみチェック

スタイル調整

iniファイル

Arcticを含む多くのテンプレートは、iniファイルによって読み込ませるcssなどを設定する。

iniファイルでは、[stylesheets]と[replacements]が指定できる。

[stylesheets]
- 読み込むcssファイル名と、それが読み込まれる環境(ブラウザ表示時か、印刷時かなど)を指定する
[replacements]
- 随所のcssに共通で使われる色や長さを変数のように指定できる

Dokuwikiは、まず(dokuwiki_dir)/lib/tpl/(tpl名)/style.iniを読み込む。続いて(dokuwiki_dir)/conf/tpl/(tpl名)/style.iniがあれば読み込み、同じ項目を上書きする。後者はテンプレートがアップグレードされても上書きされないユーザ用のiniとなる。

;cssファイル名 = それが読み込まれるmode
[stylesheets]
mystyle.css = screen

; 置換文字列を追加
[replacements]
__shadow__ = "rgba(0,0,0,0.4)"

[stylesheets]で設定したcssファイルは、(dokuwiki_dir)/conf/tpl/(tpl名)/からの相対パスとなる。よって上記の指定では、(dokuwiki_dir)/conf/tpl/(tpl名)/mystyle.cssが追加で読み込まれることとなる。

cssファイル

firefoxならfirebug、chromeなら開発者ツールなどで元々のスタイル指定を調べ、同じスタイル指定で上書きする方が、レイアウトを変えたときに予期せぬデザイン崩れがおきにくい、気がする。

LESS記法が使えるため、生cssより構造的に記述できる。普通のcssで書いてももちろん可。

div.dokuwiki h1,
div.dokuwiki h2,
div.dokuwiki h3,
div.dokuwiki h4,
div.dokuwiki h5 {
    padding: 5px 0 5px 5px;
    border-left:6px solid __border__;
}

div.dokuwiki h3,
div.dokuwiki h4 {
    border-bottom: 1px solid __border__;
}

div.dokuwiki pre.code,
div.dokuwiki pre.file {
    border-radius: 8px 8px 8px 8px;
    box-shadow: 1px 2px 3px __shadow__ inset;
}
div.dokuwiki p {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;
    line-height:1.5;
    letter-spacing:1px;
    color:#333;
}

/* sidebar */
div.dokuwiki div.left_sidebar {
	width: 196px;
	padding: 3px 6px 0 0;
}
div.dokuwiki div.left_page, div.dokuwiki div.right_page {
    padding: 6px 12px 0 6px;
    width: 738px !important;
}
div.dokuwiki .sidebar_box ul ul {/* 2段目以降のインデントを少し減らす */
    margin-left: .8em;
}

/* header, footer */
div.dokuwiki .header {
    border-radius: 12px 12px 0 0;
}
div.dokuwiki .footerinc {
    border-radius: 0 0 12px 12px;
}

/* shadow */
div.dokuwiki .header,
#bar__bottom,
div.dokuwiki .footerinc {
    box-shadow: 0 2px 2px __shadow__;
}

/* <code> highlight color adjust */
.code .kw1 {
    color: #808000;
}

JavaScript編集

JavaScriptを追加したければ、「conf/userscript.js」というファイルを作ると、自動的に読み込んでくれる。¹⁾詳しくはja:devel:javascript

arcticテンプレートを使うことを前提としてjsを書くので、テンプレートに関係なく読み込まれるconfよりも、テンプレート固有のjsに追記した方が理に適っている。しかし、テンプレート固有のjsは「lib/tpl/<テンプレート名>/script.js」しか読み込んでくれないらしい。arcticテンプレートではscript.jsが既に存在するため、ごっちゃになるのを避ける事を優先してconfの方にした。

ひとまず、サイドバーのメインと目次は常に見えていた方が便利なのでスクロールに追従するように。

2013/02/02追記：インデックスが長くなってウィンドウに収まりきらないことが増えてきたので、「サイドバー全体ではウィンドウに収まりきらないが、目次だけなら収まる」場合は目次だけ追従するように更新。ただしcssの値を取得するのが面倒だったから「サイドバーには検索とsidebarとtocのみ、この順で表示している」「sidebarのcssのborderやmarginはいじっていない」ことが前提となる。完全に個人使用。

userscript.js

/*
 * for "arctic template"
 */
 
(function($){
/* follow sidebar by scroll */
var sfSidebarFollow = function() {
	var sfSidebar = $(".left_sidebar");
	var sfSearch = sfSidebar.find("#dw__search");
	var sfMainSidebar = sfSidebar.find(".main_sidebar");
	var sfTocbox = sfSidebar.find(".toc_sidebar");
	var sfRightpage = $(".right_page");
	var sfSidebarOffset = sfSidebar.offset().top;
	var sfTocboxPadding = parseFloat(sfTocbox.css("paddingTop")) + parseFloat(sfTocbox.css("paddingBottom"))
						+ parseFloat(sfTocbox.css("borderTopWidth")) + parseFloat(sfTocbox.css("borderBottomWidth"));
	var sfTopPadding = 12;
	$(window).scroll(function() {
		//ウィンドウサイズがサイドバーの高さより高ければ、追従する。
		var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
		var winScrollTop = $(window).scrollTop();
		if (windowHeight > sfSidebar.height() + sfTopPadding
				//↓が無いと、RightPageよりもSidebarが高く、
				//かつスクロール可能なときに少しずつ際限なくスクロールしてしまう
				&& sfRightpage.height() > sfSidebar.height()
				&& winScrollTop > sfSidebarOffset - sfTopPadding) {
			var sbMarginTop = Math.min(
				winScrollTop - sfSidebarOffset + sfTopPadding,
				sfRightpage.height() - sfSidebar.height() - sfTopPadding //下端到達用
			);
			sfSidebar.stop().animate({
				marginTop: sbMarginTop
			}, 500);
		} else {
			//ウィンドウサイズがサイドバーの高さより小さければ、下部の内容が見れなくなるため追従しない。
			sfSidebar.stop().animate({
				marginTop: 0
			}, 500);
			//ウィンドウサイズが目次の高さより高ければ、目次だけ追従する。
			var sfTocboxOffset = sfSearch.height() + sfMainSidebar.height() + 12;
			//12は検索とメインボックスのpadding,border,margin分。めんどいので数値直接指定
			if (windowHeight > sfTocbox.height() + sfTopPadding
					&& sfRightpage.height() > sfTocbox.height()
					&& winScrollTop > sfSidebarOffset + sfTocboxOffset - sfTopPadding) {
				var tbMarginTop = Math.min(
					winScrollTop - sfSidebarOffset - sfTocboxOffset + sfTopPadding,
					sfRightpage.height() - sfTocboxOffset - sfTocbox.height() - sfTopPadding - sfTocboxPadding
				);
				sfTocbox.stop().animate({
					marginTop: tbMarginTop
				}, 500);
			} else {
				sfTocbox.stop().animate({
					marginTop: 0
				}, 500);
			}
		}
	});
};


$(function() {
	sfSidebarFollow();
});

})(jQuery);

旧版（サイドバー全体のみ追従）

/*
 * for "arctic template"
 */
 
(function($){
/* follow sidebar by scroll */
var sfSidebarFollow = function() {
	var sfSidebar = $(".left_sidebar");
	var sfRightpage = $(".right_page");
	var sfSidebarOffset = sfSidebar.offset().top;
	var sfTopPadding = 24;
	$(window).scroll(function() {
		//ウィンドウがサイドバーの高さより小さければ追従しない。
		var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
		if (windowHeight > sfSidebar.height() + sfTopPadding
				//右ページがサイドバーより小さければ追従しない
				&& sfRightpage.height() > sfSidebar.height()
				&& $(window).scrollTop() > sfSidebarOffset - sfTopPadding) {
			var sbMarginTop = Math.min(
				$(window).scrollTop() - sfSidebarOffset + sfTopPadding,
				sfRightpage.height() - sfSidebar.height() - sfTopPadding
			);
			sfSidebar.stop().animate({
				marginTop: sbMarginTop
			}, 500);
		} else {
			sfSidebar.stop().animate({
				marginTop: 0
			}, 500);
		}
	});
};


$(function() {
	sfSidebarFollow();
});

})(jQuery);

ロゴの変更

ロゴは初期状態ではWikiタイトルがそのままテキストとして表示されるが、ちょっとダサいし、目立たないためそれがWiki全体のタイトルであるとも分かりづらい。ロゴ画像に変更する。

lib/tpl/arctic/main.php を直接編集する。つまり、Arcticテンプレートをアップグレードしたら上書きされるので、そのたびに書き換えが発生する。

調べれば外部注入できるのかも知れないが、多分PHPを読む限りこればっかりは仕方ないように思う。

        <div class="logo">
          <?php tpl_link(wl(),$conf['title'],'id="dokuwiki__top" accesskey="h" title="[ALT+H]"')?>
          ↓
          <?php tpl_link(wl(),'<img src="/url/to/logo.png">','id="dokuwiki__top" accesskey="h" title="[ALT+H]"')?>
        </div>

dokuwiki, arctic, css, javascript

¹⁾

実際はHTTPリクエストを減らすために、他の必要なスクリプトを全部併せて圧縮にかけた後で、1つのスクリプトとして読み込む。