第十八天:在月曆中加上真的標題

「可是,」我聽到妳在哀嚎了,「我的月曆已經個標題了啊!看那邊,明明在上面就有年份跟月份了呀,我甚至還用了粗體字耶。」

但是,如果妳挖掘過妳的 HTML 源碼,就會發現妳的月曆並沒有真的標題。它可能祇是一個表格的 <td> 格子,佔滿著整個第一列,然後用了 CSS 規則來讓它看起來是粗體字。相較之下,如果妳用了真正的 <caption> 標籤的話,反而簡單多了。這樣不但在模版裡讀起來更簡單,也可以為妳的頁面多省下幾個位元,在視覺性瀏覽器裡看起來效果也相同,同時還更具親和力。

誰因此獲益?

  1. Marcus 從中獲益了。因為 Lynx 顯示標題時,會在前面再加上「 CAPTION: 」,讓他明白這一列是標題,而不是欄位標頭或表格資料。
  2. Jackie 間接地獲益了。因為用了真正的 <caption> 標籤能夠奠定使用真正表格標頭的良好基礎;我們將在明天的訣竅中討論到 Jackie 到底能從中得到些甚麼。

怎麼做

這個訣竅祇能夠適用於支援月曆的出版工具(所以 Blogger 就被排除掉了),同時這個出版工具還要能讓妳自訂產生月曆的 HTML 源碼(所以 Manila 也被排除掉了)。

在 Movable Type 中,妳的主索引模版裡可能有個用來當月曆的表格,就像這一個(搜尋「 calendarhead 」就差不多能找到它了):

<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td>
</tr>

<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

留著這個表格標籤,但是把表格中第一個 <tr> 列全部代換成真正的 <caption> 標籤,就像這樣:

<table border="0" cellspacing="4" cellpadding="0">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

剩下來的部分留著別動;我們明天再來加以修改。

<caption> 標籤裡的 class 屬性乃是選用性的;我在這裡把他留著,因為這樣就可以拿來取代掉預設的 Movable Type 樣式,繼續用 CSS 規則來讓年份及月份採用粗體字。像這樣子用 <caption> 標籤之後,妳的頁面看起來仍舊會跟以前一模一樣。

在 Greymatter 中的狀況仍舊相同,但是模版標籤卻不同:

<caption>{{monthword}} {{yearyear}}</caption>

同樣地,祇要妳這麼做,就可以用樣式表來改變 caption 的視覺樣式。

在 Radio 中,整個過程將會比較複雜,但並非不可能(我得感謝 Tony Bowden 提供了這些指引)。

  1. 在 Radio 裡,開啟實際的 Radio 應用程式。如果是在 Windows 的話,從系統列裡在小 Radio 圖示上按滑鼠右鍵,然後選擇「 Open Radio 」。
  2. 在「 Tools 」選單裡,選擇「 Developers 」,然後選「 Jump... 」 (Control+J) 。跳至「 system.verbs.builtins.radio.weblog.drawCalendar 」(不含引號)。
  3. 現在到「 Edit 」選單裡,選「 Find and Replace 」,然後選「 Find... 」 (Control+F) 並且尋找「 hCalendarTable 」。這樣應該會展現出繪製啟始 <table> 標籤和假月曆標題的源碼區塊。
  4. 把這個區塊中最後一列(在 <tr> 標籤中寫著 monthYearString 的那一列)改成這樣:

    add ("<caption>" + monthYearString + "</caption>")

  5. 關閉視窗。妳會被詢問到是否要編譯這個變更,請回答是。
  6. 如果妳想要的話,還可以設定標題的樣式。到妳的 Home Page Template (在 Prefs 頁面中)並且新增一個給 caption 用的樣式。以下這個是我自己在用的;在 <style> 區段中原本包含這些東西:

    body, td, p {
      font-family: verdana, sans-serif;
      font-size: 12px;
    }

    現在則是:

    body, td, p, caption {
        font-family: verdana, sans-serif;
        font-size: 12px;
        }
    
    caption {
      text-align: center;
      font-weight: bold;
    }

延伸閱讀