| 56 | | == Site Appearance #SiteAppearance |
| 57 | | |
| 58 | | Trac is using [http://genshi.edgewall.org Genshi] as the templating engine. Say you want to add a link to a custom stylesheet, and then your own header and footer. Save the following content as `site.html` inside your projects `templates/` directory (each Trac project can have their own `site.html`), eg `/path/to/env/templates/site.html`: |
| 59 | | |
| 60 | | {{{#!xml |
| 61 | | <html xmlns="http://www.w3.org/1999/xhtml" |
| 62 | | xmlns:py="http://genshi.edgewall.org/" |
| 63 | | py:strip=""> |
| 64 | | |
| 65 | | <!--! Add site-specific style sheet --> |
| 66 | | <head py:match="head" py:attrs="select('@*')"> |
| 67 | | ${select('*|comment()|text()')} |
| 68 | | <link rel="stylesheet" href="${href.chrome('site/style.css')}" /> |
| 69 | | </head> |
| 70 | | |
| 71 | | <body py:match="body" py:attrs="select('@*')"> |
| 72 | | <!--! Add site-specific header --> |
| | 56 | == Site Appearance |
| | 57 | |
| | 58 | Trac is using [http://jinja.pocoo.org/ Jinja2] as the templating engine. |
| | 59 | |
| | 60 | We have put in place a number of "placeholder" in the form of "include" directives. These files don't need to exist, but if they do, their content will be processed by Jinja2 as well. As such, they can make use of other "include" directives, or any other feature of Jinja2 to generate dynamic content. |
| | 61 | |
| | 62 | There are three such placeholder templates: |
| | 63 | - `site_head.html`, which can be used to add content inside the generated `<head>` element |
| | 64 | - `site_header.html`, which can be used to **prepend** content inside the generated `<body>` element, before the standard content generated by Trac |
| | 65 | - `site_header.html`, which can be used to **append** content inside the generated `<body>` element, after the standard content generated by Trac |
| | 66 | |
| | 67 | Say you want to add a link to a custom stylesheet, and then your own header and footer. Save the following content as `site_head.html`, `site_header.html` and `site_footer.html` inside your projects `templates/` directory (each Trac project can have their own "placeholder" files) e.g. `/path/to/env/templates/site_head.html`: |
| | 68 | |
| | 69 | `site_head.html`: |
| | 70 | {{{#!xml |
| | 71 | <!-- site_head.html: Add site-specific style sheet --> |
| | 72 | <link rel="stylesheet" href="${href.chrome('site/style.css')}" /> |
| | 73 | <!-- /site_head.html --> |
| | 74 | }}} |
| | 75 | |
| | 76 | `site_header.html`: |
| | 77 | {{{#!xml |
| | 78 | <!-- site_header.html: Add site-specific header --> |
| 83 | | </body> |
| 84 | | </html> |
| 85 | | }}} |
| 86 | | |
| 87 | | Notice that XSLT bears some similarities with Genshi templates. However, there are some Trac specific features, for example the `${href.chrome('site/style.css')}` attribute references `style.css` in the environment's `htdocs/` directory. In a similar fashion `${chrome.htdocs_location}` is used to specify the common `htdocs/` directory belonging to a Trac installation. That latter location can however be overriden using the [TracIni#trac-htdocs_location-option "[trac] htdocs_location"] setting. |
| 88 | | |
| 89 | | `site.html` is one file to contain all your modifications. It usually works using the `py:match` directive (element or attribute), and it allows you to modify the page as it renders. The matches hook into specific sections. See [http://groups.google.com/group/trac-users/browse_thread/thread/70487fb2c406c937/ this thread] for a detailed explanation of the above example `site.html`. |
| 90 | | A `site.html` can contain any number of `py:match` sections. This is all Genshi, so the [http://genshi.edgewall.org/wiki/Documentation/xml-templates.html docs on the exact syntax] can be found there. |
| | 91 | <!-- /site_footer.html --> |
| | 92 | }}} |
| | 93 | |
| | 94 | Notice that as Jinja2 is mostly content agnostic, you are free to open some `<div>` element in the `site_header.html` file and only close it in `site_footer.html` file. |
| | 95 | Besides, as in any other Trac Jinja2 template, you can use some Trac specific features, for example the `${href.chrome('site/style.css')}` attribute references `style.css` in the environment's `htdocs/` directory. In a similar fashion `${chrome.htdocs_location}` is used to specify the common `htdocs/` directory belonging to a Trac installation. That latter location can however be overriden using the [TracIni#trac-htdocs_location-option "[trac] htdocs_location"] setting. |
| 94 | | {{{#!xml |
| 95 | | <form py:match="div[@id='content' and @class='ticket']/form" py:attrs="select('@*')"> |
| 96 | | <py:if test="req.path_info == '/newticket' and (not 'preview' in req.args)"> |
| 97 | | <p>Please make sure to search for existing tickets before reporting a new one!</p> |
| 98 | | </py:if> |
| 99 | | ${select('*')} |
| 100 | | </form> |
| 101 | | }}} |
| 102 | | |
| 103 | | This example illustrates a technique of using `req.path_info` to limit scope of changes to one view only. For instance, to make changes in `site.html` only for timeline and avoid modifying other sections, use `req.path_info == '/timeline'` as the condition in a `<py:if>` test. |
| 104 | | |
| 105 | | More examples snippets for `site.html` can be found at [trac:wiki:CookBook/SiteHtml CookBook/SiteHtml]. |
| | 99 | - first we need to introduce the extra "content" of this notice, if it's appropriate for the request. For that, we add this snippet in the `site_footer.html` placeholder file: |
| | 100 | {{{#!xml |
| | 101 | # if req.path_info == '/newticket' and 'preview' not in req.args: |
| | 102 | <p id="ntg">Please make sure to search for existing tickets before reporting a new one!</p> |
| | 103 | # endif |
| | 104 | }}} |
| | 105 | - second, we need to dynamically alter the rest of the content in order to position that notice at the desired location. For that, we add this snippet to the `site_head.html` placeholder file: |
| | 106 | |
| | 107 | {{{#!xml |
| | 108 | <script> |
| | 109 | jQuery(function($) { |
| | 110 | var $ntg = $("#newticketguide"); |
| | 111 | if ($ntg.length) |
| | 112 | $("#propertyform").prepend($ntg.detach()); |
| | 113 | }); |
| | 114 | </script> |
| | 115 | }}} |
| | 116 | |
| | 117 | This example illustrates a technique of using `req.path_info` to limit scope of changes to one view only. For instance, to make changes only for timeline and avoid modifying other sections, use `req.path_info == '/timeline'` as the condition in a `# if` test. |
| | 118 | |
| | 119 | More examples snippets for placeholsder files can be found at [trac:wiki:CookBook/SiteHtml CookBook/SiteHtml]. |
| 178 | | The appearance of each individual Trac environment, ie instance of a project, can be customized independently of other projects, even those hosted on the same server. The recommended way is to use a `site.html` template whenever possible, see [#SiteAppearance]. Using `site.html` means changes are made to the original templates as they are rendered, and you should not normally need to redo modifications whenever Trac is upgraded. If you do make a copy of `theme.html` or any other Trac template, you need to migrate your modifiations to the newer version. If not, new Trac features or bug fixes may not work as expected. |
| | 194 | The appearance of each individual Trac environment, ie instance of a project, can be customized independently of other projects, even those hosted on the same server. The recommended way is to use `site_{head,header,footer}.html` templates whenever possible, see [#SiteAppearance]. Using `site_{head,header,footer}.html` means changes are made to the original templates as they are rendered, and you should not normally need to redo modifications whenever Trac is upgraded. If you do make a copy of `theme.html` or any other Trac template, you need to migrate your modifiations to the newer version. If not, new Trac features or bug fixes may not work as expected. |
