| | 1 | = Trac のインタフェースをカスタマイズする = |
| | 2 | [[TracGuideToc]] |
| | 3 | |
| | 4 | == イントロダクション == |
| | 5 | このページは Trac の外観をカスタマイズする方法をユーザに提案するために書きました。主要な話題は HTML テンプレートと CSS ファイルであり、プログラムコードではありません。特定のニーズを満たすために Trac の外観を変更する方法を、ユーザに示すことを意図しています。 Trac の全てのユーザにとって有益な、インタフェース変更の提案は、このページに書くのではなくチケットを使用してください。 |
| | 6 | [[BR]] '''(訳注: 本家サイトのチケットの話です)''' |
| | 7 | |
| | 8 | == プロジェクトのロゴとアイコン == |
| | 9 | Trac のインタフェースをカスタマイズする中で、最も簡単なのは、ロゴとサイトアイコンです。両方とも [wiki:TracIni trac.ini] に設定するだけで構成できます。 |
| | 10 | |
| | 11 | ロゴやアイコンのイメージは、 Trac Environment フォルダの中の "htdocs" というフォルダに置かなければいけません。 (''Note: バージョン 0.9 以前の Trac で作成したプロジェクトでは、このフォルダを自分で作成する必要があります'') |
| | 12 | |
| | 13 | [wiki:TracIni trac.ini] の適切なセクションの構成は以下の通りです: |
| | 14 | |
| | 15 | === ロゴ === |
| | 16 | `src` の設定を `site/` に続く画像ファイルの名前に変更してください。 `width` と `height` は画像ファイルにあわせて設定を変更してください。 |
| | 17 | |
| | 18 | {{{ |
| | 19 | [header_logo] |
| | 20 | src = site/my_logo.gif |
| | 21 | alt = My Project |
| | 22 | width = 300 |
| | 23 | height = 100 |
| | 24 | }}} |
| | 25 | |
| | 26 | === アイコン === |
| | 27 | アイコンは `.gif` か `.ico` 形式の 16x16 の画像である必要があります。 `icon` の設定を `site/` に続くアイコンファイルの名前に変更してください。アイコンは通常、サイトの URL の横や、 `ブックマーク` メニューに表示されます。 |
| | 28 | |
| | 29 | {{{ |
| | 30 | [project] |
| | 31 | icon = site/my_icon.ico |
| | 32 | }}} |
| | 33 | |
| | 34 | Note: Internet Explorer では、ホストのルートディレクトリにある ``favicon.ico`` という名前のファイルしか許容しないため、このアイコンは無視されます。プロジェクトアイコンを IE と他のブラウザで共用したい場合、アイコンをホストのドキュメントルートに配置し、 ``trac.ini`` から以下のように参照します: |
| | 35 | |
| | 36 | {{{ |
| | 37 | [project] |
| | 38 | icon = /favicon.ico |
| | 39 | }}} |
| | 40 | |
| | 41 | == サイトヘッダとサイトフッタ == |
| | 42 | それぞれのプロジェクトの Trac Environment フォルダには {{{templates}}} ディレクトリがあります。このフォルダには {{{site_header.cs}}} と {{{site_footer.cs}}} というファイルがあります。これらのファイルに HTML マークアップされた内容を追加することで、ユーザは Trac サイトをカスタマイズできます。2つのファイルはサイト内で {{{<body>}}} タグの直後と、 {{{</body>}}} タグの直前にそれぞれ展開されます。 |
| | 43 | |
| | 44 | これらのファイルでは、静的な HTML を記述することが出来ます。動的に生成されるコンテンツを置きたい場合、 [http://www.clearsilver.net/ ClearSilver] テンプレート言語も使用できます。テンプレートで利用可能な変数を見たい場合、 Trac に接続している URL にクエリ文字列 `?hdfdump=1` を追加してください。テンプレートデータを構造化表示できます。 |
| | 45 | |
| | 46 | == サイト CSS == |
| | 47 | Trac サイトのレイアウトを調整する主な方法は [http://www.w3.org/TR/REC-CSS2/ CSS] にスタイルのルールを追加し、デフォルトのルールをオーバレイすることです。このためのベストなやり方は、 Trac Environment の `templates` ディレクトリにあるファイル `site_css.cs` を編集することです。 テンプレートから取得したコンテンツは、 Trac が生成する全ての HTML ページで `<style type="text/css></style>` 要素に挿入されます。 |
| | 48 | |
| | 49 | カスタマイズしたスタイルのルールを `site_css.cs` ファイルに直接書くことも出来ますが、単に外部のスタイルシートへの参照を記述するのを推奨します。その結果、応答のたびにルールを送信するのではなく、ブラウザが CSS ファイルをキャッシュするのを可能にします。 |
| | 50 | |
| | 51 | この例はホストの `style` ディレクトリに配置したスタイルシートをインポートする書き方です: |
| | 52 | {{{ |
| | 53 | @import url(/style/mytrac.css); |
| | 54 | }}} |
| | 55 | |
| | 56 | !ClearSilver の変数を使用することで、 Trac Environment の `htdocs` ディレクトリに格納したスタイルシートを参照させることが出来ます。 |
| | 57 | {{{ |
| | 58 | @import url(<?cs var:chrome.href ?>/site/style.css); |
| | 59 | }}} |
| | 60 | |
| | 61 | == メインテンプレート == |
| | 62 | |
| | 63 | Trac の [http://www.clearsilver.net/ ClearSilver] テンプレートについても、カスタマイズしたバージョンを使用することが出来ます。 Note: Trac をアップグレードするときに多くの問題が発生するので、このテクニックは推奨されません: 残念ながら、テンプレートとアプリケーションコードの間には、フォームフィールドの名前やテンプレートデータの構造など、いくつか依存関係があります。また、これらは今後の Trac のバージョン間で互換性を持たないこともあります。 |
| | 64 | |
| | 65 | どうしてもテンプレートを変更する必要があるなら、デフォルトのテンプレートディレクトリ (通常は `$prefix/share/trac/templates`) から、 Trac Environment の `templates` ディレクトリにテンプレートファイルをコピーして、必要な結果が得られるようにコピーの方を変更してください。 |
| | 66 | |
| | 67 | |
| | 68 | ---- |
| | 69 | See also TracGuide, TracIni |
