| | 1 | = Trac のインタフェースをカスタマイズする = #CustomizingtheTracInterface |
| | 2 | [[TracGuideToc]] |
| | 3 | |
| | 4 | == イントロダクション == #Introduction |
| | 5 | このページは Trac の外観をカスタマイズする方法をユーザに提案するために書きました。主要な話題は HTML テンプレートと CSS ファイルであり、プログラムコードではありません。ユーザ自身の特定のニーズを満たすために Trac の外観を変更する方法を、ユーザに示すことを意図しています。 Trac の全てのユーザにとって有益な、インタフェース変更の提案は、このページに書くのではなくチケットを使用してください。 [[BR]] '''(訳注: 本家サイトのチケットの話です)''' |
| | 6 | |
| | 7 | == プロジェクトのロゴとアイコン == #ProjectLogoandIcon |
| | 8 | Trac のインタフェースをカスタマイズする中で、最も簡単なのは、ロゴとサイトアイコンです。両方とも [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 | === ロゴ === #Logo |
| | 17 | `src` の設定を `site/` に続く画像ファイルの名前に変更してください。 `width` と `height` は画像ファイルにあわせて設定を変更してください。(Trac の chrome ハンドラはプロジェクトのディレクトリ `htdocs` と "`common/`" の中のファイル用に "`site/`" を使用します。) |
| | 18 | |
| | 19 | {{{ |
| | 20 | [header_logo] |
| | 21 | src = site/my_logo.gif |
| | 22 | alt = My Project |
| | 23 | width = 300 |
| | 24 | height = 100 |
| | 25 | }}} |
| | 26 | |
| | 27 | === アイコン === #Icon |
| | 28 | アイコンは `.gif` か `.ico` 形式の 16x16 の画像である必要があります。 `icon` の設定を `site/` に続くアイコンファイルの名前に変更してください。アイコンは通常、サイトの URL の横や、 `ブックマーク` メニューに表示されます。 |
| | 29 | |
| | 30 | {{{ |
| | 31 | [project] |
| | 32 | icon = site/my_icon.ico |
| | 33 | }}} |
| | 34 | |
| | 35 | Note: Internet Explorer では、ホストのルートディレクトリにある ``favicon.ico`` という名前のファイルしか許容しないため、このアイコンは無視されます。プロジェクトアイコンを IE と他のブラウザで共用したい場合、アイコンをホストのドキュメントルートに配置し、 ``trac.ini`` から以下のように参照します: |
| | 36 | |
| | 37 | {{{ |
| | 38 | [project] |
| | 39 | icon = /favicon.ico |
| | 40 | }}} |
| | 41 | |
| | 42 | == ナビゲーション項目のカスタマイズ == #CustomNavigationEntries |
| | 43 | [mainnav] と [metanav] を使用すると、ナビゲーション項目に使用されるテキストとリンクをカスタマイズしたり、無効化することができます (新規項目を追加することはできません)。 |
| | 44 | |
| | 45 | 以下の例では、 Wiki のスタートページへのリンク名を "Home" に変更して、 "Help/Guide" を非表示にします。さらに、 "View Tickets" エントリを特定のレポートにリンクさせます。 |
| | 46 | {{{ |
| | 47 | [mainnav] |
| | 48 | wiki.label = Home |
| | 49 | tickets.href = /report/24 |
| | 50 | |
| | 51 | [metanav] |
| | 52 | help = disabled |
| | 53 | }}} |
| | 54 | |
| | 55 | mainnav と metanav についての、より詳細な記述は TracNavigation を参照してください。 |
| | 56 | |
| | 57 | == サイトの外観 == #SiteAppearance |
| | 58 | |
| | 59 | Trac はテンプレートエンジンに [http://genshi.edgewall.org Genshi] を使用しています。ドキュメントはまだ書かれていませんが、次の tip は動くはずです。 |
| | 60 | |
| | 61 | カスタムスタイルシートへのリンクに加えて、独自のヘッダやフッタを追加したい場合、以下のような内容のファイル {{{/path/to/env/templates/site.html}}} または {{{/path/to/inherit/option/templates_dir/site.html}}} を作成してください: |
| | 62 | |
| | 63 | {{{ |
| | 64 | #!xml |
| | 65 | <html xmlns="http://www.w3.org/1999/xhtml" |
| | 66 | xmlns:py="http://genshi.edgewall.org/" |
| | 67 | py:strip=""> |
| | 68 | |
| | 69 | <!--! Add site-specific style sheet --> |
| | 70 | <head py:match="head" py:attrs="select('@*')"> |
| | 71 | ${select('*|comment()|text()')} |
| | 72 | <link rel="stylesheet" type="text/css" |
| | 73 | href="${href.chrome('site/style.css')}" /> |
| | 74 | </head> |
| | 75 | |
| | 76 | <body py:match="body" py:attrs="select('@*')"> |
| | 77 | <!--! Add site-specific header --> |
| | 78 | <div id="siteheader"> |
| | 79 | <!--! Place your header content here... --> |
| | 80 | </div> |
| | 81 | |
| | 82 | ${select('*|text()')} |
| | 83 | |
| | 84 | <!--! Add site-specific footer --> |
| | 85 | <div id="sitefooter"> |
| | 86 | <!--! Place your footer content here... --> |
| | 87 | </div> |
| | 88 | </body> |
| | 89 | </html> |
| | 90 | }}} |
| | 91 | Note: この例では、 Environment の `htdocs/style.css` を参照しています。 |
| | 92 | |
| | 93 | チケット登録のフォームに導入テキストを表示する (プレビューが非表示のとき) 場合は、次の例を追加してください。 |
| | 94 | |
| | 95 | {{{ |
| | 96 | #!xml |
| | 97 | <form py:match="div[@id='content' and @class='ticket']/form" py:attrs="select('@*')"> |
| | 98 | <py:if test="req.environ['PATH_INFO'] == '/newticket' and (not 'preview' in req.args)"> |
| | 99 | <p>Please make sure to search for existing tickets before reporting a new one!</p> |
| | 100 | </py:if> |
| | 101 | ${select('*')} |
| | 102 | </form> |
| | 103 | }}} |
| | 104 | |
| | 105 | 0.10 からアップグレードされた Environment で、かつ `site_newticket.cs` ファイルが既に存在している場合は、ワークアラウンドすることによってテンプレートをロードすることができます - !ClearSilver の処理が含まれていない場合に限ります (訳注: `<?cs?>` が含まれていない場合) 。また、この場合はただ一つの要素 (element) だけがインポートされるので、コンテンツはある種のラッパー (`<div>` ブロックやそれに似た親コンテナ) を必要とします。インクルードするためには XInclude の名前空間を指定しなければなりませんが、ドキュメントルート以外にも置くことができます: |
| | 106 | |
| | 107 | {{{ |
| | 108 | #!xml |
| | 109 | <form py:match="div[@id='content' and @class='ticket']/form" py:attrs="select('@*')" |
| | 110 | xmlns:xi="http://www.w3.org/2001/XInclude"> |
| | 111 | <py:if test="req.environ['PATH_INFO'] == '/newticket' and (not 'preview' in req.args)"> |
| | 112 | <xi:include href="site_newticket.cs"><xi:fallback /></xi:include> |
| | 113 | </py:if> |
| | 114 | ${select('*')} |
| | 115 | </form> |
| | 116 | }}} |
| | 117 | |
| | 118 | また、共通のテンプレートディレクトリに、 `site.html` (その名前にも関わらず) を置くことができます - `[inherit] templates_dir` オプションを参照してください。新しく、一個のグローバルな `site.html` ファイルに、ヘッダ, フッタ, チケット作成時の tips を組み込むことで、簡単なメンテナンス (および、大きなインストールを行った 0.10 からのバージョンアップのための移行パス) を提供しています。 |
| | 119 | |
| | 120 | == プロジェクトリスト == #ProjectList |
| | 121 | 複数の Trac プロジェクトを動かしているときに、カスタマイズした Genshi テンプレートを使用して、プロジェクトの一覧を表示することができます。 |
| | 122 | |
| | 123 | 以下に示すのは Trac が使用している、ホストするプロジェクトへのリンクのリストを表示するための基本のテンプレートです。ロードできないプロジェクトについては、エラーメッセージを表示します。これをあなた自身のインデックステンプレートのスタートポイントとして使用することができます。 |
| | 124 | |
| | 125 | {{{ |
| | 126 | #!text/html |
| | 127 | <!DOCTYPE html |
| | 128 | PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| | 129 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| | 130 | <html xmlns="http://www.w3.org/1999/xhtml" |
| | 131 | xmlns:py="http://genshi.edgewall.org/" |
| | 132 | xmlns:xi="http://www.w3.org/2001/XInclude"> |
| | 133 | <head> |
| | 134 | <title>プロジェクト一覧</title> |
| | 135 | </head> |
| | 136 | <body> |
| | 137 | <h1>プロジェクト一覧</h1> |
| | 138 | <ul> |
| | 139 | <li py:for="project in projects" py:choose=""> |
| | 140 | <a py:when="project.href" href="$project.href" |
| | 141 | title="$project.description">$project.name</a> |
| | 142 | <py:otherwise> |
| | 143 | <small>$project.name: <em>エラー</em> <br /> ($project.description)</small> |
| | 144 | </py:otherwise> |
| | 145 | </li> |
| | 146 | </ul> |
| | 147 | </body> |
| | 148 | </html> |
| | 149 | }}} |
| | 150 | |
| | 151 | カスタムテンプレートを使用する場合、 Web サーバにテンプレートのロケーションの設定を読み込ませる必要があります (確かめてみてください ... まだ 0.11 向けに変更していません): |
| | 152 | |
| | 153 | [wiki:TracFastCgi FastCGI] 用: |
| | 154 | {{{ |
| | 155 | FastCgiConfig -initial-env TRAC_ENV_PARENT_DIR=/parent/dir/of/projects \ |
| | 156 | -initial-env TRAC_ENV_INDEX_TEMPLATE=/path/to/template |
| | 157 | }}} |
| | 158 | |
| | 159 | [wiki:TracModPython mod_python] 用: |
| | 160 | {{{ |
| | 161 | PythonOption TracEnvIndexTemplate /path/to/template |
| | 162 | }}} |
| | 163 | |
| | 164 | [wiki:TracCgi CGI] 用: |
| | 165 | {{{ |
| | 166 | SetEnv TRAC_ENV_INDEX_TEMPLATE /path/to/template |
| | 167 | }}} |
| | 168 | |
| | 169 | [wiki:TracStandalone] の tracd を動かすのに使用するシェルの中で `TRAC_ENV_INDEX_TEMPLATE` の環境変数を設定する必要があるでしょう: |
| | 170 | - Unix |
| | 171 | {{{ |
| | 172 | #!sh |
| | 173 | $ export TRAC_ENV_INDEX_TEMPLATE=/path/to/template |
| | 174 | }}} |
| | 175 | - Windows |
| | 176 | {{{ |
| | 177 | #!sh |
| | 178 | $ set TRAC_ENV_INDEX_TEMPLATE=/path/to/template |
| | 179 | }}} |
| | 180 | |
| | 181 | ---- |
| | 182 | See also TracGuide, TracIni |
