Now you have pretty neat plugin already but let's add final twist and serve some static content like stylesheet and image.
もう、かなりきちんとしたプラグインを作りましたが、最後にひねりを加えて、スタイルシートやイメージのような静的コンテンツを扱えるようにしましょう。
First step is to ensure that your trac.ini doesn't have htdocs_location set otherwise Trac can't serve static data.
まず、trac.iniのhtdoc_locationにTracが静的データを扱えないような記述が去れていないことを確認してください。
（訳注：なにをいっているのか不明）
Since we don't have enough directories in our simple plugin let's make few more:
これまで作ったシンプルなプラグインではディレクトリが足りないので、以下のものを作りましょう：
./helloworld-plugin/helloworld/htdocs/
./helloworld-plugin/helloworld/htdocs/css/
./helloworld-plugin/helloworld/htdocs/images/
We want to use our own stylesheet to give some color to our fine content. For that we need cascaded stylesheet.
独自のスタイルシートをつくって、コンテンツに色をつけましょう。そのために、カスケードされた（訳注：？）スタイルシートが必要です。
Create helloworld.css in ./helloworld-plugin/helloworld/htdocs/css/:
./helloworld-plugin/helloworlg/htdocs/css/にhelloworlg.cssを作ります：
#!text/css
div.helloworld h1 {
color: red;
}
Images are always nice.
イメージはいいっすね。
Put small image named helloworld.jpg in ./helloworld-plugin/helloworld/htdocs/images/.
helloworld.jpgという小さなイメージを./helloworld-plugin/helloworld/htdocs/images/に置いてください。
Note: Since it's not practical to show jpg contents here you should find one image by yourself somewhere.
注：ここにはjpgは載せないので、どこかから適当なjpgを自分で探してきてください。
Even natural eggs doesn't grow Python eggs does.
Python eggは、何もしなくても育つなんてことはありません。（？）
Modify setup.py to include our static data:
静的データをインクルードするために、setup.pyを修正してください：
#!python
from setuptools import setup
PACKAGE = 'TracHelloworld'
VERSION = '0.1'
setup(name=PACKAGE,
version=VERSION,
packages=['helloworld'],
package_data={'helloworld' : ['htdocs/css/*.css', 'htdocs/images/*.jpg',
'templates/*.cs' ]}
entry_points={'trac.plugins': '%s = helloworld' % PACKAGE},
)
Trac doesn't know where our fine stylesheet and image is located. So you have to tell it to Trac.
やはり、Tracはスタイルシートやイメージがどこに置かれたかを知りません。Tracに教えてあげる必要があります。
Add the following code at the tail in file helloworld.py which implements get_htdocs_dir() to tell the static data path information for this plugin with identical prefix 'hw'.
次のコードをhelloworld.pyの最後に追加してください。このget_htdocs_dir()は、静的データのパス情報に'hw'というプレ フィックス（訳注：hwはhelloworldの略なので、自分でプラグイン作るときはhwにする必要はありません)をつけてプラグインに通知します。
#!python
def get_htdocs_dirs(self):
"""
Return a list of directories with static resources (such as style
sheets, images, etc.)
Each item in the list must be a `(prefix, abspath)` tuple. The
`prefix` part defines the path in the URL that requests to these
resources are prefixed with.
The `abspath` is the absolute path to the directory containing the
resources on the local file system.
"""
from pkg_resources import resource_filename
return [('hw', resource_filename(__name__, 'htdocs'))]
To make Trac to load our stylesheet you need to modify process_request method starting from line 23 to following:
Tracにスタイルシートを読み込ませるように、process_requestメソッドを修正してください。
#!python
def process_request(self, req):
add_stylesheet(req, 'hw/css/helloworld.css')
return 'helloworld.cs', None
Note that prefix path 'hw/' specified by get_htdocs_dirs() should be used.
注：プレフィックスパス 'hw/'はget_htdocs_dirs()のなかで指定したものを使ってください。
And also import add_stylesheet() at the beginning of helloworld.py.
そして、helloworld/pyの冒頭で、add_stylesheet()をインポートしてください。
#!python
from trac.web.chrome import INavigationContributor, ITemplateProvider, add_stylesheet
The whole of final code is here:
最終的なコードは以下になります：
#!python
# Helloworld plugin
from trac.core import *
from trac.web.chrome import INavigationContributor, ITemplateProvider, add_stylesheet
from trac.web.main import IRequestHandler
from trac.util import escape, Markup
class UserbaseModule(Component):
implements(INavigationContributor, IRequestHandler, ITemplateProvider)
# INavigationContributor methods
def get_active_navigation_item(self, req):
return 'helloworld'
def get_navigation_items(self, req):
yield 'mainnav', 'helloworld', Markup('<a xhref="%s">Hello</a>',
self.env.href.helloworld())
# IRequestHandler methods
def match_request(self, req):
return req.path_info == '/helloworld'
def process_request(self, req):
add_stylesheet(req, 'hw/css/helloworld.css')
return 'helloworld.cs', None
# ITemplateProvider methods
def get_templates_dirs(self):
"""
Return the absolute path of the directory containing the provided
ClearSilver templates.
"""
from pkg_resources import resource_filename
return [resource_filename(__name__, 'templates')]
def get_htdocs_dirs(self):
"""
Return a list of directories with static resources (such as style
sheets, images, etc.)
Each item in the list must be a `(prefix, abspath)` tuple. The
`prefix` part defines the path in the URL that requests to these
resources are prefixed with.
The `abspath` is the absolute path to the directory containing the
resources on the local file system.
"""
from pkg_resources import resource_filename
return [('hw', resource_filename(__name__, 'htdocs'))]
We need to add our image to template to see it.
テンプレートにイメージを追加します。
Our new helloworld.cs:
helloworld.csを以下のように変更してください：
#!text/html
<?cs include "header.cs" ?>
<?cs include "macros.cs" ?>
<div id="content" class="helloworld">
<h1>Hello world!</h1>
<img xsrc="<?cs var:chrome.href ?>/hw/images/helloworld.jpg">
</div>
<?cs include "footer.cs" ?>
Now you should be familiar with both, so make an egg and deploy it.
両方を行ったら、eggを作って設置してください。
Click and see... Hello world! with your pretty own image.
あなた自身が用意した画像とともにHello world!が見えたでしょうか。
Now you have successfully completed nice simple plugin that uses it's own template and serves some static data.
これで、テンプレートと静的データを使ったシンプルで綺麗なプラグインが出来ましたね。