前幾天我在裝「Did You Pass Math?」的時候，其實也一併裝了「footnotes」，不過這個套件可以討論的東西比較多，所以遲至現在才發表。

我一直認為，寫文章用 HTML 實在是用錯了格式。如果可以的話，我希望 blog 裡的文章，是使用 DocBook 格式為其原始格式，然後再經過某種機制，好比說 XSLT，轉換成 HTML 在 blog 裡呈現。理想狀況是，blog 的後台，內建 Web-based WYSIWYG DocBook editor。但這是理想，在現實上，連 stand-alone 的版本都沒有了[1]，遑論 blog 後台的整合。因此，遷就於工具的問題，也只好將就[2]。

是故，退而求其次，我希望至少能夠在 (X)HTML 裡，呈現出我常用的文章樣式。對偏向技術性文章的我來說，最重要的就是 program listing 與 inline code 的呈現了。這個我已經藉由 FCKEditor 可自訂 CSS 的功能達到[3]，若需要更進一步的 syntax coloring 或 line numbering 的花俏功能，我認為直接在 client 端藉由 javascript 達成[4]即可。

而第二常用的文章樣式，則是 footnote，我個人喜歡使用論文 reference 的寫法，於指涉處與註解處，皆使用方刮號 ( [ 和 ] ) 包裹註解編號，並加上超連結在兩者之間跳躍。這篇《升級到 wordpress 2.0.1》是個我手動編輯的範例，幸好用的是 WYSIWYG editor，但還是覺得很麻煩[5]。

最大的問題在於，編號的追蹤。因為文章在編輯過程中會更動，因此常要手動重新更新編號順序，對於懶人我來說，很是痛苦。理論上，編號的追蹤可以用兩種方法解決：

  1. Symbolic link：使用一獨一無二的符號名稱，將指涉處與註解處予以關連。如 Word 裡的交互參照，實際上靠的正是隱藏的 id 屬性[6]。此法缺點是需要額外的程式建立與維護交互鍊結。
  2. Inline note：直接把註解內容寫在指涉處，如 DocBook 的 <footnote> 正是使用此法。其缺點為，無法於多個指涉處，指涉同一個註解。

使用 symbolic link 法，需要有方便的介面輸入 symbol，這意味著要改 FCKeditor 的 hyper-link dialog，比較麻煩，而且，當多篇文章同時至於一個頁面下時，自行輸入的 symbolic id 會有 name conflict 的問題。因此，我傾向使用 inline note 法，且未來要轉成 DocBook 格式時，程式也會比較好寫。經過尋覓，我選定了 footnotes 這個 wordpress plugin。

Footnotes 的優點在於簡單好用，且在WYSIWYG editor 裡，仍然可以運作。Footnotes 使用的是 inline note 法，於指涉處，直接插入註解內容即可。依照預設的設定，只要在欲變成註解的內容前面，以 " ((" 起始[7]，後面以 "))" 終結，就好像 <footnote> 在 DocBook 裡的用法差不多，未來若我欲將文章轉換成 DocBook 格式，透過簡單的 regular expression 處理即可完成。另外，footnotes 也不是沒有考慮到，inline note 會有無法於多個指涉處，指涉同一個註解的問題，因此亦提供了於註解內容使用 "ref:#" 的格式，可以指涉已經指涉過的註解。

但考慮到 program listing 裡常會有對稱的雙刮號存在，其實 " ((" 和 "))" 並沒有那麼好用。幸好稍一檢視程式碼，便發現其實這對值，在 footnotes 裡是常數，所以改起來很方便。由於我不使用如 texurize、wiki format 這類「另創」的格式標示法寫文章，要不就直接寫 HTML，要不就用 WYSIWYG editor，是故，我大可以使用 HTML 的標籤，以便與文章內容作區隔，因為 HTML 本身已經具備了一套 escaping 的機制了。最後我選定的是 <span class="footnote"> 與 </span>，既與 HTML 相容，不容易與正常文章內容衝突，也可以與 FCKeditor 的自訂 CSS 的功能整合，未來寫個小程式，即可輕鬆轉換成 DocBook 格式[8]。

與 FCKeditor 的自訂 CSS 功能的整合很簡單，編輯 FCKEditor/fckstyles.xml 檔即可：

 

<Style name="Footnote" element="span">
    <Attribute name="class" value="footnote" />
</Style>

然後，為了在視覺上，能夠與正在編輯中的文章本文做區隔[9]，所以需要再更動一下 FCKeditor 編輯區的 CSS 設定檔 FCKEditor/editor/css/fck_editorarea.css 如下：

 

span.footnote
{
    font-size: small;
    background-color: #cbcbcb;
}

span.footnote:before
{
    content: "<footnote>";
    font-weight: bold;
    font-size: x-small;
}

