緣起
為什麼要做這個功能？這都是與Zoomq打交道的結果。Zoomq(真名叫什麼現在還不知道，不好意思，但網上的朋友知道網名也就可以了吧)是我在CZUG上認識的一個朋友。有一天給我來信談到我所做的翻譯與評論網站，他鼓勵我說這個網站不錯，建議我增加一些功能，其中就談到了SKIN (skin)功能，還有一些別的東西。當初做這個網站是想開發一種交互良好的網站供翻譯愛好者使用，但東西做出來卻沒什麼人來用。有人來也只是看一看，試一試。可能與我的宣傳不夠有關。而且我個人也怕過多的宣傳會給自已帶來過多的壓力，因此做出來後也是處於一種大家有興趣自已去看的這麼一種狀態。經過 Zoomq的鼓勵，於是又有了一些興趣。而且他還為這個網站設計了版面與Css，做出了他的貢獻。於是我也又開始動手進行改進，也是想把這個網站做的更完善一些。於是skin功能就被我加進去了。
這裡所實現的skin功能只是我所理解的一種實現，沒有參照其它的設計。因此寫本文的目的只是想介紹一下我是如何實現的，請不要做為標准的skin實現的例子，而且也許根本沒有標准。
結構
在這個網站中，Zoomq給我找出了幾種可以定制的項，主要有：網站圖標、主題圖(就是網站中最長的那個圖形，不知道叫什麼好)、其它一些小圖標 (如最新更新中用的每條更新信息前面的小圖標、譯/論鏈接用的小圖標、文章有修改時用的"新"的小圖標)、CSS、按鈕背景圖。大概就是這麼多。於是我定義了，在我的網站根目錄(在我的網站上是translation文件夾)下建立一個名為skins文件夾，用來存放各種skin。每個skin為一個目錄，其中存放著所有上面的可定制的對象。要注意，既然已經使用了skin就應該有一個缺省的skin，於是我將缺省的skin文件夾定義為 default。每個skin文件夾都要起好名字好在列表中供人選擇。這樣我的結構如下：
translation/
----------skins/
-----default(綠色森林)/
---------------logo 網站圖標
---------------longlogo 主題圖
---------------...
---------------site.css 網站CSS
-----old(原始模樣)/
---------------...
請大家注意，這裡所有的圖形都沒有後綴。這樣做有一個好處就是：我可以使用不同格式的圖形文件。當然一定要指明後綴也是可以的，其實在Zope 中，文件名與內容並不一定要一一對應。比如：文件名可能為a.gif，但文件實際為一個png圖形。但可能會帶來誤解，因此我干脆不使用了。
實現
有了上面的結構了，那麼如何實現呢。對於內容的樣式的改變只要改變引用的CSS即可。對於圖片則只要改變引用的鏈接即可。那麼現在我所關心的就是如何正確地選擇正確的路徑，及如何使用鏈接了。
於是我設置一個變量siteskin，它用來保存當前skin的樣式名。同時還設定了一個skinpath變量，它用來保存當前skin的路徑名。初始化siteskin和skinpath的DTML METHOD文件內容如下：
dm_init(DTML DOCUMENT):
<dtml-if siteskin>
<dtml-call "REQUEST.set('skinpath', 'skins/%s' % siteskin)">
<dtml-else>
<dtml-call "REQUEST.set('skinpath', 'skins/%s' % 'default')">
<dtml-call "REQUEST.set('siteskin', 'default')">
</dtml-if>
在第一次使用skin功能時，siteskin不在用戶的cookie中存放(後面講述如何保存siteskin到cookie中)，因此應設置為缺省值。這裡我使用'default'做為缺省值。然後根據siteskin的值設置skinpath的值。可以看出我的skin是放在skins目錄下的。
在我的網站中，所有的頁面都要使用Html_header，因此我把初始化skin的這段代碼(dm_init)放在了html_header文件的最前面，這樣保證siteskin和skinpath在使用前總是有效的。
下面我修改了所有使用skin內容的鏈接。如，在html_header中有使用css的代碼，我改為：
<link rel="stylesheet" href="&dtml-skinpath;/site.css" type="text/css"/>
其中&dtml-skinpath;是對skinpath變量的引用。這是dtml-var標記的簡單寫法，如果不這樣寫，還可以寫成:
<link rel="stylesheet" href="<dtml-var skinpath>/site.css" type="text/css"/>
其它的內容，如文本屬性(在css中定義)，根據css中的設置，不同的內容使用不同的css。如：
<p class="highlight">文本</p>
<span class="quote">文本</span>
與skin有關的圖形引用修改為：
<img src="&dtml-skinpath;/new" />
當然這些示例只是適用於我的網站，你要根據你的實際進行相應的修改。
這樣，我們已經實現的skin結構的定義與實現。那麼還有一個內容就是，如何讓用戶進行選擇？
Skin的選擇
我的實現是，將skin的選擇放在了首頁。通過提供一個下拉列表，用戶就可以進行選擇了。
selectskin(DTML DOCUMENT)
1 <select name=selectskin onChange="location.href='&dtml-URL1;/setskin?skin='+this.options[this.selectedIndex].value">
2 <dtml-in eXPr="skins.objectItems('Folder')">
3 <option value="&dtml-id;"<dtml-if expr="siteskin==id"> selected</dtml-if>>&dtml-title;</option>
4 </dtml-in>
5 </select>
第1行對下拉列表改變事件onChange進行處理，即通知浏覽器按後面的URL重新打開。其實是調用了setskin處理，傳入參數為用戶選中的列表值(在這裡為選中的skin的文件夾ID名)。&dtml-URL1表示index_html所在的目錄。在我的網站中setskin是放在index_html所在的文件夾中的。這樣，上面的語句可以理解為：
當skin下拉列表發生變化時，通知浏覽器調用當前目錄下的setskin文件。參數值為用戶選中的skin ID。
第2－4行是通過循環將網站skins下所有的skin列出，同時將缺省值設為siteskin值。如果用戶第一次使用，則根據上面 siteskin變量的設置，siteskin缺省會為'default'，因此你的skins目錄中必須要的一個ID為'default'的缺省 skin文件夾才可以。
這樣，當用戶選擇了缺省skin以外的skin時，浏覽器會自動調用setskin進行skin的設置。setskin文件內容如下：
setskin(Script(Python))
#parameter skin
RESPONSE=container.REQUEST.RESPONSE
etime=(DateTime()+365).toZone('GMT').rfc822()
RESPONSE.setCookie("siteskin", skin, expires=etime, path='/')
RESPONSE.redirect(container.REQUEST.URL1)
這段代碼很簡單(用DTML METHOD來寫也是一樣的)。將siteskin保存到cookie中。然後重新顯示本目錄。這樣等於重新顯示index_html。
最後的話
以上就是在我的translation中所實現的skin功能。大家有興趣可以自已去實現。
版權所有 limodou(
[email protected])，如要轉載請保留此信息。
Python在向你招手(http://writedown.126.com)
