Sunburst Theme
HTML Structure
<html> <head></head> <body> <div id="visual-portal-wrapper"> <div id="portal-top" class="row"></div> <div id="portal-columns" class="row"></div> <div id="portal-footer-wrapper" class="row"></div> </div> <div id="ajax-spinner" style="display: none;"></div> </body> </html>
Portal Columns
變數 sl 是 python:plone_view.have_portlets('plone.leftcolumn', view) 的執行結果,變數 sr 是 plone.rightcolumn 的執行結果。
變數 classes 是 python:context.restrictedTraverse('@@sunburstview').getColumnsClasses(view) 的執行結果,起始值是 dict(one="", content="", two="") 最後會加 "cell" 當作第一個 Class 值。
<div id="portal-columns" class="row"> <div id="portal-column-content" class="cell width-3:4 position-1:4"></div> <div id="portal-column-one" class="cell width-1:4 position-0"></div> <div id="portal-column-two" class="cell ..."></div> </div>
順序上 column-content 在 column-one 之前,在小螢幕環境會先顯示,再利用 CSS position-0 讓 column-one 在大螢幕環境會顯示在左邊。