Diazo Theme Engine
開發 Plone 佈景主題的傳統方式侷限在 Skin 機制，自從 Deliverance 和 Diazo 問世之後，邁入新的里程碑，設計師不必刻意把版型放進 Skin 目錄，可以直接編輯 HTML 檔案，快速進行視覺設計，加上 Plone 4.1 開始搭配 plone.app.theming 模組，讓建立 Diazo 工作環境的門檻大幅降低，到 Plone 5 之後，Diazo 會成為預設的佈景主題工具。
技術簡介影片 投影片 What Is Diazo?、Web Scraping Using Diazo，Using Variables
原理
Deliverance 和 Diazo 都提供 Theming Proxy 功能，它們可以透過 Rule 檔案裡的 CSS Selector 來把 CMS 的 HTML 和 Theme 進行結合。Diazo 依據 Deliverance 規格開發而成，兩者的差異在於，Diazo 內部會把 Theme 編譯成 XSL Template，而 Deliverance 則利用 Python 來處理 HTML。透過 Deliverance 的示範影片，我們可以先簡單認識它的運作方式，接著，可以閱讀模組開發文件、官方技術文件、流程建議文件、How Diazo Works 投影片，還有推薦的模組清單，了解實務應用的狀況。
Diazo 在運作時，需要先取得設計師的 HTML 和 CSS 檔案，這些靜態資源被稱為 Theme，負責網頁外觀的設計與顯示，另一方面，動態網頁內容仍然由 Plone 負責，這些動態內容被稱為 Content，最後，由 Rule 把 Theme 和 Content 組合，再把組合後的結果傳給使用者的瀏覽器。
Rule 的作用對象是 Theme 和 Content 的 Markup Node，標定 Node 的方式，可以是 CSS3 selector 或是 XPath expression。它固定使用 rules.xml 為檔名，以 XML 格式來編輯規則內容，常見的 Rule Directive 包括 <theme />、<replace />、<drop />、<before />、<after />、<copy />，像 <merge />、<strip /> 算是偶而會用到的 Rule Directive。
技術上是以 XSLT (eXtensible Stylesheet Language Transformations) 為底層，覺得手動編輯規則檔 (rules.xml) 太麻煩嗎? 在 Plone 4.3 之後納入一個視覺編輯工具，稱為 plone.app.theming 模組，範例影片讓你先睹為快。
搭配 Plone 的場合，Diazo 通常是偵測 visual_portal_wrapper 的 CSS ID 存在與否，決定是否啟用。Diazo 甚至可以獨立安裝和運作，不侷限只和 Plone 搭配。在網址後面加上 ?diazo.off=1 選項，可以暫時取消效果。
步驟
先準備 HTML 相關資源，存取時要使用相對路徑，這樣才方便透過瀏覽器來檢視。要注意的是，舊版系統上的 libxml2 / libxslt 可能會造成無法啟動，建置過程主要在檔案系統上進行。
- 找出 Theme 需要被取代的區塊程式碼，最好能透過獨一無二的 id 設定值來標示。
- 找出 Content 對應的區塊程式碼，透過 replace 或 copy 規則來測試取代效果。
- 找出 Content 裡需要被整批複製進 Theme 的程式碼，像 <head /> 的內容就可能符合的範例。
- 找出 Theme 或 Content 用不著的程式碼區塊，透過 drop 規則來刪除它們。
XPath
Firefinder 是測試工具，考慮先學習 XSLT 處理的順序
例如 <rules css:if-content="#visual-portal-wrapper"> 在 XSLT 會被展開數次，花時間進行全域搜尋，使用 XPath 的話，可以加速執行效率：
# Plone 4 <rules if-content="/html/body/div[@id='visual-portal-wrapper']"> # Plone 5: <rules if-content="/html/body[@id='visual-portal-wrapper']">
<notheme css:if-not-content="#visual-portal-wrapper" />
規則範例
最簡化的 Rule 檔案內容：
<?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"> <theme href="index.html" /> </rules>
<theme /> tag 裡的 href 要指定 index.html 的位置，它使用 rules.xml 的相對路徑。
實務上，需要避免 Plone 的 ZMI 介面受到影響，因此，最基本的 Rule 檔案內容會長成這樣：
<?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" /> </rules> </rules>
css:if-content 語法是採用 CSS selector 方式，比對 Content 是否有 #visual-portal-wrapper 這個 ID，有的話就會執行 Rule 設定值。由於 #visual-portal-wrapper 只會出現在 Plone 一般網頁裡，不會出現在其他地方，利用這項技巧，就能避免影響 Plone 的管理功能。像 Google Analytics 程式碼片段，可能被置於 #visual-portal-wrapper 外面，或在 HTML BODY 裡生效，要額外處理。
Theme:
<div class="row"> <div class="span12" id="footer"> Footer content </div> </div>
Content:
<div id="portal-footer"> <p>The <a href="http://plone.org">...</a> is under the GPL.</p> </div>
Rule:
<replace css:theme-children="#footer"
css:content-children="#portal-footer" />
Result:
<div class="row">
<div class="span12" id="footer">
<p>The <a href="http://plone.org">...</a> is under the GPL.</p>
</div>
</div>
接著 Rule 再加上：
<after css:theme-children="#footer"
css:content="#portal-siteactions" />
<ul id="portal-siteactions">...</ul> 會再插入在 <p></p> 之後。
另外，常見的規則設定是 <before css:theme-children="#content" css:content="#edit-bar" />，這樣會把 <div id="edit-bar">...</div> 插入在 <h1>Main content</h1> 之前。更多常見設定可參考 http://blog.dbain.com/2011/11/common-diazo-rules-for-plone.html
規則功能
<replace /> 拿 Content 的 node 內容，取代 Theme 的 node 內容。
<before /> 和 <after /> 拿 Content 的 node 內容，放到 Theme 的 node 的前面或後面。
<drop /> 可以刪除 node 內容，但要指定 Theme 或 Content 為對象。
<copy /> 拿 Content 的 node attribute 內容，複製到 Theme 的 node attribute 內容。
<merge /> 拿 Content 的 node attribute 內容，併進 Theme 的 node attribute 內容。
<strip /> 刪除 Theme 或 Content 的 node 內容，但 children 內容被留下來。
Rule 可以直接修改 Theme 內容，這時候不需要讀取 Content 內容，直接把相關的內容寫在 Rule 裡，例如：
<after theme-children="/html/head">
<style type="text/css">
.highlight { color: red; }
</style>
</after>
或是利用 XSLT 來結合這樣技巧：
<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>
常見的設定範例:
<rules css:if-not-content=".userrole-manager"> <theme href="front/index.html" /> ... your rules </rules> <rules css:if-content=".userrole-manager"> <xi:include href="/++theme++barceloneta/rules.xml" /> </rules>
模組範例
- 從 Sunburst 改起
- Sunrain
- Custom Logo
- Replace Link Text
- NoTheme if-path Multiple Path
- Turbo Plone Theming with XDV / Diazo
- Grid Layout: Foundation Responsive Framework
- plonetheme.onegov
- diazotheme.startup
- diazotheme.plone 設定三個資源目錄
- diazotheme.frameworks
- diazotheme.bootswatch theme on the content side
- diazotheme.bootstrap introduction
- vs.bootstrap.plonetheme
- snippets
- basic rules
- CAES-Diazo from UC Davis
- plonetheme.diazo_sunburst
- Grid Layout Navigation Example
Shuttle Thread Tutorial zip backup 空白字元的刪除 login page Table of Contents
Multiple Conditions Example Create Element for Each Pair of Elements
# ZCML layer="IDiazoMarkerInterface"
確保 JavaScript 正常執行
<after css:content='#visual-portal-wrapper script' css:theme-children='body' />
using a custom theme that does not include the base tag for the page. This results in the javascript not being able to generate the correct url for saving the sharing data. To fix this on a diazo theme, you can do something like: <before css:theme-children="head" css:content="base" /> in the theme rules
plone.app.theming
version compatibility 在 1.3.0 版本裡，你可以設定 DIAZO_ALWAYS_CACHE_RULES 變數，不為 0 的變數值會啟動快取機制。
TinyMCE
#internallinkcontainer.radioscrolllist {
line-height: auto !important; }
#internallinkcontainer .list.item span,
#internallinkcontainer .list.item a {
position: static !important; }
Plone 4.3.2 TinyMCE toolbar 無法成功顯示 (tiny_mce_gzip.js 找不到) 採用 Rewrite Local URLs to Use portal_url 也無效：
#plonetheme/diazo_sunburst/theme/manifest.cfg [theme] title = Diazo Sunburst Theme preview = images/preview.png + +[theme:parameters] +portal_url = python: portal_state.portal_url() #plonetheme/diazo_sunburst/theme/rules.xml + + +
TTW Editing Rule File, with http://free-css-templates.com/ template: demo from 03:30 to 15:20
Demo Video: plonetheme.diazo_responsive
Drupal Wordpress Theme XSLT Hints plone.app.themingplugins Override Example
Transfer Changed Content into Plone Theme
Admin Site Without Theme and Share Cookie with Service Site
Pull In Content From Another Page
更換 CSS Attribute 設定值，要使用 XPath expression，利用 Chrome Developer Tools 可查詢。
You can't reference a variable just anywhere, but need to do so from an XPath expression. You can avoid interfering with your replacement of the children nodes by inserting the attribute "before" the children. Here's what I would try:
<before css:theme-children=".conteudo">
<xsl:attribute name="class">conteudo-<xsl:value-of select="$section" /></xsl:attribute>
</before>
XPath // expression will cause performance issue.
CSS Class Active
圖檔相對路徑 想在分享時，指定顯示 logo 圖檔，可以先建立下列內容的 index.html 檔案：
<head> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> <!-- facebook images --> <link rel="image_src" href="images/logobig.jpg" /> <link rel="image_src" href="images/logo-square.png" /> <link rel="image_src" href="images/logo.png" /> <title>Welcome to Plone — Site</title> </head>
<div id="fb-root">
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
status : false, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like pull-right"
data-href="https://www.facebook.com/mycompany"
data-width="The pixel width of the plugin"
data-height="The pixel height of the plugin"
data-colorscheme="light" data-layout="button_count"
data-action="like" data-show-faces="false" data-send="false">
建立模組
Twitter Bootstrap Theming: XSL Styling, Transforming the edit-bar
<replace content="//div[contains(@class,'cell')]/@class"> <xsl:attribute name="class"> <xsl:if test=;contains(current(),"width-3:4")'>span9</xsl:if>
</xsl:attribute>
</replace>
Zurb Foundation: demo video
屬性值和參數值
if-content 或 css:if-content 用來標明 content 裡必須包含特定元素。
css:if-content="body.template-contact-info"
<replace css:content="div#portal-searchbox input.searchButton">
<button type="submit"><img src="images/search.png" alt="Search" /></button>
</replace>
<replace css:theme="div#portal-searchbox" css:content="div#portal-searchbox" />
<rules if-path="/contact-info">
<replace css:content="#content > div > div.documentDescription">
<div class="documentDescription">Fill in this form to book Joey!</div>
</replace>
<replace css:content="#content > div > p">
p class="documentDescription"Thank you for contacting me – I will get back to you as soon as I can!</p>
</replace>
<replace css:content="#global_statusmessage > div.portalMessage.info">
<div class="portalMessage info">
<strong>Info</strong>
An email has now been sent to Joey
</div>
</replace>
</rules>
external src in <script> tag breaks rules.xml
依照網域名稱切稱 plone.app.theming change theme selection behavior
<theme href="example.html" if="$host = 'example.com'" />
依照使用者角色切換 Change Theme Elements Based on User Role
Portlet
Move a Portlet into #content Area
Diazo themes have two levels at which they apply changes. Override Portlet Renderer
Processing bare XSL in raw mode
<replace content="div[@id='content-core']/div[@id='parent-fieldname-text']">
<article class="post type-post status-publish format-standard hentry">
<div class="divider-colors"></div>
<span class="cat-links">Post</span>
<xsl:apply-templates />
</article>
</replace>
var common_content_filter = '#content>*:not(div.configlet),dl.portalMessage.error,dl.portalMessage.info';
manifest 變數值使用大寫英文會被改成小寫 collective.sendaspdf Ignore Diazo Theme
多國語系文字 Multiple Language Translation
When Using JavaScript .prepOverlay() call to set up the AJAX overlay, it will automatically append the ajax_load flag as part of the query string used via AJAX to get the code that's displayed in the overlay.
Site Migration Using Diazo and Funnelweb
Skins will go away but currently IThemeLayer is linked to the Skin Layer
Modify Attributes of Certain Tags Adding a Value
slot name replaced: eea.facetednavigation old main macro slot instead of content-core
collective.listingviews: Listing View Customization 優缺點討論
Pulling In Content from Another Page
Resource Static Files
If you upload a Diazo theme as a zip, the files end up in a plone.resource resource directory within the portal_resources tool in the ZMI, and are editable there. The rules aren't in a Zope browser resource directory unless you created the theme on the filesystem and chose to put them there. plone.resource supports three different resource locations 1) ZODB, 2) global resource directory 3) packages and iterates the options in that order.
/++theme++mytheme/<subpath> /++sitelayout++mylayout/<subpath> /++templatelayout++mylayout/<subpath>
Edge Side Includs <esi:include>
test for the existence of a page
base tag missing will cause Password Reset issue
bootstrap theme shows up randomly
XSLT to Replace portal-personaltools
Change Theme Selection Behavior
<Location /blog/> TransformSet /themes/blog.xsl </Location> <Location /> TransformSet /themes/main.xsl </Location>
不過，上述設定結果，總會優先讓 / 區段生效，變通方式是增加下列設定值：
RewriteRule ^/$ /main/ [R] <Location /main/> TransformSet /themes/main.xsl </Location>
根據文件，可能的改善方式如下：
<rules css:if-content="#blog"> <theme href="blog.html" /> ... </rules> <rules if="not(//*[@id='blog']"> <theme href="main.html" /> ... </rules>
<LocationMatch "/(?!blog)"> TransformSet /themes/main.xsl </LocationMatch>
Attribute Error: TALES Expressions and JSON Diazo rule to do the same as pat inject
Django
django_diazo: 包括 Admin 介面，syncthemes 工具程式，它能利用 Dictionary 格式傳遞 View 的 Context Variable 給 Diazo。範例 django_diazo django-diazo-blog django-diazo-themes
Pyramid
pyramid.buildout/etc/diazo.ini Alex Clark's Blog SubstanceD 沒有定義 retail view
Drop Down Menu
<append content="//*[@id='portal-globalnav']"
theme="//*[@id='nav']" />
portal_tabs
string:javascript:(function(){open('http://cgis.rchss.sinica.edu.tw/web/ruins_arc/ruins.php?k=' +document.location.pathname.split('/').pop())})()
portal_tabsstring:javascript:(function(){open('http://cgis.rchss.sinica.edu.tw/web/ruins_arc/ruins.php?k=' +document.location.pathname.split('/').pop())})()
# http://www.slideshare.net/pythonchile/web-scraping-using-diazo from diazo.compiler import compile_theme from lxml import etree absolute_prefix = "/static" rules = "rules.xml" theme = "theme.html" compiled_theme = compile_theme(rules, theme, absolute_prefix=absolute_prefix) transform = etree.XSLT(compiled_theme) content = etree.parse(some_content) transformed = transform(content) output = etree.tostring(transformed)
UI Elements Only For Diazo-based Site
# subscriber.py
from plone.app.theming.utils import isThemeEnabled
from zope.interface import alsoProvides
from zope.interface import Interface
class IDiazoMarkerLayer(Interface):
"""Layer Marker Interface applied if Diazo is active
"""
def apply_diazo_layer(obj, event):
if IDiazoMarkerLayer.providedBy(event.request) \
or not isThemeEnabled(event.request):
return
alsoProvides(event.request, DiazoMarkerLayer)
<subscriber
for="Products.CMFPlone.interfaces.IPloneSiteRoot
zope.traversing.interfaces.IBeforeTraverseEvent"
handler=".subscriber.apply_diazo_layer" />
參考資料
PloneEDU Diazo Theming Hangout: part1, part2
repoze.plone 提供 buildout 快速建置 deliverance 環境。
svn co http://svn.repoze.org/buildouts/repoze.plone/trunk repoze.plone
cd repoze.plone
python2.4 bootstrap.py
./bin/buildout
bin/supervisord
bin/addzope2user admin admin
bin/supervisorctl stop zope
bin/paster serve etc/zope2.ini
sudo easy_install Deliverance
ZPT Fragment Support collective.themefragments 能夠讀取額外的 Browser View 內容
plone.theme 在 Plone5 開始被併進 Products.CMFPlone 裡
<theme> <name>my.pkg</name> <enabled>false</enabled> </theme
Fanstatic + WebOb / WSGI : automatically seeing this mimetype being returned to the browser and trying to "theme" the raw files
<copy attributes="class" css:theme="body" css:content="body" /> <replace content="/html/body/@class" <xsl:attribute name="class"><xsl:value-of select="." /> brand1</xsl:attribute> </replace>