[黑客人生] outline2html 的模組化用法

很久以前, gugod 為了要幫某人製作網頁,寫了一套叫 outline2html (這要唸成 "outline to HTML") 的 Perl 程式,可以把 Emacs 樣式的大綱 (outline) 文字,轉換成投影片樣式的 HTML 檔。這支程式基本上就是單獨的一個 .pl 檔案,祇需要基本的 Perl 執行環境就可以使用;另外也附了一份 .css 的樣式檔,藉由修改這個樣式檔就能讓整份製作出來的網頁有著很不一樣的質感。

自從 gugod 撰寫出這個 outline2html 之後,我就開始也跟著使用;使用時會遇到一些瑕疵,或想要加進甚麼功能,也都找 gugod 幫忙,不知不覺 outline2html 越來越合我所用,而我也成為全世界最常使用 outline2html 的人了。(這麼說應該不為過吧!)即便日後出現了 IngyKwiki 所撰寫的 Spork 、大長輩 Eric Meyer 開發的 S5 、強者 tkirby 持續日益精進的 tkslide ,我最常用也最慣用的系統仍然是 outline2html 。

我會這麼喜歡 outline2html ,是因為它擁有別人所沒有的:模組化功能。以下我將簡略介紹一下這個用法……

首先讓我們來看一個實際的例子好了。請看一下我為 2005/03/14 在宜蘭講解 Wiki 的這份投影片,我實際用來製作投影片的檔案 outline.text 內容如下:

-*- Outline -*-

* 網頁建構的新思維

[<h2>Wiki 網路共筆在教育上的運用</h2>]
[<h3>@宜蘭縣龍潭國小</h3>]

[include: ../module/Jedi.text]
[include: ../module/traditionalplatform.text]
[include: ../module/whatswiki.text]
[include: ../module/wikistories.text]
[include: ../module/wikichoice.text]
[include: ../module/oddmuse.text]
[include: ../module/tiddlywiki.text]
[include: ../module/wikisystems.text]
[include: ../module/wikifundation.text]
[include: ../module/wikimanage.text]
[include: ../module/refinewiki.text]
[include: ../module/outline2html.text]

- 此投影片位於 https://jedi.org/p4/slide/20050314/root-0.html
- 此投影片列印版本位於 https://jedi.org/p4/slide/20050314/outline.html
- 此投影片源碼位於 https://jedi.org/p4/slide/20050314/outline.text (UTF-8)
[include: ../module/filesurl.text]
[include: ../module/ccbyncsa-2.0-tw.text]

Local Variables:
document-output-coding-system: utf-8
buffer-file-coding-system: utf-8
document-title: Wiki 網路共筆在教育上的運用
document-footer: This page is generated by outline2html
End:

這份檔案裏面用了大量的 [include: ../module/FOO.text] 這個語法,而幾乎看不到實際的內容。這就是我取用「投影片模組」的方式。事實上不祇投影片的內容,就連投影片裏會用到的所有圖片,也都是如此。

妳如果瀏覽一下 https://jedi.org/p4/slide/ 這個目錄,就會發現它的結構大致像這樣:

slide 目錄的架構圖,裏面除了各份投影片的目錄外,另外還有 module 和 image 兩個目錄事實上在 outline2html 裏面, [include: ][image: ] 這兩個語法都可以使用相對路徑,也就是說我可以用 ../ 來表示上一層目錄。因此我所有的投影片都放在 slide/ 目錄中,每一份投影片各自用日期存放到一個目錄裏;所有會用到的圖片都放進 slide/image/ 目錄中,這樣我要使用圖片時祇要用 [image: ../image/FOO.png] 這樣的語法即可,而且重複使用的圖檔不需要多佔一份硬碟空間(或上傳頻寬),就連需要更新圖片的時候,也是同時在更新所有使用到該圖片的投影片。

同樣地,我的投影片內容也都按照各自的主旨,分別單獨撰寫成單一的投影片模組,並存放於 slide/module/ 目錄中;每次我要到不同的地方針對不同對象、不同目的演說或講課時,我就會把要用到的投影片模組找出來,然後用 [include: ../module/FOO.text] 這樣的語法來使用。接下來就是安排投影片的順序,再視情況加入串場用的大綱片段而已了。這樣我每次要增、刪、調整某個主題的順序時,都祇要處理一列文字而已,相當輕鬆;而且也不會因為文件過長而難以掌握整體架構。

事實上不祇是投影片的這些大綱片段而已,就連 outline2html 這支程式,以及會用到的樣式表,也都被我放到 slide/module/ 目錄中(當然我因此略微修改了 outline2html 的程式碼)。

其實會發展出這樣的用途,是因為許久之前我聽了 autrijus 描述了 Lawrence Lessig 「模組化論文」的作法後,深深受到感召:

妳想像一下在 Lessig 的硬碟裏,有一個目錄裝著他的論文工作;在這個目錄中大約有 50 個子目錄,分別對應著 50 個他會感興趣的次領域,每一個子目錄裏又有許多的檔案,檔案內容就是那個次領域中,相關的論文片段。每次當 Lessig 要寫一篇新的論文時,就會先把這篇論文有關的幾個次領域決定出來,然後把這些論文片段貼上,再撰寫論文的前言、以及段落之間的串場文字,一篇論文就完成了。至於他平常的主要工作,就祇是在更新那些論文片段,讓他們能夠跟上時代變化而已。

我以前寫過一篇《資訊密度與模組化》,就已經是在暗示這件事對我的影響了。因為我會去演說或講課的內容,大致上都離不開幾個大主題,會有所不同的祇有每次因時間和對象,而需要做的更動而已;因此我使用了 outline2html ,來幫助我順利完成每一次會用到的投影片。這真的相當方便。

除了模組化的部分以外,我在處理樣式(與列印)的時候,也對 outline2html 做了一些修改,也就是我讓讀者要列印我的投影片時,去套用另一份寫給印表機的樣式表。現在每次我準備好投影片大綱的時候,就祇需要下達兩個指令,分別採行或不採行 outline2html 的 -p 參數,就能夠製作出兩份檔案:

../module/outline2html.pl -c -p outline.text
../module/outline2html.pl outline.text > outline.html

其中 outline.html 就是一次顯示全部內容、適合讓讀者列印出來的版本,而 root-0.html 則是我實際播放投影片時會使用的版本。這兩個版本在瀏覽器上閱讀時,都是深色底色、淺色文字的,而要試圖列印時,又都會變成白色底色(加上淡淡的浮水印)、黑色文字的版本。

以上這些,大概就是之前從來沒有寫在任何文件裏面的、 outline2html 的神秘用法吧。

jedi.org: