[活字印刷] MT 新手手冊 - 實務篇

第五章：實務篇（我該怎麼做） — 巧思與實踐

接下來這一章中，我將會實地操演一些模版撰寫的技巧。這些技巧也多半可以直接套用在妳自己的模版上。不過希望各位抄用之餘，也要看看為什麼我這樣子寫；畢竟網頁寫作變化萬千，唯有觀念奠立了，纔能夠隨意之所至地撰寫出合用的模版。

中文類別名稱/在索引頁面加入分類彙整的鏈結

在前面的章節裡有提到，由於 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="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>

<-- 就顯示一個空白 -->
            &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 ；這樣會有以下的效果：

  1. 把 box 的寬度縮小（box 的左邊界向右移）
  2. 讓 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 屬性則會解釋縮寫或頭字語。

jedi.org: