接下來這一章中，我將會實地操演一些模版撰寫的技巧。這些技巧也多半可以直接套用在妳自己的模版上。不過希望各位抄用之餘，也要看看為什麼我這樣子寫；畢竟網頁寫作變化萬千，唯有觀念奠立了，纔能夠隨意之所至地撰寫出合用的模版。
在前面的章節裡有提到，由於 Movable Type 預設會使用類別名稱來當作分類彙整檔名的一部份，所以妳不能夠在這裡使用中文字。權變的方法是在類別名稱用英文，然後在類別描述裡纔使用中文。
可是這麼一來，當妳在模版裡使用 <a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> 標籤時，顯示出來的就會是英文的類別名稱。妳很有可能想要顯示的是中文的類別描述，所以得用這樣的標籤組合：
<a href="<$MTArchiveLink$>"><$MTCategoryDescription$></a>請注意，為了要使用 <$MTArchiveLink$> 標籤，妳得把上面這些標籤包在彙整清單情境裡，也就是用 <MTArchiveList> 和 </MTArchiveList> 包起來；此外為了要使用 <$MTCategoryDescription$> 標籤，妳也得把上面這些標籤包在類別清單情境裡，也就是要用 <MTCategories> 和 </MTCategories> 包起來，或者是用 <MTEntryCategories> 和 </MTEntryCategories> 包起來。
另外，當然，妳還得先在「網誌組態」的「彙整」裡，啟用「分類彙整」的選項纔能夠做出連結到分類彙整頁面的鏈結。
以下是在文章標題前面加上中文類別描述的範例：
<!-- 「文章」情境開始 --><MTEntries><!-- 「引用」資料，不會被顯示出來 --><$MTEntryTrackbackData$><!-- 「如果這是這一天的第一篇」情境開始 --><MTDateHeader><!-- 就用「date」這個 CSS class 樣式做出第二級標題字 --><h2 class="date"><!-- 然後按照 %x 格式顯示日期 --><$MTEntryDate format="%x"$><!-- 對應 <h2 class="date"> --></h2><!-- 「如果這是這一天的第一篇」情境結束 --></MTDateHeader><!-- 用「blogbody」這個 CSS class 樣式做出一個欄框 --><div class="blogbody"><!-- 用文章 ID 來當「錨」 --><a id="entry<$MTEntryID pad="1"$>"></a><!-- 用「title」這個 CSS class 樣式做出第三級標題字 --><h3 class="title"><!-- 「文章所屬類別」情境開始 --><MTEntryCategories glue=", "><!-- 分類彙整的鏈結 --><a href="archives/cat_<$MTEntryCategory$>.html"><!-- 顯示中文類別描述 --><$MTCategoryDescription$></a><!-- 「文章所屬類別」情境結束 --></MTEntryCategories><!-- 冒號以及文章標題 -->: <$MTEntryTitle$><!-- 對應 <h3 class="title"> --></h3><!-- 文章內容 --><$MTEntryBody$><!-- 「如果文章有延伸內容」情境開始 --><MTEntryIfExtended><!-- 用「extended」這個 CSS class 樣式做出一個區塊 --><span class="extended"><!-- 就顯示「深入閱讀」的鏈結 --><a href="<$MTEntryPermalink$>">深入閱讀</a><!-- 對應 <span class="extended"> --></span><br /><!-- 「如果文章有延伸內容」情境結束 --></MTEntryIfExtended><!-- 用「posted」這個 CSS class 樣式做出一個欄框 --><div class="posted"><!-- 顯示作者 -->由 <$MTEntryAuthor$><!-- 建立連結到文章單篇彙整的鏈結 -->於 <a href="<$MTEntryPermalink$>"><!-- 按照 %X 格式顯示出版時間 --><$MTEntryDate format="%X"$> </a> 所發表<!-- 「如果文章允許評論」情境開始 --><MTEntryIfAllowComments><!-- 就顯示「迴響」鏈結 -->| <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false"> 迴響</a><!-- 「如果文章允許評論」情境結束 --></MTEntryIfAllowComments><!-- 「如果文章接受引用通告」情境開始 --><MTEntryIfAllowPings><!-- 就顯示「引用」鏈結 -->| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false"> 引用</a><!-- 「如果文章接受引用通告」情境結束 --></MTEntryIfAllowPings><!-- 對應 <div class="posted"> --></div><!-- 對應 <div class="blogbody"> --></div><!-- 「文章情境」結束 --></MTEntries>
請注意：在上面這個範例中，我用了 <a href="archives/cat_<$MTEntryCategory$>.html"> 標籤來取代彙整清單情境中的 <a href="<$MTArchiveLink$>"> 標籤，這樣子就不需要叫用彙整清單情境了。
以下是列出所有類別、並且讓他們各自連到自己的分類彙整頁面的範例：
<!-- 先顯示一個 | -->|<!-- 「類別清單」情境開始 --><MTCategories><!-- 空一格後建立起連結到分類彙整的鏈結 --><a href="<$MTCategoryArchiveLink$>"><!-- 顯示中文類別描述 --><$MTCategoryDescription$><!-- 空一格後再顯示一個 | --></a> |<!-- 「類別清單」情境結束 --></MTCategories>
妳可以把這一段 HTML 標籤放在 Banner 區下方，類別與類別之間、最前面以及最後面都會用 | 符號來隔開；或者妳也可以加以修改（像是加入 <br /> 來換列，並且重新調整 | 的位置）後放到旁邊的連結列去。
使用分類圖示的秘訣在於類別描述可以使用 HTML 標籤。所以搭配前一節的範例，妳就可以在文章標題前面顯示分類圖示，或者在 Banner 底下列出所有的分類圖示，連結到各個分類彙整去。
以下是用於類別描述的範例：
<!-- 開始放一張圖片 --><img<!-- 不能顯示圖片時，就顯示中文類別描述，前後用中刮號夾住，再空一格空白 -->alt="[中文類別描述] "<!-- 游標指到圖片上時，就顯示中文類別描述 -->title="中文類別描述"<!-- 用 foo.png 這個圖檔來當作圖示 -->src="foo.png"<!-- 指定圖示樣式為「不要有邊框」 -->style="border:0" />
請注意：使用圖示固然可以更精簡地傳達複雜的意涵，但是妳在使用圖示的時候應當要考量到：圖檔大小（下載時間會不會太久）、顏色對比（色盲是不是看得清楚），同時也應該提供替換文字（也就是 alt 這個屬性），這樣其他使用純文字模式瀏覽器、甚至是非視覺介面瀏覽器的讀者，纔能夠知道這裡到底有些甚麼東西。
另外，別忘記這個圖檔 (foo.png) 妳也得上傳到伺服器上；同時注意要清楚地指定到正確的路徑。
預設的模版裡，月曆上的日期在那一天有文章被發表時，就建立連往該日第一篇文章靜態頁面的鏈結；但是如果妳有製作「逐日彙整」的時候，把這個鏈結連到「逐日彙整」去。
關鍵的要點就是在 <$MTEntryPermalink$> 標籤中把 archive_type 屬性指定成 ="Daily" 就可以了。
以下就是這樣子的月曆範例：
<!-- 做一個欄框，把整個月曆放進去 --><div align="center" class="calendar"><!-- 欄框的內容全部置中對齊 --><!-- 這個欄框會採用「calendar」這個 CSS class 的樣式 --><!-- 做一個表格來放月曆（本來就是一格一格的） --><table border="0" cellspacing="4" cellpadding="0" summary="當月月曆以及連往每日彙整的連結"><!-- 這個表格不要有外框 --><!-- 表格裡，格子與格子之間的間隔是 4 個點 --><!-- 表格裡，每個格子內不要再多留白 --><!-- 並設定表格的摘要 --><!-- 表格的標題 --><caption class="calendarhead"><!-- 按照 %Y-%m 的格式顯示目前的日期 --><$MTDate format="%Y-%m"$><!-- 對應 <caption class="calendarhead"> --></caption><!-- 顯示星期幾的那一列 --><tr><!-- 這一欄是「星期日」的縮寫，置中排列 --><th abbr="星期日" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「日」 -->日<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期日" align="center"> --></th><!-- 這一欄是「星期一」的縮寫，置中排列 --><th abbr="星期一" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「一」 -->一<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期一" align="center"> --></th><!-- 這一欄是「星期二」的縮寫，置中排列 --><th abbr="星期二" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「二」 -->二<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期二" align="center"> --></th><!-- 這一欄是「星期三」的縮寫，置中排列 --><th abbr="星期三" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「三」 -->三<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期三" align="center"> --></th><!-- 這一欄是「星期四」的縮寫，置中排列 --><th abbr="星期四" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「四」 -->四<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期四" align="center"> --></th><!-- 這一欄是「星期五」的縮寫，置中排列 --><th abbr="星期五" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「五」 -->五<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期五" align="center"> --></th><!-- 這一欄是「星期六」的縮寫，置中排列 --><th abbr="星期六" align="center"><!-- 按照「calendar」這個 CSS class 樣式做一個區塊 --><span class="calendar"><!-- 顯示「六」 -->六<!-- 對應 <span class="calendar"> --></span><!-- 對應 <th abbr="星期六" align="center"> --></th><!-- 對應 <tr> --></tr><!-- 「月曆」情境開始 --><MTCalendar><!-- 「如果這是一週的第一天」情境開始 --><MTCalendarWeekHeader><!-- 就開始新的一列 --><tr><!-- 「如果這是一週的第一天」情境結束 --></MTCalendarWeekHeader><!-- 這一欄的內容要置中對齊 --><td align="center"><!-- 用「claendar」這個 CSS class 樣式做出一個區塊 --><span class="calendar"><!-- 「如果這一天有文章」情境開始 --><MTCalendarIfEntries><!-- 就讓「文章」情境開始 --><MTEntries lastn="1"><!-- 但是祇採用最後一篇文章的資訊 --><!-- 建立鏈結 --><a href="<$MTEntryPermalink archive_type="Daily"$>"><!-- 指定連到逐日彙整的靜態頁面 --><!-- 同時也顯示日期 --><$MTCalendarDay$><!-- 鏈結結束 --></a><!-- 「文章」情境結束 --></MTEntries><!-- 「如果這一天有文章」情境結束 --></MTCalendarIfEntries><!-- 「如果這一天沒有文章」情境開始 --><MTCalendarIfNoEntries><!-- 就祇顯示日期就好 --><$MTCalendarDay$><!-- 「如果這一天沒有文章」情境結束 --></MTCalendarIfNoEntries><!-- 「如果這個格子不是這個月份的日期」情境開始 --><MTCalendarIfBlank><!-- 就顯示一個空白 --> <!-- 「如果這個格子不是這個月份的日期」情境結束 --></MTCalendarIfBlank><!-- 區塊結束，對應 <span class="calendar"> --></span><!-- 這一欄結束，對應 <td align="center"> --></td><!-- 「如果這是一週的最後一天」情境開始 --><MTCalendarWeekFooter><!-- 就把這一列結束 --></tr><!-- 「如果這是一週的最後一天」情境結束 --></MTCalendarWeekFooter><!-- 「月曆」情境結束 --></MTCalendar><!-- 表格的結尾 --></table><!-- 欄框的結尾 --></div>
預設的模版中，並不會列出最近的迴響；但是如果妳打算做出相當活躍的網誌的話，意味著可能會有許多訪客前來發表迴響。這個時候如果妳能夠列出最近被發表的迴響，就可以在某種程度上促進讀者交流互動 ─ 因為讀者（當然妳自己也是）能夠一眼就看到「最近又有哪些話題是大家在熱烈討論的」了。
以下就是列出近 10 篇迴響的範例：
<!-- 以「sidetitle」這個 CSS class 樣式做出一個欄框 --><div class="sidetitle"><!-- 顯示「最近的迴響」 -->最近的迴響<!-- 對應 <div class="sidetitle"> --></div><!-- 以「side」這個 CSS class 樣式做出一個欄框 --><div class="side"><!-- 「評論」情境開始 --><MTComments lastn="10" sort_order="descend"><!-- 新的評論在前面，祇列出最新 10 項 --><!-- 「評論對應文章項目」情境開始 --><MTCommentEntry><!-- 建立起評論鏈結 --><a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTCommentEntryID$>"><!-- 顯示「Re: 」-->Re:<!-- 文章標題 --><$MTEntryTitle$><!-- 建立鏈結的部分到此為止 --></a><!-- 「評論對應文章項目」情境結束 --></MTCommentEntry><!-- 顯示「, by 」-->, by<!-- 評論作者 --><$MTCommentAuthor$><!-- 顯示「 (」 -->(<!-- 以 %b %d 的格式顯示評論發表日期 --><$MTCommentDate format="%b %d"$><!-- 顯示「)」 -->)<!-- 換一列 --><br /><!-- 「評論」情境結束 --></MTComments><!-- 對應 <div class="side"> --></div>
在這個範例中，我們會用 Re: 後面接上原來的文章標題，表示這是對這一篇文章的迴響；並且建立起鏈結，連到迴響頁面去。接著，還會在標題後面接上逗號，並以 by 來指出這一篇迴響是由誰所發表的；為了不要讓版面太複雜（充斥著鏈結），所以這裡的迴響作者並不會附上任何鏈結。最後並用刮號註明這一篇迴響發表的日期。
妳可以把上面這一段插入到 <div id="links"> 和 </div> 之間、盡量靠近版面上方的位置，讓讀者載入頁面之後，不需要往下捲動太多就可以看得到這份清單。
這個技巧是我在 hlb 所翻譯的 CSS實務排版技巧、秘訣與技術一文中學到的。茲重新整理節錄如下：
acronym(頭字語) 與 abbr(縮寫) 標籤雖然只在少數情況派上用場，卻有不錯的實用價值，可以配合著 title 屬性來解釋頭字語或縮寫。但即使網頁有提供文字來協助網站參觀者瞭解縮寫或頭字語的意義，現在大部分的瀏覽器卻不會為這個標籤作出任何的警示。所以讓我們從 CSS 來著手。
你可以在樣式表裡為這些標籤加上底線，讓它們能引起注意。透過瀏覽器的支援，你也可以用 CSS 把游標換成「求助」符號 (通常用問號表示)。當然你也可以不用被 HTML 標籤限制：創造一個叫 .help 的類別，再用 span 來為那些容易讓讀者混淆的字詞添加資訊。
以下是實際的範例：
abbr, acronym, .help {
border-bottom:1px dotted #333;
cursor:help;
}
這個 CSS 配合縮寫或頭字語標籤的 title 屬性使用，可以產生跟超連結不一樣的底線效果。把游標改成「求助」暗示著這些文字是不能按的，而 title 屬性則會解釋縮寫或頭字語。
版權所有 © 2003 Jedi. 保留部分權利。