Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tutorial / Customization

Customization

Plone 系統的客製化工作,主要分成 Python 程式碼和資源檔案兩大類,前者負責處理邏輯運算,後者主要負責畫面顯示。

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" 就可以避免誤殺的情況。

Remove Skins Example

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 或不同瀏覽環境的網站。

Responsive Grid Frameworks

Responsive Grid System

Section Navigation

Dropdown Menu / Mega Menu: webcouturier.dropdownmenu: plone5 textnroll.theme UUID fixing 外觀範例 textnroll + Plone5

Products.PloneOrg

待顯示圖表說明客製化關係圖 pragmatic plone project p14-15

Title Customization Based On URLs

使用 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

widget rendering

tweak autogenerated IDs and HTML titles

Random Header Image

related item display more info and sorting

Form

PloneFormGen

Action

Problem Creating New Action: folder_content view Move Order

Access Parent Container

go to top

新增項目後執行特定動作

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

Dictionary Type Record