解開 isotope-site.zip 原始檔後，先觀察目錄結構和 index.html 內容：
isotope-site/
├── CONTRIBUTING.mdown
├── README.mdown
├── css
│ └── style.css
├── custom-layout-modes
│ ├── big-graph.html
│ ├── category-rows.html
│ ├── centered-masonry.html
│ ├── masonry-column-shift.html
│ ├── masonry-corner-stamp.html
│ ├── masonry-gutters.html
│ └── spine-align.html
├── demos
│ ├── adding-items.html
│ ├── basic.html
│ ├── combination-filters.html
│ ├── elements-complete.html
│ ├── elements-partial.html
│ ├── filtering.html
│ ├── fluid-responsive.html
│ ├── hash-history.html
│ ├── images.html
│ ├── infinite-scroll.html
│ ├── layout-modes.html
│ ├── relayout.html
│ ├── removing.html
│ └── sorting.html
├── docs
│ ├── adding-items.html
│ ├── animating.html
│ ├── extending-isotope.html
│ ├── filtering.html
│ ├── hash-history-jquery-bbq.html
│ ├── help.html
│ ├── introduction.html
│ ├── layout-modes.html
│ ├── license.html
│ ├── methods.html
│ ├── options.html
│ └── sorting.html
├── index.html
├── jquery.isotope.js
├── jquery.isotope.min.js
├── js
│ ├── fake-element.js
│ ├── jquery-1.7.1.min.js
│ ├── jquery.ba-bbq.min.js
│ ├── jquery.infinitescroll.min.js
│ └── make-big-graph-projects.js
├── pages
│ ├── 2.html
│ ├── 3.html
│ ├── 4.html
│ ├── 5.html
│ └── 6.html
└── tests
├── callbacks.html
├── combo-sort-history.html
├── destroy.html
├── elements-complete-test.html
├── flash.html
├── index.html
├── item-position-data.html
├── jquery-animation.html
├── no-items.html
├── onlayout.html
├── right-to-left.html
├── tiny-text.html
└── unclickable-filtered.html
7 directories, 62 files
首先，把 JavaScript 和 CSS 檔案上傳到 ZMI 的 /portal_skins/custom 目錄，至少有三個檔案：
- jquery-1.7.1.min.js - 這個檔案在原始檔的 js 目錄裡找得到，從 ZMI 下拉選單點選 File 來新增。
- jquery.isotope.min.js - 仿照上述方式上傳。
- style.css - 這個檔案在原始檔的 css 目錄裡找得到，從下拉選單點選 DTML Method 來新增。由於 Plone 原本也有 style.css 同名稱的檔案，為避免衝突，我改用 isotope.css 名稱來上傳。
接著，要選一個「網頁」位址，來實際展示畫面，實作方法很多種，以根目錄為例，我是在 ZMI 根目錄裡新增一個 Page Template，請留意，這裡的 Id 要指定為 index_html，系統發現目錄裡有這類名稱時，會優先執行它，index_html 內容先複製自 Sunburst main_templage.pt 檔案，可參考這系列 gist 的第一次版本。
這時候的畫面，很可能會變得清爽，主內容的區塊全部清空了：
我們想把 Plone Demo 字樣換掉，也就是改用新標題。從 ZMI 根目錄點選剛才建立的 index_html 檔案，在 Title 欄位填上 Python Periodic Table 當作新標題：
還要修改一段程式碼才能真的生效，把 <h1> 改成 TAL 敘述式，讀取 template/title 變數值：
重頭戲上場了，要把原始碼 index.html 內容嵌入 Page Template 裡。依序是：
接下來是許多微調的動作，特別是要把檔案路徑、CSS 衝突或不適宜的設定值改掉，例如：
- 路徑 js/jquery-1.7.1.min.js 改成 jquery-1.7.1.min.js。
- 來自 isotope index.html 的 <section id="content"> 改成 <section id="scontent">，對應的 CSS 設定值 #content 也全部要改成 #scontent。
- 新增 CSS 設定值來處理 name 與 weight 重疊的問題。
#scontent p {
margin-bottom: 0;
}
如果 poortal-column-content 的 CSS class 改用 width-full 的話，可以擁有全螢幕的顯示效果。
No comments:
Post a Comment