实务篇（我该怎么做）

### Movable Type 新手手册：实务篇（我该怎么做）

« 目录

- 实务篇（我该怎么做）

- 中文类别名称/在索引页面加入分类汇整的链结
- 分类图标
- 把月历上特定日期连到相对应的逐日汇整
- 显示最近的回响
- 修正预设的 CSS
- 问号光标

# 实务篇（我该怎么做）

接下来这一章中，我将会实地操演一些模版撰写的技巧。这些技巧也多半可以直接套用在你自己的模版上。不过希望各位抄用之馀，也要看看为什么我这样子写；毕竟网页写作变化万千，唯有观念奠立了，才能够随意之所至地撰写出合用的模版。

- ## 中文类别名称/在索引页面加入分类汇整的链结

在前面的章节里有提到，由于 MT 预设会使用类别名称来当作分类汇整档名的一部份，所以你不能够在这里使用中文字。权变的方法是在类别名称用英文，然后在类别描述里才使用中文。

可是这么一来，当你在模版里使用 <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>
    <!-- 就显示一个空白 -->            &nbsp;
    <!-- 「如果这个格子不是这个月份的日期」情境结束 -->          </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> 之间、尽量靠近版面上方的位置，让读者加载页面之后，不需要往下卷动太多就可以看得到这份清单。

- ## 修正预设的 CSS

MT 官方站预设的 CSS 模版其实都有一些小问题：

- 随著最初安装就附上的 clean 这个模版的症状是当读者使用 IE 浏览页面的时候，不论窗口大小调整成多少，页面范围都一定会超出浏览器窗口宽度，因此出现横向滚动条。

这个现象我在「出现横向滚动条？」这一篇里曾经报导过，其原因和解决的方法则在「IE 出现横滚动条的问题已经修好啦！」这一篇里有解释。这里再说明一次：

在 clean 的 CSS 里， #contain 主要是透过 position:absoulate; 来让下一个组件（就是左方的那些日历啊、选单的）被强迫重叠在网志的内文底下；然后又因为指定 margin-left 来设定 margin 的左边界，所以你会看到左边是选单跟日历，而右边是部落格的内文。

然后问题来了， IE 预设会把 margin 的尺寸定成跟页面一样大，然后因为我们没有改过页面的大小，所以 margin 的宽度就会跟「整个 IE 窗口」的宽度一致 ─ 所以无论如何都会出现横滚动条！

所以解决的方法很简单，就是把 margin-left 改成 left ；这样会有以下的效果：

- 把 box 的宽度缩小（box 的左边界向右移）
- 让 margin 的左边界贴到 box 的左边界上（margin 左边界的绝对值没有改变）

所以对于 Opera 或 Mozilla 或 Phoenix 都不会有所影响，却可以解决掉 IE 的显示异常。

以下就是实际上你应该写进样式表 (CSS) 模版中的东西：

    	#content {
    		position:absolute;
    		background:#FFF;
    		margin-right:20px;
    		left:225px;
    		margin-bottom:20px;
    		border:1px solid #FFF;
    		}

- 至于其它的几个预设模版，像是 Trendy, Georgia Blue, Gettysburg, Rusty, Plain Jane, Stormy 等的问题则在「烂掉的 CSS」里被我报导过。在这些 CSS 模版中， #content 使用了 float:left; 浮动到左边去，然后链结区 (<div id="liniks">) 则因此被挤到右边去。结果当链结区太长，或者是 #content （左边的文章区）太短，你就会看到链结区往左边扩散开来。

处理这个瑕疵的方法并不难，祇需要在 #links 里再指定栏框的左边界就可以了。实际的范例像是这样：

    	#links {
    		margin-left:67%;
    		background:#fff;
    		padding-right:15px;
    		}

详细的内容会因样式的不同而有所出入，你唯一需要做的事情就祇是把 margin-left 这一列加入即可。

- ## 问号光标

这个技巧是我在 hlb 所翻译的 CSS实务排版技巧、秘诀与技术一文中学到的。兹重新整理节录如下：

acronym(头字语) 与 abbr(缩写) 卷标虽然只在少数情况派上用场，却有不错的实用价值，可以配合著 title 属性来解释头字语或缩写。但即使网页有提供文字来协助网站参观者了解缩写或头字语的意义，现在大部分的浏览器却不会为这个卷标作出任何的警示。所以让我们从 CSS 来著手。

你可以在样式表里为这些卷标加上底线，让它们能引起注意。透过浏览器的支持，你也可以用 CSS 把光标换成「求助」符号 (通常用问号表示)。当然你也可以不用被 HTML 卷标限制：创造一个叫 .help 的类别，再用 span 来为那些容易让读者混淆的字词添加信息。

以下是实际的范例：

    	abbr, acronym, .help {
    		border-bottom:1px dotted #333;
    		cursor:help;
    	}

这个 CSS 配合缩写或头字语卷标的 title 属性使用，可以产生跟超级链接不一样的底线效果。把光标改成「求助」暗示著这些文字是不能按的，而 title 属性则会解释缩写或头字语。

Copyright © 2003, 2004 Jedi. Some Rights Reserved.