TracInterfaceCustomization: バージョン 1 における更新

差分発生行の前後
無視リスト:
更新者:
trac (IPアドレス: 127.0.0.1)
更新日時:
2006/11/22 18:14:01 (18 年前)
コメント:

--

凡例:

変更無し
追加
削除
更新

  • TracInterfaceCustomization

    v0 v1  
     1= Trac のインタフェースをカスタマイズする = 
     2[[TracGuideToc]] 
     3 
     4== イントロダクション == 
     5このページは Trac の外観をカスタマイズする方法をユーザに提案するために書きました。主要な話題は HTML テンプレートと CSS ファイルであり、プログラムコードではありません。特定のニーズを満たすために Trac の外観を変更する方法を、ユーザに示すことを意図しています。 Trac の全てのユーザにとって有益な、インタフェース変更の提案は、このページに書くのではなくチケットを使用してください。 [[BR]] '''(訳注: 本家サイトのチケットの話です)''' 
     6 
     7== プロジェクトのロゴとアイコン == 
     8Trac のインタフェースをカスタマイズする中で、最も簡単なのは、ロゴとサイトアイコンです。両方とも [wiki:TracIni trac.ini] に設定するだけで構成できます。 
     9 
     10ロゴやアイコンのイメージは、 Trac Environment フォルダの中の "htdocs" というフォルダに置かなければいけません。 (''Note: バージョン 0.9 以前の Trac で作成したプロジェクトでは、このフォルダを自分で作成する必要があります'') 
     11 
     12 ''Note:実際、ロゴとアイコンはサーバのどこのパスにおいてもかまいません(Web サーバがアクセスできるところならですが)。 そして、設定の中でそれらの絶対またはサーバの相対 URL を使用します。'' 
     13 
     14[wiki:TracIni trac.ini] の適切なセクションの構成は以下の通りです: 
     15 
     16=== ロゴ === 
     17`src` の設定を `site/` に続く画像ファイルの名前に変更してください。 `width` と `height` は画像ファイルにあわせて設定を変更してください。(Trac の chrome ハンドラはプロジェクトのディレクトリ `htdocs` と "`common/`" の中のファイル用に "`site/`" を使用します。) 
     18 
     19{{{ 
     20[header_logo] 
     21src = site/my_logo.gif 
     22alt = My Project 
     23width = 300 
     24height = 100 
     25}}} 
     26 
     27=== アイコン === 
     28アイコンは `.gif` か `.ico` 形式の 16x16 の画像である必要があります。 `icon` の設定を `site/` に続くアイコンファイルの名前に変更してください。アイコンは通常、サイトの URL の横や、 `ブックマーク` メニューに表示されます。 
     29 
     30{{{ 
     31[project] 
     32icon = site/my_icon.ico 
     33}}} 
     34 
     35Note: Internet Explorer では、ホストのルートディレクトリにある ``favicon.ico`` という名前のファイルしか許容しないため、このアイコンは無視されます。プロジェクトアイコンを IE と他のブラウザで共用したい場合、アイコンをホストのドキュメントルートに配置し、 ``trac.ini`` から以下のように参照します: 
     36 
     37{{{ 
     38[project] 
     39icon = /favicon.ico 
     40}}} 
     41 
     42== サイトヘッダとサイトフッタ == 
     43 
     44それぞれのプロジェクトの Trac Environment フォルダには {{{templates}}} ディレクトリがあります。このフォルダには {{{site_header.cs}}} と {{{site_footer.cs}}} というファイルがあります。これらのファイルに HTML マークアップされた内容を追加することで、ユーザは Trac サイトをカスタマイズできます。2つのファイルはサイト内で {{{<body>}}} タグの直後と、 {{{</body>}}} タグの直前にそれぞれ展開されます。 
     45 
     46これらのファイルでは、静的な HTML を記述することが出来ます。動的に生成されるコンテンツを置きたい場合、 [http://www.clearsilver.net/ ClearSilver] テンプレート言語も使用できます。テンプレートで利用可能な変数を見たい場合、 Trac に接続している URL にクエリ文字列 `?hdfdump=1` を追加してください。テンプレートデータを構造化表示できます。 
     47 
     48== サイト CSS == 
     49Trac サイトのレイアウトを調整する主な方法は [http://www.w3.org/TR/REC-CSS2/ CSS] にスタイルのルールを追加し、デフォルトのルールをオーバレイすることです。このためのベストなやり方は、 Trac Environment の `templates` ディレクトリにあるファイル `site_css.cs` を編集することです。 テンプレートから取得したコンテンツは、 Trac が生成する全ての HTML ページで `<style type="text/css"></style>` 要素に挿入されます。 
     50 
     51カスタマイズしたスタイルのルールを `site_css.cs` ファイルに直接書くことも出来ますが、単に外部のスタイルシートへの参照を記述するのを推奨します。その結果、応答のたびにルールを送信するのではなく、ブラウザが CSS ファイルをキャッシュするのを可能にします。 
     52 
     53この例はホストの `style` ディレクトリに配置したスタイルシートをインポートする書き方です: 
     54{{{ 
     55@import url(/style/mytrac.css); 
     56}}} 
     57 
     58!ClearSilver の変数を使用することで、 Trac Environment の `htdocs` ディレクトリに格納したスタイルシートを参照させることが出来ます。 
     59{{{ 
     60@import url(<?cs var:chrome.href ?>/site/style.css); 
     61}}} 
     62 
     63== プロジェクトリスト == 
     64複数の Trac プロジェクトを動かしているときに、ClearSilver テンプレートをカスタマイズして、プロジェクトの一覧を表示することができます。 
     65 
     66以下に示すのは Trac が使用しているプロジェクトのリンクリストを表示するための基本のテンプレートです。ロードできないプロジェクトについては、エラーメッセージを表示します。これをあなた自身のインデックステンプレートのスタートポイントとして使用することができます。 
     67 
     68{{{ 
     69#!text/html 
     70<html> 
     71<head><title>プロジェクト一覧</title></head> 
     72<body> 
     73 <h1>プロジェクト一覧</h1> 
     74 <ul><?cs 
     75 each:project = projects ?><li><?cs 
     76  if:project.href ?> 
     77   <a href="<?cs var:project.href ?>" title="<?cs var:project.description ?>"> 
     78    <?cs var:project.name ?></a><?cs 
     79  else ?> 
     80   <small><?cs var:project.name ?>: <em>エラー</em> <br /> 
     81   (<?cs var:project.description ?>)</small><?cs 
     82  /if ?> 
     83  </li><?cs 
     84 /each ?> 
     85 </ul> 
     86</body> 
     87</html> 
     88}}} 
     89 
     90いったんカスタムテンプレートを作ると、web サーバにテンプレートのロケーションの設定を読み込ませる必要があります: 
     91 
     92[wiki:TracFastCgi FastCGI] 用: 
     93{{{ 
     94FastCgiConfig -initial-env TRAC_ENV_PARENT_DIR=/parent/dir/of/projects \ 
     95              -initial-env TRAC_ENV_INDEX_TEMPLATE=/path/to/template 
     96}}} 
     97 
     98[wiki:TracModPython mod_python] 用: 
     99{{{ 
     100PythonOption TracEnvIndexTemplate /path/to/template 
     101}}} 
     102 
     103[wiki:TracCgi CGI] 用: 
     104{{{ 
     105SetEnv TRAC_ENV_INDEX_TEMPLATE /path/to/template 
     106}}} 
     107 
     108 
     109== メインテンプレート == 
     110 
     111Trac の [http://www.clearsilver.net/ ClearSilver] テンプレートについても、カスタマイズしたバージョンを使用することが出来ます。 Note: Trac をアップグレードするときに多くの問題が発生するので、このテクニックは推奨されません: 残念ながら、テンプレートとアプリケーションコードの間には、フォームフィールドの名前やテンプレートデータの構造など、いくつか依存関係があります。また、これらは今後の Trac のバージョン間で互換性を持たないこともあります。 
     112 
     113どうしてもテンプレートを変更する必要があるなら、デフォルトのテンプレートディレクトリ (通常は `$prefix/share/trac/templates`) から、 Trac Environment の `templates` ディレクトリにテンプレートファイルをコピーして、必要な結果が得られるようにコピーの方を変更してください。 
     114 
     115---- 
     116See also TracGuide, TracIni 
track feed