實務篇（我該怎麼做）

### 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.