Am 19.10.2006 um 09:24 schrieb Christopher Lenz:
> Am 19.10.2006 um 00:57 schrieb Andrew Backer:
>> Is there a guide out there, or at least some tips, for customizing
>> the
>> site layout with the new genshi version. In .10 there was
>> "site_header.cs", "site_css.cs", and others but these have now been
>> replaced by a "site.html" which simply says
>> <!--custom match templates go here-->
>> I know what a match is, but I looked at layout.html and don't see how
>> to do it.
> Say you want to add a link to a custom stylesheet, and then your own
> header and footer:
Figured I should maybe explain some of what's going on there...
You need a top-level element because it's required by XML, and to
declare the Genshi namespace (xmlns:py="http://
genshi.edgewall.org/"). The py:strip="" is needed so that you don't
get to <html> elements in the output.
> <!--! Add site-specific style sheet -->
> <head py:match="head" py:attrs="select('@*')">
> ${select('*')}
> <link rel="stylesheet" type="text/css"
> href="${href.chrome('site/style.css')}" />
> </head>
This is a match template that matches the <head> element. I.e.
whenever Genshi sees a <head> element in the stream, it will be
replaced by this snippet. The select() function (only available
inside match templates) lets you pull in content from the original
<head>.
py:attrs="select('@*')" is used to pull up any attributes defined on
the original <head> element.
${select('*')} is an expression that pulls up any child elements of
the <head>, such as the <title>, <meta> tags, etc.
After that, we add a custom <link> element to reference a site style
sheet. The name and path of the style sheet is entirely up to you...
this example uses a style.css file stored in the project environments
htdocs directory. Also, you can do other stuff here, such as include
javascript files/snippets, meta tags, etc.
> <body py:match="body" py:attrs="select('@*')">
> <!--! Add site-specific header -->
> <div id="siteheader">
> ...
> </div>
> ${select('*|text()')}
> <!--! Add site-specific footer -->
> <div id="sitefooter">
> ...
> </div>
> </body>
This one matches the <body> element. It does the same py:attrs trick
as before to pull up attributes. It then adds header <div> before any
other content, and a footer <div> after that content. The original
content is pulled in via ${select('*|text()')}, an XPath expression
that selects all child elements and text nodes.
As an additional example, let's assume you wanted to display a
warning on the newticket page, i.e. something you'd do with the
site_newticket.cs template in 0.10. With site.html, you'd add the
following:
<form py:match="form[@id='newticket']" py:attrs="select('@*')">
<div class="warning">
<p>Please make sure to search for existing tickets before
reporting a
new one!</p>
</div>
${select('*')}
</form>
(I just encountered a bug while testing this, the warning is rendered
multiple times... will look into that...)
> </html>
More details can be found in the Genshi documentation:
<http://genshi.edgewall.org/wiki/Documentation>
<http://genshi.edgewall.org/wiki/Documentation/xml-templates.html>
Hope this helps,
Chris
--
Christopher Lenz
cmlenz at gmx.de
http://www.cmlenz.net/
