サイドバーを取り付ける
Edgewall SoftwareのTracページのように Trac のすべてのページにサイドバーを取り付けてみる。
スタイルシート追加
まずは、PROJECT/templete/site_css.cs にて必要なスタイルシートの定義を行うのだが、ここに記述した内容は丸々HTMLソースに乗っかってしまうので、ここでは
@import url(<?cs var:htdocs_location ?>css/sidebar.css)
とだけ記述する。ClearSilver によって var:htdocs_location は PROJECT/conf/trac.ini の trac セクションにある htdocs_location で指定した URL に置換される。
sidebar.cssは、
/* メイン画面全体をコンテナとして使えるようにする */ #main { position: relative; width: auto; _width: 100%; top: 0; left: 0; } /* サイドバー本体、メイン画面の (0, 0) の少し右に幅 100px で配置 */ div.sidebar { position: absolute; top: 0px; left: 0px; width: 100px; margin-left: 1em; } /* サイドバーにアイテムを列挙するための UL */ #sidebar ul { list-style: none; margin: 0px; padding: 0px; } /* サイドバーのアイテム、背景画像と文字のセンタリング設定 */ #sidebar li { background: #fff url(/images/plate.gif) top left; width: 100px; height: 31px; display: block; margin-left: auto; margin-right: auto; text-align: center; line-height: 31px; } /* 上記アイテムにあった設定に変更 */ #sidebar :link, #sidebar :visited, #sidebar :link:hover, #sidebar :visited:hover { color: black; background: transparent; border: none; } #sidebar :link:hover, #sidebar :visited:hover { font-weight: bold; } /* Trac のメインコンテンツを右に128px移動 */ #content { margin-left: 128px; }
こんなかんじで作った。
サイドバーを埋め込む
trac の PROJECT/template/site_header.cs と site_footer.cs では、ナビゲーションバーやオルテテキストの上下になってしまうので、この2つではうまくサイドバーが収まらないので、footer.cs をカスタマイズする。
PYTHON/share/trac/template からカスタマイズしたいテンプレートファイルである footer.cs を PROJECT/template/ にコピーしてから内容を変更する、といっても先頭に3行足すのみ
<div id="sidebar" class="sidebar"> <?cs include "site_sidebar.cs" ?> </div>
内容からわかると思うが、site_sidebar.cs を PROJECT/template/ に作成する。
<ul> <li><a href="<?cs var:project.url ?>">Home</a></li> <li><a href="<?cs var:project.url ?>docs/">Documents</a></li> <li><a href="<?cs var:project.url ?>files/">Download</a></li> </ul>
とりあえず、これだけ。これでサイドバーがすべての Trac のコンテンツ内に付与された。
ClearSilver の if 文で site_sidebar.cs のチェックをして import を書き出すようにすれば、マスターテンプレートの footer.cs に書き込んじゃってもいいかな?
ClearSilver の使い方をちょっと調べて、可能そうならやってみよう。*1