在前篇文章裡，我們已經建置了 Event Folder 和 Signup 兩個型別，接著，仍要依照專案需求，繼續調整功能及程式邏輯。展現網站功能的時候，我們總希望它能緊密結合視覺設計成果，另一方面，套用新的視覺設計時，會希望它不影響既有的程式邏輯。那麼 Plone 如何做到這個要求？控制視覺設計的檔案又放在哪裡呢？

Plone 系統預設的網頁呈現效果，著重在功能上，而且緊扣著內容管理的動線邏輯，這在 Intranet 的場合，可能已經足夠，但在對外服務的網站場合，通常需要調整頁面。在本文裡，我們將介紹佈景主題、視覺元件、動態網頁的相關技巧。

 

 

準備工作

 

之前介紹過 buildout.cfg 檔案，裡面有個 debug-mode 參數，記得要指定為 on，執行 bin/buildout 生效後，它會動態記錄在 parts/instance/etc/zope.conf 裡面，線上的 Plone 就會即時反應 HTML 和 CSS 的修改結果，在 ZMI 的 portal_css 或 portal_javascripts 裡，也看得到 Development mode 選項啟用中，如圖1 所示。

 

▲ 圖1 portal_css 的 Development mode 選項

 

瀏覽器通常會搭載輔助工具，協助存取 HTML、CSS、JavaScript 檔案資源，以 Firefox 為例，搭配安裝 Firebug 後，利用 inspect 選項檢視 layout 和網頁元件，或是離線編輯 HTML 和 CSS 內容，都能帶來事半功倍之效，如圖2 所示。

 

▲ 圖2 Firebug 操作畫面範例

 

以上只是最基本的選項及工具，想要調整更多項目，當然可以搭配其他工具，或是自行閱讀工具的細項說明。

佈景主題

 

我們把 Theme 稱為「佈景主題」，它是網站整體視覺設計的成果，包括 layout、color、icon 之類的設計元素，還有 page template、style sheet、image、javascript 資源檔案。

Plone 4.0.x 預設的佈景主題稱為 Sunburst，值得一提的是，部份功能使用 AJAX 效果，畫面外觀如圖3 所示。

 

▲ 圖3 Sunburst 佈景主題畫面

 

Sunburst 的 layout 概分為四個區塊，如圖4 所示。

1. 表頭區塊

2. 主要內容區塊

3. 資訊方框區塊

4. 表尾區塊

 

▲ 圖4 Sunburst 的 layout 示意

 

就既有的系統架構而言，佈景主題是 Plone 裡的一個模組，想換佈景主題，跟啟用新模組的步驟一樣，先在 buildout.cfg 加上模組名稱，下載安裝後，再到 Plone Setup 的 Theme settings 裡選定想要的佈景主題，如圖5 所示。

 

▲ 圖5 佈景主題設定畫面

 

在 Default theme 下拉選單裡，可以看到 Plone Classic Theme 選項，它是 Plone 4.0.x 以前的預設佈景主題。

 

 

視覺元件的處理

 

由於佈景主題模組裡的許多元件，也都適合獨立介紹和運作，因此，我們另外將它們統稱為視覺元件。目前 Plone 處理視覺元件的架構，整理如圖6 所示。

 

▲ 圖6 Plone 視覺元件架構

 

實作視覺元件時，具體的方式主要分成四類：

1．Skin Layer 方式－通常是透過 ZMI 的 portal_skins 目錄，編輯裡面的 Page Template、CSS、Python Script。這個機制屬於舊的方式，它的功能可以完整由下列的其他方式取代。

2．Browser View 方式－View 由 Python class 和 Page Template 組成，透過 configure.zcml 檔案註冊後，可以透過 https://localhost/mysite/@@my_view 的形式來執行。

3．Viewlet 方式－和 Browser View 類似，但需要搭配一個 Viewlet Manager 來註冊。

4．Portlet 方式－和 Viewlet 類似，但可以搭配設定檔，在特定的 Portlet Manager 裡顯示。它的顯示位置預設在 layout 的資訊方框區塊裡。

 

這麼多種方式，不如找一個簡單的切入點來示範，例如我們只想調整佈景主題裡的一部份，像是取消搜尋方框的顯示，該怎樣辦呢？

 

 

Viewlet 和 Viewlet Manager

以 Plone 網站首頁為例，諸如 logo、搜尋方框、導覽列，都是一個 Viewlet，數個 Viewlet 再由一個 Viewlet Manager 管理。管理者可以從 https://localhost:8080/mysite/@@manage-viewlets 之類的網址，進入 Viewlet 管理介面，如圖7 所示。

 

▲ 圖7 @@manage-viewlets 管理介面

 

每個 Viewlet 都有自己的名稱，像 logo 的名稱是 plone.logo，每個 Viewlet Manager 也有自己的名稱，像表頭區塊的名稱是 plone.portaltop。同時，Viewlet 可以被指定隱藏或顯示，以 plone.searchbox 為例，點擊 Hide 選項後，搜尋方框就被取消顯示，另外，也可以在同一個 Viewlet Manager 裡調整順序，如圖8 所示。

 

▲ 圖8 Viewlet 設定項目示範

 

透過 Viewlet 和 Viewlet Manager，可以輕鬆管理 Portlet 之外的視覺元件大項，但是，Viewlet Manager 的順序和顯示與否，又是如何被控制的呢？

 

 

main_template

 

在 ZMI 的 portal_skins 裡，點選 Properties 頁籤，在畫面下方可以看到 Default skin 設定為 Sunburst Theme，因此 Sunburst Theme 的 Skin Layer 清單項目，包括 custom、sunburst_images、sunburst_templates，會依序被讀取，如圖9 所示。

 

▲ 圖9 Sunburst Theme 的 Skin Layer 清單

 

回到 portal_skins 的 Contents 頁籤，從 sunburst_templates 可以找到一個 Filesystem Directory View 物件，名稱叫做 main_template，它就是控制 Viewlet manager 順序和顯示與否的檔案，如圖10 所示。

▲ 圖10 sunburst_templates 包含的 main_template

 

sunburst_templates 是一個 Skin Layer 目錄，main_template 是一個 Page Template 檔案，留意到程式碼的內容呈現灰色底，代表不能修改，要點選 Customize 按鈕後，才可以修改 main_template 的程式碼，如圖11 所示。

▲ 圖11 點選 Customize 按鈕可以修改 Page Template

 

上述動作會把 main_template 檔案，從 sunburst_templates 複製到 custom 目錄，留意到程式碼的內容呈現白色底，代表可以編輯，試著讓＜div tal:replace="structure provider:plone.portaltop" /＞失效，這代表取消 plone.portaltop 這個 Viewlet Manager 的顯示，如圖12 所示。

You may be interested in the following articles:

• 用自由軟體 Plone 來架設網站(10)－連接資料庫 - 2011-08-05
• 用自由軟體 Plone 來架設網站(9)－多媒體結合 - 2011-07-25
• 用自由軟體 Plone 來架設網站(8)－內容查詢 - 2011-07-12
• 用自由軟體 Plone 來架設網站(7)－版型調整 - 2011-06-28
• 用自由軟體 Plone 來架設網站 (5)－元件架構 - 2011-05-20
• 用自由軟體 Plone 來架設網站 (4)－建立專案 - 2011-05-04
• 用自由軟體 Plone 來架設網站 (3)— 內部設定 - 2011-04-25
• 用自由軟體 Plone 來架設網站 (2)— 內容管理 - 2011-04-11
• 用自由軟體 Plone 來架設網站 (1)— 基礎安裝 - 2011-03-21