接下来这一章中，我将会实地操演一些模版撰写的技巧。这些技巧也多半可以直接套用在你自己的模版上。不过希望各位抄用之馀，也要看看为什么我这样子写；毕竟网页写作变化万千，唯有观念奠立了，才能够随意之所至地撰写出合用的模版。
在前面的章节里有提到，由于 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="<$MTCategoryArchiveLink$>"><!-- 显示中文类别描述 --><$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>
以下是列出所有类别、并且让他们各自连到自己的分类汇整页面的范例：
<!-- 先显示一个 | -->|<!-- 「类别清单」情境开始 --><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, 2004 Jedi. 保留部分权利。Modified By Zhu8 | 2009.11.20 | Friday | 22:27:43