12.
將網頁轉為樣板
一、 加入XOOPS佈景檔頭
- 請開啟教材包中的「檔頭.txt」,並將裡頭所有內容複製起來。
- 開啟theme.html,貼上並覆蓋<body>之前(含<body>)的所有HTML語法。
- 注意裡面的css檔連結位置,請視您的佈景css檔位置及檔名來自行修改。
二、 加入XOOPS樣板標籤
- 請開啟教材包中的「樣板碼.txt」,並將裡頭所有內容依序複製起來。
- 將複製起來的語法複製到theme.html中,並覆蓋原先標示的中文。
三、 修改檔案路徑
- 把「images/圖檔」都改成<{xoImgUrl images/圖檔}>,<{xoImgUrl}>代表完整佈景路徑。舊版寫法:<{$xoops_imageurl}>
- 其他不在佈景目錄中的檔案,用<{xoAppUrl 檔案}>來連結之。<{xoAppUrl}>代表網站網址。舊版寫法:<{$xoops_url}>
四、 複製必要的XOOPS樣式:
- 把xoops.css複製到您的佈景目錄中即可。
- xoops.css並非官方規定必要之檔案,而是我們自行整理出來一些XOOPS中有用到的CSS設定,因此,請自行修改或調整其內容。
五、 建立基本的區塊呈現區樣板檔(block.html)
- 每個區塊放置區都可以有一個樣板檔,可各自一個,也可共用一個。
- 區塊放置區的樣板碼可直接寫到them.html中,但這樣容易導致theme.html不易維護,所以大多獨立出來。
- 區塊呈現區樣板只有兩個樣板標籤:
- (1) 區塊標題:<{$block.title}>
- (2) 區塊內容:<{$block.content}>
六、 套用佈景
- 建議加入「版面風格」區塊,方便切換佈景,並記得到偏好設定將新的佈景加入選項
七、 有區塊才顯示(避免一堆無謂的空白)
- 有「上中區塊」才顯示(若網站沒套用任何區快到上中區塊呈現區,則整區消失):
<{if $xoBlocks.page_topcenter}>區塊樣板語法<{/if}>
- (1) 上左區塊:$xoBlocks.page_topleft
- (2) 上右區塊:$xoBlocks.page_topright
- (3) 上中區塊:$xoBlocks.page_topcenter
- (4) 下左區塊:$xoBlocks.page_bottomleft
- (5) 下右區塊:$xoBlocks.page_bottomright
- (6) 下中區塊:$xoBlocks.page_bottomcenter
- (7) 左區塊:$xoBlocks.canvas_left
- (8) 右區塊:$xoBlocks.canvas_right