Movable Type 完全手冊:第十章 ─ 動手做做看

« 目錄


第十章 ─ 動手做做看

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

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

在前面的章節裡有提到,由於 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>
<!-- 就顯示一個空白 -->
&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> 之間、盡量靠近版面上方的位置,讓讀者載入頁面之後,不需要往下捲動太多就可以看得到這份清單。

問號游標

這個技巧是我在 hlb翻譯CSS實務排版技巧、秘訣與技術一文中學到的。茲重新整理節錄如下:

acronym(頭字語) 與 abbr(縮寫) 標籤雖然只在少數情況派上用場,卻有不錯的實用價值,可以配合著 title 屬性來解釋頭字語或縮寫。但即使網頁有提供文字來協助網站參觀者瞭解縮寫或頭字語的意義,現在大部分的瀏覽器卻不會為這個標籤作出任何的警示。所以讓我們從 CSS 來著手。

你可以在樣式表裡為這些標籤加上底線,讓它們能引起注意。透過瀏覽器的支援,你也可以用 CSS 把游標換成「求助」符號 (通常用問號表示)。當然你也可以不用被 HTML 標籤限制:創造一個叫 .help 的類別,再用 span 來為那些容易讓讀者混淆的字詞添加資訊。

以下是實際的範例:

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

這個 CSS 配合縮寫或頭字語標籤的 title 屬性使用,可以產生跟超連結不一樣的底線效果。把游標改成「求助」暗示著這些文字是不能按的,而 title 屬性則會解釋縮寫或頭字語。


保留部分權利AttributionShare Alike