模板中的分類嵌入檔

類別: xoops
來源: (池水間)在我眼中的文章管理模組，以整體來說無可否認是個高素質、具有發展潛力的模組。才用了半年有多，越用越喜歡。模板的代碼結構，也不像現時大部份模組所使用之table層層嵌套式。從代碼素質方面來看，以嚴格的說不算是最好，而且div也用得有點過量，但是要改動代碼結構要比改動連鎖式table來得較為輕鬆多了。

好了，拋開代碼素質不說，現在來說說排版。模板中的article_inc_category.html這個嵌入檔，嵌進article_index.html裡面，也就是首頁中間的分類區。打開article_inc_category.html檔，會看到開頭及尾部位置插入了這樣的smarty語法：

<{assign var="num_column" value=2}> <{* Set the column number *}>
<{assign var="ful_width" value=95}>  <{* Set the full width for multiple columns *}>
<{assign var="col_width" value=$ful_width/$num_column|@floor}>  <{* calculate column width *}>
<{assign var="mode_list" value=0}> <{* Top:Left:Right mode*}>
<div>
<{foreachq item=category name=category from=$categories}>
	<div class="article-list-column" style="width: <{$col_width}>%; float: left; padding: 5px;">

略過..........................
		
	</div>	
<{if $smarty.foreach.category.iteration % $num_column eq 0}>
</div>
<br style="clear:both;" />
<div>
<{/if}>
<{/foreach}>
</div>

第一行是設定每橫列顯示出多少分類數；第二行是設定橫列寬度；第三行是以橫列寬度除以分類數，這樣便得出每個分類的寬度，輸出的數值會插入style裡面的width: <{$col_width}>%。

從網頁設計的角度來看，如果你的頁面是採用百分比的相對寬度，也就是隨著頁面伸縮而自動調整的寬度，這樣語法的設定，會導致在不同瀏覽器解析度下顯示，便會有不同的結果。就以預設的每橫列為兩個分類數來說，解析度越大，每個分類右側出現空白的地方也就越大，特別是在現今寬屏顯示器逐漸普及的年代，1600或以上像素的寬屏下，空白地方尤為突顯。但若頁面採用的是固定的絕對寬度，則無此弊。

以我個人的設計，是不會採用這種smarty語法將每個橫列分類數定死。其實要設定橫列分類數，CSS是完全可以勝任，而且比smarty設定的較為彈性多了。

在百分比頁面寬度下，較理想的排列方式是讓所有分類排列在同一行，隨著不同瀏覽器解析度而自動調整出每橫列的分類數。

每個分類的寬度，預設下是使用百分比寬度，比較適合頁面為固定的絕對寬度。但若你的頁面是百分比的相對寬度的話，分類則以固定的絕對寬度為佳。

要讓所有固定寬度的分類排列在同一行，只要給這個分類容器設定為display:inline，便會將所有分類排列在同一行了。

睡蓮‧池水間 :: 文章

模板中的分類嵌入檔