Diazo Beginner Steps

累積 Diazo 的歷史和原理後，最近終於有個小案子能具體實戰。值得注意的是，套用 Diazo 時，並沒有存在特定的標準解法，需要搭配情境和資源現況，再決定從 Theme 或 Content 或 Rule 找到最容易下手的平衡點。

Theme 原始檔是從 ThemeForest 購買，樣版大致分成「首頁」「列表」「個別頁面」三大類，對初學者容易上手的步驟，是先修改首頁 HTML 符合自己的需要，再編寫 Rule 套用首頁的 Theme 和 Content，接著再逐步納入列表和個別頁面的樣版。編寫 Rule 的過程中，需要仔細比對 Content 和 Theme 的 HTML Tag 或是 XPath，為了方便比對，開啟兩個 browser 畫面，利用 Alt + Tab 切換。有個小撇步，在網址後面加上 ?diazo.off=1 就能暫時取消 Diazo 的效果，但在開發階段，全站式的取消效果會更方便。

以 http://diazo.mysite.com/ 為例，如果 Plone Site 在 http://168.168.168.168:8080/drchen 執行，可以在 http://168.168.168.168:8080/drchen/@@theming-controlpanel 指定 168.168.168.168 是「不套用佈景主題的網址」，這樣就可以在 http://diazo.mysite.com/ 顯示 Rule 生效後的結果，在 http://168.168.168.168:8080/drchen 顯示 Untheme Content 的結果。

網址的對應，是 Diazo Rule 最常見的設定工作之一。以下列 Theme 程式碼為例：

<a href="index.html">
<img src="img/logo.png" />
MySite Home</a>

它會被預設轉換成：

<a href="/++theme++drchen.theme/index.html">
<img src="/++theme++drchen.theme/img/logo.png" />
MySite Home</a>

對於圖檔而言，這樣的網址轉換並沒有造成困擾，但是 A Tag 就得額外處理。最直覺的方式，是讀取 Content 實際的 href 屬性值來取代，有趣的是，雖然是要「取代」 Link 值，但 Rule 語法要用 <copy /> 並指定 Attribute，用 XPath 選取 Node 的範例長得像這樣：

<copy attributes="href"
           theme="/html/body/div[2]/div[1]/div/div[1]/a"
         content="//*[@id='portal-logo']" />

我的理解是，想要取代 Node 時，才用 <replace />。接著，我們以 Global Section 為例，介紹幾個相關的對應情境。

想要逐一取代 Global Section 的 A Tag，我們可以仿照上述技巧，透過下列的範例語法來達成：

<replace theme="/html/body/div[2]/div[1]/div/ul/li[1]/a"
       content="//*[@id='portaltab-index_html']/a" />

不過，在這個例子裡，我們應該要連帶處理 <li class="selected"> 的部份，僅是取代 A Tag 的結果並未滿足實際的需要。那麼，取代整個 <ul /> 如何? 事實上，我們想留下 Theme 的 <ul> 但取代掉剩下的 <li /> 部份。幸好，有個 -children 語法能夠漂亮地處理這種需求：

<replace theme-children="/html/body/div[2]/div[1]/div/ul"
      content-children="//*[@id='portal-globalnav']" />

我有成功試過其他方法，是先修改 Global Section Viewlet 的 Template 內容，在 <ul> 加上 CSS Class 屬性值，再用 <replace /> 完成取代。相較之下，簡潔的 -children 語法就像一刀斃命。

有時候會遇到一個 Node 裡，同時有數個 A Tag 要指向相關的網址，參考下列的 Theme 原始碼：

<li>
<h2>
<a href="#" title="">
看診科別項目
</a>
</h2>
<div class="news clearfix">
<p class="text">
小兒科、過敏氣喘、耳鼻喉治療<br>
內科、慢性病處方簽<br>
成人、小兒感冒 等
</p>
<a href="#" title="">更多說明</a>
</div>
</li>

利用 //a 的 XPath 語法，可以指定 Node 裡的所有 A Tag，參考下列的 Rule 範例：

<copy attributes="href"
         theme="/html/body/div[2]/div[2]/ul/li[1]//a"
       content="//*[@id='portletwrapper-ID']/dl/dt/span[2]/a" />