= Trac のインタフェースをカスタマイズする = #CustomizingtheTracInterface
[[TracGuideToc]]
== イントロダクション == #Introduction
このページは Trac の外観をカスタマイズする方法をユーザに提案するために書きました。主要な話題は HTML テンプレートと CSS ファイルであり、プログラムコードではありません。ユーザ自身の特定のニーズを満たすために Trac の外観を変更する方法を、ユーザに示すことを意図しています。 Trac の全てのユーザにとって有益な、インタフェース変更の提案は、このページに書くのではなくチケットを使用してください。 [[BR]] '''(訳注: 本家サイトのチケットの話です)'''
== プロジェクトのロゴとアイコン == #ProjectLogoandIcon
Trac のインタフェースをカスタマイズする中で、最も簡単なのは、ロゴとサイトアイコンです。両方とも [wiki:TracIni trac.ini] に設定するだけで構成できます。
ロゴやアイコンのイメージは、 Trac Environment フォルダの中の "htdocs" というフォルダに置かなければいけません。 (''Note: バージョン 0.9 以前の Trac で作成したプロジェクトでは、このフォルダを自分で作成する必要があります'')
''Note: 実際は、ロゴとアイコンはサーバのどこのパスにおいてもかまいません(Web サーバがアクセスできるところならですが)。設定の中でそれらの絶対またはサーバの相対 URL を使用します。''
[wiki:TracIni trac.ini] の適切なセクションの構成は以下の通りです:
=== ロゴ === #Logo
`src` の設定を `site/` に続く画像ファイルの名前に変更してください。 `width` と `height` は画像ファイルにあわせて設定を変更してください。(Trac の chrome ハンドラはプロジェクトのディレクトリ `htdocs` と "`common/`" の中のファイル用に "`site/`" を使用します。)
{{{
[header_logo]
src = site/my_logo.gif
alt = My Project
width = 300
height = 100
}}}
=== アイコン === #Icon
アイコンは `.gif` か `.ico` 形式の 16x16 の画像である必要があります。 `icon` の設定を `site/` に続くアイコンファイルの名前に変更してください。アイコンは通常、サイトの URL の横や、 `ブックマーク` メニューに表示されます。
{{{
[project]
icon = site/my_icon.ico
}}}
Note: Internet Explorer では、ホストのルートディレクトリにある ``favicon.ico`` という名前のファイルしか許容しないため、このアイコンは無視されます。プロジェクトアイコンを IE と他のブラウザで共用したい場合、アイコンをホストのドキュメントルートに配置し、 ``trac.ini`` から以下のように参照します:
{{{
[project]
icon = /favicon.ico
}}}
== ナビゲーション項目のカスタマイズ == #CustomNavigationEntries
[mainnav] と [metanav] を使用すると、ナビゲーション項目に使用されるテキストとリンクをカスタマイズしたり、無効化することができます (新規項目を追加することはできません)。
以下の例では、 Wiki のスタートページへのリンク名を "Home" に変更して、 "Help/Guide" を非表示にします。さらに、 "View Tickets" エントリを特定のレポートにリンクさせます。
{{{
[mainnav]
wiki.label = Home
tickets.href = /report/24
[metanav]
help = disabled
}}}
mainnav と metanav についての、より詳細な記述は TracNavigation を参照してください。
== サイトの外観 == #SiteAppearance
Trac はテンプレートエンジンに [http://genshi.edgewall.org Genshi] を使用しています。ドキュメントはまだ書かれていませんが、次の tip は動くはずです。
カスタムスタイルシートへのリンクや、独自のヘッダやフッタを追加したい場合、
以下のようなの内容ファイルを、プロジェクトの templates ディレクトリに 'site.html' という名前で作成してください (各 Trac プロジェクトは独自の内容の site.html を持つことができます)。{{{/path/to/env/templates/site.html}}} の例:
{{{
#!xml
${select('*|comment()|text()')}
${select('*|text()')}
}}}
XSLT に慣れ親しんだ人であれば、 Genshi テンプレートには類似点があるのに気付くかもしれません。しかしながら Trac 固有の機能もあります。例えば '''${href.chrome('site/style.css')}''' は Environment に含まれる ''htdocs/'' にあるファイルへの参照の属性に置き換えられます。 '''${chrome.htdocs_location}''' は似ていますが、 Trac インストール時に作成された共通の ''htdocs/'' ディレクトリを指定するために使用します。
site.html はサイト固有のすべての変更を含んでいる一つのファイルです。通常は、要素 (element) または属性 (attribute) として py:match を使用することでレンダリングされるページを変更することができるようになります。 py:match は特定のセクションに依存した記載が行われており、ページを検索してマッチした箇所を変更します。
site.html には変更を行うための py:match セクションをいくつでも記載することができます。これらはすべて [http://genshi.edgewall.org/ Genshi] の文法に沿って行います。ドキュメントや詳細なシンタックスは前述のリンクを参考にしてください。
チケット登録のフォームに導入テキストを表示する (プレビューが非表示のとき) 場合は、次の例を追加してください:
{{{
#!xml
}}}
この例では '''`req.environ['PATH_INFO']`''' を使用して、特定のビューだけで変更が行われるようにスコープを限定しています。例えば site.html でタイムラインだけで変更を行い、他のセクションには影響を及ぼしたくない場合は、 ''`req.environ['PATH_INFO'] == '/timelime'`'' を での test に記載します。
0.10 からアップグレードされた Environment で、かつ `site_newticket.cs` ファイルが既に存在している場合は、ワークアラウンドすることによってテンプレートをロードすることができます - !ClearSilver の処理が含まれていない場合に限ります (訳注: `` が含まれていない場合) 。また、この場合はただ一つの要素 (element) だけがインポートされるので、コンテンツはある種のラッパー (`` ブロックやそれに似た親コンテナ) を必要とします。インクルードするためには XInclude の名前空間を指定しなければなりませんが、ドキュメントルート以外にも置くことができます:
{{{
#!xml