January 26, 2003

[活字印刷]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 屬性則會解釋縮寫或頭字語。

所發表
[創用 CC 授權條款]
MT 新手手冊 - 實務篇〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
    歷史上的今天:
    西元 2008 年: 西元 2006 年:
    迴響
    [ 1 : 靜態鏈結 ]

    jedi++ # 衝衝衝

    acer 發表於 January 26, 2003 12:51 AM
    給我迴響吧!
    個人資訊








    是否記住個人資訊?



    請依上圖輸入檢核碼:
    迴響





    Jedi.org: 部落格 | Weblog | 三太子 | 討論 | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | @ | Flickr | tumblr | NSFW