兩年來的願望終於成真

兩年前的一二月期間，我忽發奇想希望修改一下自己的網頁，但當時試過幾日之後發覺總是做不到自己想要的效果。最後祇改了一些無關痛癢的地方後就不了了之。昨天在公司時沒有事忙，突然記起了這件事，於是乎在網上找了一些資料後就重新嘗試一下。昨天成功地把網頁的內容與外觀排位分了家，今日就成功地把最難的轉頁部份做到了。

下圖：舊有的版面。基本上它是中文和英文並存，而且內容與外觀排版全是放在同一個 HTML 檔內。到現在為止，我的網址內共有 61 頁模型網頁，如果要修改所有的外觀排版
的話，就要開所有 61 個檔。明顯地這不是方便的做法。（圖中舊網頁的地址：舊網頁）

下兩圖：新的版面上中文與英文分了家，版面右上角加了一個按扭，按一按就能夠顯示中文或英文版。設計上如果還有第三種或以上的語文的話，都可以加入用類似的按扭來控制。

兩年前嘗試時失敗的主要原因是我能夠分開網頁的內容與外觀排版，但就不知道怎樣把兩者組合起來。如果看倌對網頁有點認識的話，應該知道我所謂的「分開網頁內容」是指把文字的描述和圖片的網址放了在一個 XML 檔內；而這個 XML 檔內也分開了中文和英文的描述。我的做法是在 index.html 檔內透過 JavaScript 去讀取 XML 檔內的內容，以同一個 JavaScript function 重寫 index.html 的 HTML 碼。這個  JavaScript 檔是一個 function 而不是 module 是因為它需要有「中文」或「英文」作 input 去選擇讀取 XML 檔內的中文或英文內容。其實用 JavaScript 去重寫 index.html 的 HTML 碼我在兩年前已經做得到，所以今天一個早上就已經寫好那部份了。現在這個安排之下，祇有  XML 檔是每一個模型網頁都會不同，但每一個模型網頁的 HTML 檔都是完全一樣，而 JavaScript 檔就是所有模型網頁共用一個。故此祇要改動 JS 檔關於排版的部份就可以改變所有模型網頁的排版。但當然，要做到這個階段的話就先要把 61-1=60 個模型網頁的內容放入 XML 檔內！這個巨大的工程自然不是一兩日就可以完成的。（作參考之用：我從 2006 年秋天開始在網頁中加上英文描述，估計今年夏天應該可以全部完成。所以這次改版可能要幾年時間才可以完成。）

下圖：兩年前以相同原理做出來的圖片專頁。（這頁的 HTML 碼就是用 JavaScript 自動編寫出來的。）

---

三月二十四日補註：剛才發現 IE8 看新網頁會有大問題，IE9 還算可以，不過暫時以用 Chrome 最理想。新網頁的地址：新網頁