Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tutorial / Diazo By Example

Diazo By Example

Simple Diazo Rule Snippets

Common Tasks

Replace Theme Title with Content Title

<replace css:theme="html head title" css:content="html head title" />

Drop FavIcon from Content; Use the One from Theme

<drop content="/html/head/link[@rel='shortcut icon']" />

Copy Base Tag from Content

<before css:theme-children="html head" css:content="html head base" />

Copy Meta Tags from Content

<after css:theme-children="html head" content="html/head/meta" />

What happens if replace is used?

<replace css:theme="head meta" css:content="head meta" />

In case there are 2 <meta> in theme and 3 <meta> in content, the result will be 2x3 repeated tags.

Case Studies

<h2 class="highlight"><span class="keyword">Theme</span> Title</h2>
<h2 id="parent-fieldname-title" class="documentFirstHeading">Content Title</h2>
  • <replace css:theme="h2" css:content="h2" />

    <h2 id="parent-fieldname-title" class="documentFirstHeading">Content Title</h2>

  • <after css:theme="h2" css:content="h2" />

    <h2 class="highlight"><span class="keyword">Theme</span> Title</h2>
    <h2 id="parent-fieldname-title" class="documentFirstHeading">Content Title</h2>

  • <before css:theme="h2" css:content="h2" />

    <h2 id="parent-fieldname-title" class="documentFirstHeading">Content Title</h2>
    <h2 class="highlight"><span class="keyword">Theme</span> Title</h2>

  • <merge attributes="class" css:theme="h2" css:content="h2" />

    <h2 class="highlight documentFirstHeading"><span class="keyword">Theme</span> Title</h2>

  • <copy attributes="class id" css:theme="h2" css:content="h2" />

    <h2 id="parent-fieldname-title" class="documentFirstHeading"><span class="keyword">Theme</span> Title</h2>

  • <replace css:theme-children="h2" css:content-children="h2" />

    <h2 class="highlight">Content Title</h2>

<prepend theme="/html/body" content="/html/body/attribute::class" />


Unordered List


Find Link URL by Link Text


Replace href Attribute? Try Copy:

<copy attributes="href"
     css:theme="#portal-logo" />
<copy attributes="href"
       content="//*[@id='portal-logo']" />
<replace theme="/html/body/div[2]/div[1]/div/ul/li[1]/a"
       content="//*[@id='portaltab-index_html']/a" />
<replace theme="/html/body/div[2]/div[1]/div/ul/li[2]/a"
       content="//*[@id='portaltab-info']/a" />
<replace theme="/html/body/div[2]/div[1]/div/ul/li[3]/a"
       content="//*[@id='portaltab-article']/a" />
<replace theme="/html/body/div[2]/div[1]/div/ul/li[4]/a"
       content="//*[@id='portaltab-web']/a" />

被 JavaScript 特效影響的 HTML 片段,例如 Slider,必須使用未執行 JavaScript 前的 HTML 內容,來選取 XPath / CSS Selector 才會正確。

子目錄共用一組 Header,但首頁 Header 不同,方式之一是使用不同的 CSS ID 並透過 Rule 分別控制它們,可參考更多修改 CSS ID 範例

<!-- change header's ID attribute -->
<prepend css:theme="#header-index">
    <xsl:attribute name="id">header-subpage</xsl:attribute>

修改 Theme 裡的 <a href="" /> 屬性值,使用 <replace attributes="href" /> 可能沒有效果。

<copy attributes="href"
 content="//*[@id='portal-logo']" />

Turbo Theming with XDV Example

<?xml version="1.0" encoding="UTF-8"?>

  <!-- Head: title -->
  <replace theme="/html/head/title" content="/html/head/title" />

  <!-- Base tag -->
  <append theme="/html/head" content="/html/head/base" />

  <!-- Body -->
  <prepend theme="/html/body" content="/html/body/attribute::class" />

  <!-- Top level navigation -->
  <replace css:theme="#top-menu ul" css:content="ul#portal-globalnav" />

  <!-- Search -->
  <replace css:theme="form#kbs" css:content="form#livesearch0" />

  <!-- Breadcrumbs -->
  <copy css:theme=".bread_crumb"
        css:content="#portal-breadcrumbs > span:not(:first-child)" />

  <!-- Page title -->
  <copy css:theme=".pages_textnews_news h2"
        content="//span[@id='breadcrumbs-1']//text()" />

  <!-- Second level navigation -->
  <copy css:theme=".pages_sidenav_news"
        css:content="#portal-column-one dl.portletNavigationTree ul.navTreeLevel0 > *" />

  <!-- Footer actions -->
  <replace css:theme="#footer_links ul"
           css:content="#portal-siteactions" />

