Plone4 theme:Diazo theme
Plone4 theme:Diazo theme
http://www.315ok.org/blogfolder/391
http://www.315ok.org/logo.png
Plone4 theme:Diazo theme
Plone4 theme:Diazo theme
Diazo正式的名字叫XDV，是Plone4中最具竞争力的theme技术。Diazo是一个三方公用技术，可以通过plone.app.theming完好地集成到plone中。顺便提一下，http://plone.org采用Diazo技术。
Diazo 能集成一个静态的HTML design 进入Plone,可以在任何地方添加任何html标记，然后用动态内容替换占位符。提供一个简单而强大的语法规则在不更改原始HTML theme和Plone模板的请看下啊，建立高级的theme。
Diazo基础
diazo启动于一个静态的页面设计，该页面设计可以是一个不懂得任何Plone知识的美工设计出来，但需要清晰的结构化的html和CSS，页面中各部件应给予恰当的CSS ID或class。最终完成的设计应该可以作为一个静态html在浏览器中打开，而不需要任何后台http server支持。因此页面中引用的图片、CSS和JS文件应该采用相对路径。
Diazo是采用一个中心规则集合来归并内容进入theme的，这个规则集合通常叫rules.xml，是一个标准的XML文件。规则作用在将被theme化的内容上，在我们的例子中，HTML内容由Plone产生。任何未放入theme的原始内容由theme规则抛弃。
下面是一个rules.xml样例：
• 主Diazo namespace 应用到大多数的tags 和attributes
• css namespace,用于包含CSS selectors的属性
• xsl namespace, 用于采用XSLT语法在线写行内的高级规则
首页我们通过,<theme/>标记引用一个作theme的 HTML 文件。这个 href属性指明这个theme的场所，这儿采用了一个相对路径。
We only apply this theme and its associated rules if the node indicated by the CSS selector #visual-portal-wrapper (that is, an element with that ID) exists in the content, using the css:if-content attribute on the nested <rules /> block. This ID exists on all standard Plone pages, but not on things like dialog boxes shown in the visual editor, which we do not want to style.
Additionally, a <notheme /> element may be combined with an if-content or other condition to conditionally disable the theme for certain requests.
条件可以被应用到任何规则。对于应用同样的条件到多个规则，我们可以采用嵌套的 <rules /> tag, 我们前面提到过，无条件的规则总是被执行的。
Diazo 支持下面的规则：
[table=90%]
[tr][td]规则[/td][td]作用[/td][/tr]
[tr][td]<replace />[/td][td]采用来自内容的节点或节点的子对象替换theme中的节点或节点的子对象。如果在内容中没有相应的节点匹配，theme中该节点被自动抛弃。条件规则能用于避免这种现象出现。[/td][/tr]
[tr][td]<before /> and
<after />[/td][td]将内容中匹配的节点放在对应皮肤中匹配的节点或者匹配的节点的所有子对象的前面或后面。[/td][/tr]
[tr][td]<drop />[/td][td]删除在皮肤或内容中的节点。不像其他规则, <drop /> 仅仅允许或者 theme 或者 content被指定，而不能两者同时被指定。 However, it is possible (and common) to drop a node in the theme using a conditional selector of the content, for example: with <drop css:theme="#something" css:ifcontent="#
another-thing" />.[/td][/tr]
[tr][td]<merge />[/td][td]Merges attributes of the node matched in the content into attributes on the node matched in the theme. The main use case is to merge space-separated CSS classes, for example:
<merge css:theme="body" css:content="body"
attributes="class" />.[/td][/tr]
[tr][td]<strip />[/td][td]从皮肤或内容中删除一个节点，但保留该节点的子对象。[/td][/tr]
[tr][td]<copy />[/td][td]拷贝一个在内容中匹配的节点的属性到匹配的皮肤节点中。[/td][/tr]
[/table]The rules are controlled by a number of attributes. These are:
[table=95%]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]content
css:content
content-children
css:content-children
[/td][td]All rules[/td][td]选择一个被操纵的内容节点，或者用 XPath 或者用 CSS3 selector。这个content children variant选择匹配节点的所有子对象，但不包括节点本身。[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]theme
css:theme
theme-children
css:theme-children
[/td][td]All rules[/td][td]Select a theme node to operate on, either by XPath or CSS3 selector. The theme children variant selects all children(including text and comment nodes) of the matched node, but not the node itself. Hence,<replace /> with theme-children leaves the matched node in place, but replaces all its children, while <after />
with theme-children appends the nodes from the content as the last nodes inside the matched theme node.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]content
css:content
content-children
css:content-children
[/td][td]All rules[/td][td]选择操作的内容节点，或者用 XPath 或者用 CSS3 selector。这个 content-children 包括当前匹配节点的所有子对象（包括文本和注释节点）但不包括该节点自身。[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]if[/td][td]All rules[/td][td]Make the rule or nested set of rules conditional upon a specific XPath expression.This can be used to test variables, which may be passed into the theme from the Theming control panel.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]if-path[/td][td]All rules[/td][td]Make the rule or nested set of rules apply only when the user is viewing a page matching the specified path. A leading /(forward slash) indicates the path should
match at the start of the URL. A trailing /(forward slash) indicates the paths should match at the end. For an exact match, use both a leading and a trailing /.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]attributes[/td][td]<replace />
<drop />
<copy />
<merge />[/td][td]A space-separated list of attributes to operate on. If specified for <replace /> or <drop/>, this indicates these will operate on attributes instead of nodes.
Use attributes="*" to operate on all attributes in the content.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]separator[/td][td]<merge />[/td][td]Separator 当归并属性值时采用，缺省是一个 space.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]method
[/td][td]<replace />
<before />
<after />[/td][td]If you have any <drop /> or other rules that manipulate the content, and you do not want those manipulations to be taken into account
when performing a replacement, you can add method="raw" to the rule to ensure it runs before any manipulation of the content.[/td][/tr]
[/table]
For example:
Diazo 能集成一个静态的HTML design 进入Plone,可以在任何地方添加任何html标记，然后用动态内容替换占位符。提供一个简单而强大的语法规则在不更改原始HTML theme和Plone模板的请看下啊，建立高级的theme。
Diazo基础
diazo启动于一个静态的页面设计，该页面设计可以是一个不懂得任何Plone知识的美工设计出来，但需要清晰的结构化的html和CSS，页面中各部件应给予恰当的CSS ID或class。最终完成的设计应该可以作为一个静态html在浏览器中打开，而不需要任何后台http server支持。因此页面中引用的图片、CSS和JS文件应该采用相对路径。
Diazo是采用一个中心规则集合来归并内容进入theme的，这个规则集合通常叫rules.xml，是一个标准的XML文件。规则作用在将被theme化的内容上，在我们的例子中，HTML内容由Plone产生。任何未放入theme的原始内容由theme规则抛弃。
Behind the scenes, Diazo compiles the theme and rules into a single XSLT transformation, which is run on he HTML output by Plone at the end of each request. When Zope debug mode is turned off, the verhead that this transformation adds is negligible.Diazo的规则作用在内容和皮肤的html标记节点上。节点可以采用XPath expressions (which are more powerful) 或者 CSS3 selectors(which are easier to write)来提取。
下面是一个rules.xml样例：
<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<rules css:if-content="#visual-portal-wrapper">
<theme href="index.html" />
<replace css:content="#content"
css:theme="#document-content" />
<replace css:content-children="#portal-column-one"
css:theme-children="#column-one" />
<replace css:content-children="#portal-column-two"
css:theme-children="#column-two" />
</rules>
</rules>这个XML 文档以<rules /> tag 为根，申明了三个名称空间：• 主Diazo namespace 应用到大多数的tags 和attributes
• css namespace,用于包含CSS selectors的属性
• xsl namespace, 用于采用XSLT语法在线写行内的高级规则
首页我们通过,<theme/>标记引用一个作theme的 HTML 文件。这个 href属性指明这个theme的场所，这儿采用了一个相对路径。
We only apply this theme and its associated rules if the node indicated by the CSS selector #visual-portal-wrapper (that is, an element with that ID) exists in the content, using the css:if-content attribute on the nested <rules /> block. This ID exists on all standard Plone pages, but not on things like dialog boxes shown in the visual editor, which we do not want to style.
It is also possible to use a path condition, which will match on the path of the page. For example, if-path="/news/" will match everything in the /news folder, including the folder itself. See the Diazo documentation for further details.Using conditions, we can enable different themes for different content pages or sections of our website. Diazo will pick the first theme where the corresponding condition is true. If a <theme /> tag without a condition is found, it will be used as the default when no other theme matches. Themes may be declared inside the toplevel <rules /> tag if they apply unconditionally.
Additionally, a <notheme /> element may be combined with an if-content or other condition to conditionally disable the theme for certain requests.
条件可以被应用到任何规则。对于应用同样的条件到多个规则，我们可以采用嵌套的 <rules /> tag, 我们前面提到过，无条件的规则总是被执行的。
Diazo 支持下面的规则：
[table=90%]
[tr][td]规则[/td][td]作用[/td][/tr]
[tr][td]<replace />[/td][td]采用来自内容的节点或节点的子对象替换theme中的节点或节点的子对象。如果在内容中没有相应的节点匹配，theme中该节点被自动抛弃。条件规则能用于避免这种现象出现。[/td][/tr]
[tr][td]<before /> and
<after />[/td][td]将内容中匹配的节点放在对应皮肤中匹配的节点或者匹配的节点的所有子对象的前面或后面。[/td][/tr]
[tr][td]<drop />[/td][td]删除在皮肤或内容中的节点。不像其他规则, <drop /> 仅仅允许或者 theme 或者 content被指定，而不能两者同时被指定。 However, it is possible (and common) to drop a node in the theme using a conditional selector of the content, for example: with <drop css:theme="#something" css:ifcontent="#
another-thing" />.[/td][/tr]
[tr][td]<merge />[/td][td]Merges attributes of the node matched in the content into attributes on the node matched in the theme. The main use case is to merge space-separated CSS classes, for example:
<merge css:theme="body" css:content="body"
attributes="class" />.[/td][/tr]
[tr][td]<strip />[/td][td]从皮肤或内容中删除一个节点，但保留该节点的子对象。[/td][/tr]
[tr][td]<copy />[/td][td]拷贝一个在内容中匹配的节点的属性到匹配的皮肤节点中。[/td][/tr]
[/table]The rules are controlled by a number of attributes. These are:
[table=95%]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]content
css:content
content-children
css:content-children
[/td][td]All rules[/td][td]选择一个被操纵的内容节点，或者用 XPath 或者用 CSS3 selector。这个content children variant选择匹配节点的所有子对象，但不包括节点本身。[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]theme
css:theme
theme-children
css:theme-children
[/td][td]All rules[/td][td]Select a theme node to operate on, either by XPath or CSS3 selector. The theme children variant selects all children(including text and comment nodes) of the matched node, but not the node itself. Hence,<replace /> with theme-children leaves the matched node in place, but replaces all its children, while <after />
with theme-children appends the nodes from the content as the last nodes inside the matched theme node.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]content
css:content
content-children
css:content-children
[/td][td]All rules[/td][td]选择操作的内容节点，或者用 XPath 或者用 CSS3 selector。这个 content-children 包括当前匹配节点的所有子对象（包括文本和注释节点）但不包括该节点自身。[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]if[/td][td]All rules[/td][td]Make the rule or nested set of rules conditional upon a specific XPath expression.This can be used to test variables, which may be passed into the theme from the Theming control panel.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]if-path[/td][td]All rules[/td][td]Make the rule or nested set of rules apply only when the user is viewing a page matching the specified path. A leading /(forward slash) indicates the path should
match at the start of the URL. A trailing /(forward slash) indicates the paths should match at the end. For an exact match, use both a leading and a trailing /.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]attributes[/td][td]<replace />
<drop />
<copy />
<merge />[/td][td]A space-separated list of attributes to operate on. If specified for <replace /> or <drop/>, this indicates these will operate on attributes instead of nodes.
Use attributes="*" to operate on all attributes in the content.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]separator[/td][td]<merge />[/td][td]Separator 当归并属性值时采用，缺省是一个 space.[/td][/tr]
[tr][td]属性[/td][td]使用环境 [/td][td]作用 [/td][/tr]
[tr][td]method
[/td][td]<replace />
<before />
<after />[/td][td]If you have any <drop /> or other rules that manipulate the content, and you do not want those manipulations to be taken into account
when performing a replacement, you can add method="raw" to the rule to ensure it runs before any manipulation of the content.[/td][/tr]
[/table]
The choice of XPath or CSS selectors is arbitrary, and we can mix and match as appropriate. Behind the scenes, Diazo compiles a CSS selector down to an XPath expression. Note that some valid CSS3 expressions may not be compilable to XPath, forcing you to use XPath directly. If this happens, you will see an error message pinpointing the invalid expression[backcolor=#f9f9f9]Diazo 也允许theme直接被规则修改， by omitting the content attribute and instead including the relevant content in the rules file itself.
in the console output and an un-themed site.
For example:
<after theme-children="/html/head">
<style type="text/css">
.highlight { color: red; }
</style>
</after>[backcolor=#f7f7f7]It is even possible to use XSLT directly in this way. Here is an example that turns a two-column table into a definition list. The xsl:for-each loop operates on the content. <replace css:theme="#details">
<dl id="details">
<xsl:for-each css:select="table#details > tr">
<dt><xsl:copy-of select="td[1]/text()"/></dt>
<dd><xsl:copy-of select="td[2]/node()"/></dd>
</xsl:for-each>
</dl>
</replace>[indent]关于Diazo的更多信息，参考 http://diazo.org.[/indent][/backcolor][/backcolor]