樣板中的分類嵌入檔

睡蓮 標籤
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-block[註]，所有分類便會排列在同一行了。

排列成一行

[2021年加註] 多年後的今天會建議改用當年瀏覽器尚未支援 CSS3 中的彈性伸縮盒內聯區塊 display:inline-flex