<rules xmlns:xsl="">

<div id="top-menu"> <ul> <li><a class="current_home">Home</a></li> <li><a class="current_home_news_active">News</a></li> <li><a class="current_home_communicate">Transparency</a></li> <li><a class="current_home_meet">Meet the PM</a></li> <li><a class="current_home_history">History and Tour</a></li> <li><a class="current_home_nr10tv">Number 10 TV</a></li> </ul> </div>
<!-- Top level navigation - link class -->
<xsl:template match="//ul[@id='portal-globalnav']//li/a">
  <xsl:variable name="i">
    <xsl:value-of select="1 + count(parent::*/preceding-sibling::*)"/>
  <xsl:variable name="hardcoded_class">
      <xsl:when test="$i = 1">current_home</xsl:when>
      <xsl:when test="$i = 2">current_home_news</xsl:when>
      <xsl:when test="$i = 3">current_home_communicate</xsl:when>
      <xsl:when test="$i = 4">current_home_meet</xsl:when>
      <xsl:when test="$i = 5">current_home_history</xsl:when>
      <xsl:when test="$i = 6">current_home_nr10tv</xsl:when>
  <xsl:variable name="active">
    <xsl:if test="parent::*[@class='selected']">_active</xsl:if>
    <xsl:copy-of select="@*"/>
      <xsl:attribute name="class">
        <xsl:value-of select="$hardcoded_class"/><xsl:value-of select="$active" />
    <xsl:copy-of select="node()"/>
  1. Let i = the current position in the list.
  2. Let hardcoded_class = the appropriate hardcoded class name, dependent on i.
  3. Let active = '_active' if the anchor's parent <li> has the class 'selected'
  4. Add a class attribute to the anchor with the value of hardcoded_class + active.
<!-- Page title -->
<xsl:template match="//h1[contains(concat(' ', normalize-space(@class), ' '),
                     ' documentFirstHeading ')]">
  <h2 class="page_title_border"><xsl:copy-of select="./text()"/></h2>

<!-- Content -->
<copy css:theme="#inner_container div:first-child"
         css:content="#portal-column-content > *:not(:first-child)" />
<!-- Drop junk content -->
<drop css:theme="#skip_to_content" />
<drop css:theme="#rssholder" />
<drop css:theme="#inner_container div:not(:first-child)" />
<drop css:theme="#inner_container ~ div.navigation" />

<!-- Content class -->
<xsl:template match="//div[@id='content']">
  <div id='content' class='pages_post_news'>
    <xsl:apply-templates />

通常不能直接用 *[@class='foo'] 來當作比對條件,因為它不能允許 <div class="foo bar"> 的情況,使用 *[contains(concat(' ', normalize-space(@class), ' '), ' foo ')] 這種複雜語法才行。

複製 skins/sunburst_styles/public.css 裡的部份內容到 demo.css,從 /* @group Status messages */ 到 /* @group Control panel */ 的前一行,併入下列的內容:

/* Hacks */

#edit-bar li {
    display: inline;

#inner_container div#edit-bar,
#inner_container div#edit-bar div {
    padding-right: 0;

ul#content-views {
    margin: 0;
    padding: 0;

#top-menu {
    width: 71%;

form#searchGadget_form {
    margin-top: 1px;

/* One more from Sunburst: from @group Invisibles */

.hiddenStructure {
    display: block;
    background: transparent;
    background-image: none; /* safari bug */
    border: none;
    height: 0.1em;
    overflow: hidden;
    padding: 0;
    margin: -0.1em 0 0 -0.1em;
    width: 1px;
<?xml version="1.0"?>
<object name="portal_css">

     expression="not: request/HTTP_X_XDV | nothing" />

     id="++resource++demo.css" title=""
     media="screen" rel="stylesheet" rendering="import"
     cacheable="False" compression="safe" cookable="False"
     enabled="1" expression="request/HTTP_X_XDV | nothing"/>



Live Search Box in Modal Overlay

<replace css:theme-children="#portal-searchbox" css:content-children="#portal-searchbox" />