Customization
Theme Overview
Sunburst 是 Plone 4 的預設佈景主題,原始碼的 skins 目錄包含相關的資源檔,其中的 CSS 檔案依據重要性排序如下:
skins/ ├── sunburst_templates │ └── main_template.pt ├── sunburst_styles │ ├── base_properties.props │ ├── base.css │ ├── public.css │ ├── forms.css │ ├── columns.css │ ├── controlpanel.css │ ├── authoring.css │ ├── member.css │ ├── mobile.css │ ├── portlets.css │ ├── navtree.css │ ├── print.css │ ├── invisibles.css │ ├── IEFixes.css │ ├── reset.css │ ├── RTL.css │ ├── kupuplone.css │ ├── deprecated.css │ └── ploneCustom.css.dtml └── sunburst_images ├── logo.png └── pb_close.png
Skin
section.css
利用 CSS 設定修改特定目錄或型別的顯示方式,通常是取消特定項目的顯示。
# customize 'getSectionFromURL' in plone_scripts # edit the last line from: return "section-" + contentPath[0] # to: return " ".join(["section-" + "-".join(contentPath[:d+1] for d in range(len(contentPath))]) allchars = "".join([chr(x) for x in range(256)]) return " ".join([c.translate(allchars, ' ') for c in ["section-" + "-".join(contentPath[:d+1]) for d in range(len(contentPath))]])
常用的技巧,是利用 CSS Class Name 來取消特定項目的顯示,例如 .next {display: none !important;} 來取消 Prev Next Listing Bar 的項目顯示,通常會搭配 Collection 型別的情境,所以可以用 .portaltype-collection .next {} 來精準比對。不過,實務上 .next {display: none} 還是會誤殺「後 N 筆」的顯示,技巧是搭配 z3c.jbot 建立 plone.app.layout.nextprevious.nextprevious.pt 的 Override 檔案,例如把 class="next" 改成 class="list-next" 就可以避免誤殺的情況。
Plone4 Skin Theme 直接在 Plone5 生效的話,可能因為 Skin Layer 預設缺少設定值,造成讀不到 CSS JS 資源檔的問題,要從 portal_skins 的 Properties 檢查。
Error Message
default_error_message.pt 和 standard_error_message.pt
Responsive Design
考慮挑選符合 Responsive Design 的 Diazo 模組,像 plonetheme.responsivetheme 或 beyondskins.responsive 可以先安裝測試,這樣有助於建立適合 mobile device 或不同瀏覽環境的網站。
Section Navigation
Dropdown Menu / Mega Menu: webcouturier.dropdownmenu: plone5 textnroll.theme UUID fixing 外觀範例 textnroll + Plone5
待顯示圖表說明客製化關係圖 pragmatic plone project p14-15
Title Customization Based On URLs plone.app.layout/viewlets/common.py TitleViewlet (title.pt) 直接繼承會 conflict 在 configure.zcml 裡使用 layer 選項就不會 conflict
使用 tal:condition="python: not isAnon" 的 Template 語法來過濾特定 Tab 的顯示
Template Customization
z3c.jbot: logo.pt plone.app.layout/viewlets/logo.pt
http://plone.org/documentation/kb/customization-for-developers/tutorial-all-pages
tweak autogenerated IDs and HTML titles
related item display more info and sorting
Form
Action
Problem Creating New Action: folder_content view Move Order
plone.pathbar Viewlet 執行 PathBar 的 Python Class,實際再呼叫 breadcrumbs_view。
class PathBarViewlet(ViewletBase): index = ViewPageTemplateFile('path_bar.pt') def update(self): super(PathBarViewlet, self).update() self.is_rtl = self.portal_state.is_rtl() breadcrumbs_view = getMultiAdapter((self.context, self.request), name='breadcrumbs_view') self.breadcrumbs = breadcrumbs_view.breadcrumbs()
breadcrumbs_view 在 Products/CMFPlone/browser/configure.zcml 註冊兩次:
<browser:page for="*" name="breadcrumbs_view" class=".navigation.PhysicalNavigationBreadcrumbs" permission="zope.Public" allowed_attributes="breadcrumbs" /> <browser:page for="plone.app.layout.navigation.interfaces.INavigationRoot" name="breadcrumbs_view" class=".navigation.RootPhysicalNavigationBreadcrumbs" permission="zope.Public" allowed_attributes="breadcrumbs" />
Control Panel
FavIcon can be scaled from 128px or more down to 16px without quality compromises.
<link rel="icon" href="/++theme++mytheme/img/favicon.png" type="image/png"> <link rel="apple-touch-icon" href="/++theme++mytheme/img/favicon.png">