Xoops佈景區塊只用一個樣板程式顯示11個區塊內容包含自訂樣式的方法-教學撰寫:徐嘉裕Neil hsu

Xoops佈景其實可以透過樣板的includeq讀取子樣板傳遞變數，吧11個區塊陣列變數傳到1個樣板檔中執行，可以精簡樣版的使用也方便開發及定義內容樣式，方法如下：

1、先建立一個樣板檔->blockstpl.tpl放到佈景的tpl資料夾裡面

2、在blockstpl.tpl樣板中置如以下的code

<div class="<{$site}>box";
<{foreach item=block from=$fromvar}>
<aside>
<h4 class="block-title"><{$block.title}></h4>
<div class="blockcontent"><{$block.content}><div style='clear: both;'></div></div>
</aside>
<{/foreach}>
</div>

3、然後就是佈景的bodytpl.tpl布局，依照設計需求分別引入blockstpl.tpl樣板並傳入$fromvar值

//左區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.canvas_left  site=left}>

//右區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.canvas_right  site=right}>

//中間上區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_topcenter  site=topcenter}>

//中間上左區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_topleft  site=topleft}>

//中間上右區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_topright  site=topright}>

//中間下區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_bottomcenter site=bottomcenter}>

//中間下左區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_bottomleft  site=bottomleft}>

//中間下右區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.page_bottomright site=bottomright}>

//底左區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.footer_left  site=footer_left}>

//底中區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.footer_center  site=footer_center}>

//底右區塊

<{includeq file="$theme_name/blockstpl.tpl" fromvar=$xoBlocks.footer_right  site=footer_right}>

這樣就能用一個樣板程式讀取佈景的11個區塊，那要如何針對各別區塊自訂樣式及內容呢!

重點就在includeq除了傳送fromvar變數外還有一個site變數，這就是給區塊CSS用來定義內容，舉例來說，針對左區塊自訂CSS樣式及增加一個只有左區塊才看的到的內容!

//左區塊傳入site變數值為left，所以以下紅字的class會解析為.leftbox

<div class="<{$site}>box";

<{foreach item=block from=$fromvar}>
<aside>
<h4 class="block-title"><{$block.title}></h4>
<div class="blockcontent"><{$block.content}><div style='clear: both;'></div></div>
</aside>
<{/foreach}>
</div>

這樣就能用CSS定義左區塊樣式了

.leftbox{

position: relative;

width: 300px;

padding: 0px 0px 170px 0px;

}

.leftbox h4{

position: relative;

width: inherit;

height: 49px;

padding: 6px 10px 0px 7px;

border-radius: 10px;

}

接下來是在左區塊自訂一個區塊放一個按鈕，方法如下!

<div class="<{$site}>box";

<{if  $site eq 'left'}><a  href="https://www.blogger.com/">左區塊按鈕</a><{/if}>

<{foreach item=block from=$fromvar}>
<aside>
<h4 class="block-title"><{$block.title}></h4>
<div class="blockcontent"><{$block.content}><div style='clear: both;'></div></div>
</aside>
<{/foreach}>
</div>

紅字的內容只會顯示在左區塊，其他區塊不會顯示，這樣透過$site變數不但能自訂樣式還能自訂內容，最後再跟大家說一個秘密，如果再blockstpl.tpl樣板中再次引入blockstpl.tpl並傳送變數值，就會變成無限迴圈喔....很恐怖的大家可別亂玩!!但smarty遞迴就是用這方法解的喔!!

以上工作心的分享，有需要的朋友參考看看!

工作心得分享： 徐嘉裕 Neil hsu