span.footnote:after
{
    content: "</footnote>";
    font-weight: bold;
    font-size: x-small;
}

除了改變底色的處理之外，我特別還加了 span.footnote:before 與 span.footnote.after 的設定，這樣子會註解區前面和後面加上如 <footnote> 與 </footnote> 的字樣，做為註解區開始與結束的標示。另外我發現，由於這個標示是由 CSS 產生的，所以不屬於可以被編輯的部分，故用起來蠻特別的。實際上看起來的效果如下：

  1. 將要標示為註解內容的文字選取起來，然後選擇 Style 裡的 Footnote。
    wordpress + fckeditor + footnotes (1) - mark
  2. 被選取的部分，便可以被標示成註解內容。從選取後的反白狀況可以看出，前後加上的 <footnote> 與 </footnote> 字樣，因不可編輯而無法反白。
    wordpress + fckeditor + footnotes (2) - result
  3. 選取註解內容後，按 FCKeditor 的「橡皮擦」即可取消註解，回復成為本文內容。
    wordpress + fckeditor + footnotes (3) - cancel
  4. 這是回復成為本文內容後的情形。這裡有個缺點就是，若裡面還有其他樣式，也會一併被消除，例如圖中的 <span>。
    wordpress + fckeditor + footnotes (4) - cancelled

不過，footnotes 預設的呈現樣式，是簡單的數字而已，還必須稍加點處理，才能成為我想要的樣式。首先，於指涉處我希望使用如 [10] 的形式，這個好辦，在 footnotes 在後台加設的 option 頁面設定，將 pre-link text 與 post-link text 分別填入 [ 與 ] 即可。但註解處的格式，就不好弄了。研究後發現，footnotes 產生的註解區，大致如下：

 

<br>
<ol class="footnotes">
  <li id="footnote-1-505">note 1 [<a href="#footnote-link-1-505">back</a>]</li>
  <li id="footnote-2-505">note 2 [<a href="#footnote-link-2-505">back</a>]</li>
  <li id="footnote-3-505">note 3 [<a href="#footnote-link-3-505">back</a>]</li>
</ol>

因此，我們可以利用 CSS 來更改註解區的呈現方式：

 

ol.footnotes {
    /* Footnotes are less important, so use smaller font. */
    font-size: small;

    /* Reset counter to enable multiple footnote area within one page. */
    counter-reset: footnote_counter;

    /* Disable original list markers. */
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;

    /* Adjust position */
    margin: 0;
    margin-left: 5px 0 0px;
    text-indent: -2em;
}

ol.footnotes:before {
    /* Leading text that show this is footnote area. */
    content: "Footnotes:";
}

ol.footnotes li:before {
    /* Increment counter for every <li> */
    counter-increment: footnote_counter;

    /* Show the desired list marker style. */
    content: "[" counters(footnote_counter, ".") "] ";
}

ol.footnotes li {
    /* Adjust position */
    text-indent: -2em;
}

其中的關鍵在於 CSS 的 :before、content 與 counter 的使用，這個說來話長，所以我就懶的解釋了。總之，搭配以上的 CSS 設定，就幾乎可以做出我想要的效果。只可惜 back link 還是只能附在每條註解之後，而不能直接就在 list marker 裡呈現，如我在這篇手工製作的 footnote area 一樣。

於是，藉由安裝了 footnotes、更改設定，並增添 FCKeditor 與 CSS 相關的設定之後，在幾乎不更改 footnotes 程式碼的前提之下，便幾乎達到了我的需求，夢想幾乎達成，帥啊。

  1. 目前非 web-based 的單機版，我只認為 XMLmind Editor 夠好用，但其最新的版本，仍有中文字的折行問題存在，無法區分 ideographic characters，而僅以拼音文字的邏輯，於空格處折行。另一套 open source 的 Vex 雖然沒有這個問題，但畢竟其較不成熟，在使用者介面上，沒有 XMLmind Editor 好用。 ↩
  2. 不過最近有找到一套叫 DocBookWiki 的軟體，正如我所期待地，是個以 DocBook 為其基本格式的 wiki 軟體，並提供 WYSIWYG 的編輯介面。換句話說，「工具」的問題，是有可能解決的。 ↩
  3. 但還是有問題，這是 firefox 的 bug。 ↩
  4. 例如使用 dp.SyntaxHighlighter。 ↩
  5. 所以在那之後的文章，若有 footnote，就懶得加超連結了。 ↩
  6. 不是說真的有個叫 id 的屬性，而是某種功能等同 id 屬性的屬性。 ↩
  7. 不包含雙引號，且雙括弧前面的空白不可省略。 ↩
  8. 但考慮到巢狀 <span>，簡單的 regular expression 轉換可能不敷使用。 ↩
  9. 畢竟是 inline note 法，和正常文章本文夾雜在一起。 ↩
  10. 這是範例 ↩