簡睿隨筆 《科技篇》

隨著發表在部落格的文章篇數越來越多，勢必要有一套系統化的程序與方法來組織與記錄這眾多的文章，但為這個小需求寫個資料管理系統似乎又太過頭，因為最近這四、五個月的文章都記錄在TiddlyWiki裡，因此今天就透過TiddlyWiki來做整理，最後完成的狀況還算不錯，特別在此公佈，或許對讀者們也能有些許幫助。

我的需求是：

• 文章要能依年度、月份彙總在一起
• 系列性質的多篇文章要能彙總在一起，例如jQuery分類、jEdit分類要集中在一起

整理步驟如下：

• 首先建立新文章，篇名為YYYY/MM格式，如2007/11、2007/12
  1. 內容第一列以H3格式（即!!!開頭的文字）寫入年度、月份，當顯示在所有月份彙總文章時能區別各個月份
  2. 把該月份的文章都以Wiki格式輸入進去，例如：

!!!2007/11
# [[11月第一篇文章]]
# [[11月第二篇文章]]
# [[11月第三篇文章]]

• 每篇文章都必須指定標籤，因為系列文章要透過標籤來自動分類
• 建立一篇彙總各月份連結的文章（命名為ByDateWritings），使用<<tiddler YYYY/MM>>就能將步驟1建立的各月清單內容引入此篇文章，例如：

!!!所有文章清單
<<tiddler 2007/10>> <<tiddler 2007/11>> <<tiddler 2007/12>> 

• 再幫每個分類（標籤）建立個別的文章（命名如jQuery的文章），例如以下引用jQuery標籤的所有文章；用<<tagging>>的唯一問題是引入的文章是以名稱排序，無法以建立時間排序：

<<tagging jquery>>

• 最後把上述所有連結加到主功能表（MainMenu tiddler）裡，月份清單以滑動方式呈現，範例如下：

[[jQuery的文章]]
[[jEdit的文章]]
<<slider bydate_cookie ByDateWritings "各月文章清單” "每個月份文章的彙總清單">>

透過上列結構，只要把新文章篇名輸入到各月份裡，建立該文章，撰寫完畢後指定好標籤並儲存，則其他的彙總、分類顯示都自動完成，不用再花額外工夫再整理，簡單又輕鬆，請讀者們參考看看。

要看範例的話，請參考我的Wiki站，但因這個站是建置在家裡的NAS設備上，若遇無法連線狀況時請稍後再試連，不便之處敬請見諒。

##

以下是ccTiddly 1.2的設定調整，雖說是只有在TS-109上使用，但只要你使用的是Apache+MySQL+PHP的環境，應該都能適用。以下ccTiddly的安裝資料夾是/share/Qweb/wiki，為了方便操作我都是在Windows裡建立一個網路磁碟機來Map到/share/Qweb。

中文化

沒想到ccTiddly 1.2已經把相關語言檔都包含在內了，依下列幾個簡單步驟就能在瞬間切換成中文介面的網頁：

1. 將/share/Qweb/wiki/plugins/zh-Hant.js複製到剪貼簿
2. 建立一個新的Tiddler，把剪貼簿內容貼入，將此Tiddler命名為zh-HantTranslationPlugin
3. 此Tiddler的標籤必須為systemConfig
4. 按done儲存，到此已完成中文切換了
5. 簡體中文選用zh-Hans.js即可

產生RSS檔案

右 側邊欄位有個upload RSS可以產生RSS檔案，除了在/share/Qweb/wiki/config/default.php裡要設定權限外，必須用chmod a+w /share/Qweb/wiki打開寫檔權限，然後RSS檔案default.xml就能產生了。

壓縮TiddlyWiki.js的檔案大小

原本的TiddlyWiki是在本地端執行，因此JavaScript檔案的大小不很重要，但要放在Server上時，檔案大小就會影響到傳輸速度。因此比照jQuery的壓縮說明而找了Packer和YUI Compressor來試。

• Packer：有標準壓縮，和Base62編碼、變數壓縮兩個選項。可惜不管如何組合，產生後的檔案皆造成Wiki網頁一片空白。
• YUI Compressor：壓縮後的檔案大小是174,480 Bytes，相對於原本的261,066，壓縮比是0.668，算是不無小補吧。YUI Compressor以Java撰寫，因此必須安裝Java環境，再以下列指令壓縮：

  java -jar yuicompressor-2.2.5.jar -o new.js TiddlyWiki.js
  copy new.js TiddlyWiki.js /y

經過了幾個月的使用與實驗，終於放棄將TiddlyWiki當做記事工具，而繼續使用同為Wiki介面的WikidPad（請注意Wiki後面有個 d，有不少人都漏掉了），原因如下：

• TiddlyWiki的搜尋實在是太慢了，有時會讓CPU衝到幾近100%
• TiddlyWiki的介面確實令人驚豔，但當Tiddler一多，經常造成識別困難，常常要去關閉，有時令人厭煩
• 檔案隨著內容增多日形肥大，也影響載入時間

雖然不使用TiddlyWiki來記事備忘，卻也發現使用它來撰寫Blog文章是很好的書寫方法，經由簡單的Wiki Word而大幅簡化了HTML網頁(Blog文章)的製作流程。

雖然每個BSP都有文章的撰寫介面，但有時在撰寫過程裡會不慎消失（連網逾時或不小心按到F5、Alt+F4或Esc等；附帶一提，最近Xuite已提供文章預存功能了），因此我以往都是先用網頁製作軟體先寫好，再上傳。我是使用Nvu，除了能用所視即所得方式很快地製作出網頁，存在硬碟裡的檔案也當做文章備份。

但 寫文章時經常在做重覆性的動作：做超連結、貼圖、做表格，這些重覆性動作透過Wiki系統的Wiki Word能節省不少時間、精力，節省了這些時間就多了構思與組織內容的時間，Wiki的超連結特性，也很方便相同性質文章的互相連結與參考，例如我在某個 Tiddler裡做了新文章的彙總：

從分章彙總頁能連結到此分類的相關文章連結：

再連結到特定文章：

文章寫好後將內容複製到剪貼簿（在上圖的瀏覽狀態下將文章內容選取好再按Ctrl+C），再按Ctrl+V貼入Blog裡就完成文章的發佈了。

為了讓Blog裡的文章樣式能與TiddlyWiki的樣式相同，我們必須將TiddlyWiki使用的樣式新增到Blog系統的自訂樣式裡，我新增的樣式如下：

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
.viewer table, table.twtable {border:2px solid #666;}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:#db4; border:1px solid #666; color:#fff;}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid #666;}
blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;border-left:3px solid #666666;}
pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
pre {border:1px solid #fe8; background:#ffc;}
code {font-size:1.2em; line-height:1.4em;}
code {color:#841;}
.viewer h1,h2,h3 { background-color: #f3f3f3; }
.highlight, .marked {background:#fe8;}
h1,h2,h3,h4,h5,h6 {color:#841; background:transparent;}
h1,h2,h3 {color:#884411;padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;border-bottom:1px solid #cccccc;background-color: #f3f3f3;}
h3 {border-bottom:2px solid #ccc;}

透過此種方式發佈的文章，其外觀將具備一致的樣式，透過修改自訂樣式，也能一次就變更所有文章的外觀。好處多多，讀者們不妨一試。

##

Wiki格 式眾多，要用到熟練確實是需要時間與經常性的練習，到底有沒有更好的方式能不必依賴記憶而建立文章的內容嗎？今天介紹一個名為WikiBar的 插件，安裝好後就能用選擇的方法來組成Wiki格式了。

下載WikiBar

• 下載點：AiddlyWiki或我的TiddlyWiki學習紀錄第9版
• 安裝：
  1. 把WikiBar Tiddler的內容複製到剪貼簿
  2. 在你自己的TiddlyWiki HTML裡新建文章，將剪貼簿內容貼上，命名為WikiBar， 標籤設定成systemConfig
  3. 儲存後重新整理網頁
  4. 可以由預設文章裡開啟PluginManager觀 察是否已正確啟用

設定編輯樣板EditTemplate

由預設文章開啟EditTemplate，在工具列(toolbar) 最後面加上wikibar如下；修改後儲存：

<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler wikibar'></div>

使用WikiBar

進入編輯狀態後，先把要套用的文字選取好，按右上角【工具列→wikibar】即顯示WikiBar的 各個樣式，點選一下會出現能使用的選項，方便使用者選擇使用。

TiddlyWiki範例

以下範例檔案存放在我的Google Pages裡，歡迎檢視、參考，為了呈現每次版本的變動，因而保存了每個版本的原貌。TiddlyWiki放在網路上的缺點就是檔案下載時間較久，下載時 請耐心等待(約300K)。

1. 第1版 GettingStarted+TW 的安裝與設定
2. 第2版 TiddlyWiki基本格式
3. 第3版 TiddlyWiki文件格式
4. 第4版 TiddlyWiki表格的使用
5. 第5版 顯示/隱藏右側邊的插件
6. 第6版 增加能使用Trac語法的插件
7. 第7版 變更MainMenu的樣式
8. 第8版 增加第二組編輯區工具列
9. 第9版 「所見即所得」式的編輯插件

當進入TiddlyWiki的編輯狀態時，右上角會出現【完成、取消、刪除】被稱為工具列(Toolbar)的區域，當在輸入區 膳打完畢時用來儲存、放棄輸入等處理。如果輸入的內容較多時，還要向上捲動找到完成來儲存有時會覺得頗為繁瑣，除了可以按Ctrl+Enter來 快速存檔外，我們也可以修改編輯狀態的Layout，把右上角的工具列同時顯示在輸入區的右下角。要完成這這樣的設定很簡單：修改「編輯樣板」EditTemplate Tiddler即可。

EditTemplate以數個<div>...</div>(division， 區域)的形式組合，對應編輯各元件，很容易的知道工具列的區域是<div class='toolbar'...></div>這 組，將它複製並貼到最後一行

<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<!--}}}-->

的前面，儲存後再進入編輯狀態，嘿嘿，右下角真的出現另一組的工具列了。

TiddlyWiki範例

以下範例檔案存放在我的Google Pages裡，歡迎檢視、參考，為了呈現每次版本的變動，因而保存了每個版本的原貌。TiddlyWiki放在網路上的缺點就是檔案下載時間較久，下載時 請耐心等待(約300K)。

1. 第1版 GettingStarted+TW 的安裝與設定
2. 第2版 TiddlyWiki基本格式
3. 第3版 TiddlyWiki文件格式
4. 第4版 TiddlyWiki表格的使用
5. 第5版 顯示/隱藏右側邊的插件
6. 第6版 增加能使用Trac語法的插件
7. 第7版 變更MainMenu的樣式
8. 第8版 增加第二組編輯區工具列

在《我的TiddlyWiki學習紀錄》裡新增了幾篇文章 (Tiddler)後，您可以發現左側主功能表MainMenu因 幾個篇名過長而折成兩列，看來不甚美觀。在本篇裡透過修改StyleSheetLayout來 改變主功能表的樣式；其實TiddlyWiki網 頁裡的樣式設定都是存放在StyleSheetLayout和StyleSheetColors裡， 前者存放外觀樣式，後者存放顏色樣式，只要變動這兩個系統預設的Tiddler就把頁面樣式調整成自己喜愛的樣貌。

打開右側邊欄位的下方【更多→預設文章→StyleSheetLayout】， 進入編輯狀態，搜尋#mainMenu， 找到最後一個有width:10em的這個，我們可將寬度由10em改成14em，再 把font-size:1.1em改成1.0em。儲存後就可以發現主功能的篇名都能在同一列裡呈現 了。

TiddlyWiki範例

以下範例檔案存放在我的Google Pages裡，歡迎檢視、參考，為了呈現每次版本的變動，因而保存了每個版本的原貌。TiddlyWiki放在網路上的缺點就是檔案下載時間較久，下載時 請耐心等待(約300K)。

1. 第1版 GettingStarted+TW 的安裝與設定
2. 第2版 TiddlyWiki基本格式
3. 第3版 TiddlyWiki文件格式
4. 第4版 TiddlyWiki表格的使用
5. 第5版 顯示/隱藏右側邊的插件
6. 第6版 變更MainMenu的樣式

目前在使用Wiki系 統令人困擾的問題是：每個Wiki使用的Wiki Formatting並未標準化，例如有的用兩個單引號表示粗體格式，有的用三個單引號(Trac)， 有的用一個星號(WikidPad)， 當需要同時使用兩套Wiki系統時，在文字交換或變換系統操作時經常會發生混淆與錯誤的狀況。那為何不專門只用一套Wiki就好？可惜每個系統皆有各自專 精的適用場合，例如專案團隊運作使用Trac，而TiddlyWiki適用做個人知識整理，因而導致無法偏廢一方。幸好Martin Budden為TiddlyWiki寫了許多Wiki格式轉換的插件，有MediaWiki、JSPWiki等8種，其中包含了Trac。

安裝TracFormatterPlugin

安裝這個名為TracFormatterPlugin插件的步驟很簡單：

1. 由Martin's wiki或我第6版找到TracFormatterPlugin Tiddler，進入編輯狀態後將所有內容複製到剪貼簿。
2. 在你自己的TiddlyWiki HTML裡，新增一篇文章，將步驟1的複製內容貼入，文章命名為TracFormatterPlugin， 標籤選為 systemConfig。
3. 按「完成」將新文章儲存起 來。

使用TracFormatterPlugin

在TiddlyWiki裡要建立Trac格式的文章時，只要把該篇文章的標籤設定成TracFormat即 可。

TiddlyWiki範例

以下範例檔案存放在我的Google Pages裡，歡迎檢視、參考，為了呈現每次版本的變動，因而保存了每個版本的原貌。TiddlyWiki放在網路上的缺點就是檔案下載時間較久，下載時 請耐心等待(約300K)。

1. 第1版 GettingStarted+TW 的安裝與設定
2. 第2版 TiddlyWiki基本格式
3. 第3版 TiddlyWiki文件格式
4. 第4版 TiddlyWiki表格的使用
5. 第5版 顯示/隱藏右側邊的插件
6. 第6版 增加能使用Trac語法的插件

當滑鼠游標移入TiddlyWiki某 篇文章(稱做Tiddler)內時，該篇文章右上角的編輯選項就被Highlight起來，讓使用者能依需求去點選，例如能按「關閉」把該篇關掉，或按「關閉其他」把除了該篇外的其他文章全部關掉；若點選了編輯則進入編輯 狀態，能對該篇文章做增刪與修改。在Tiddler裡的空白區域雙擊(Double click)則 立即進入編輯狀態，這個雙擊確實是很方便的設計。

在編輯區域裡就和一般Blog的編輯類似，輸入完畢後記得按「完成」， 內容才會存入磁碟。編輯區裡還有幾個特殊功能：

1. 每按一次完成，右側的最新變更就會多記錄一筆，如果只是小修改不想留下變更歷程的話，可以用Shift+點擊「完成」
2. 直接用Ctrl+Shft+Enter和Shift+「完成」是相同的功能
3. 如果按Ctrl+Enter則等同於點按「完成」
4. 要取消輸入的話，按Esc按鍵即可。這個按鍵對於中文輸入取消選字 的Esc鍵恰好一樣，不小心時辛苦輸入的內容在一瞬間就消失了！要取消這個功能很簡單：用記事本等文書編輯程式打開你的TiddlyWiki HTML檔，搜尋case 27，找到後把該列到break間的每列開頭加上 //，使之變成註解。注意：case 27共有兩組。

##

文件格式

在TiddlyWiki裡的文件格式、超連結等變化。本表格主要由Martin's wiki複製而來。

格式	Wiki裡使用的樣式	範例
標題	!!標題 2 !!!標題 3 !!!!標題 4 !!!!!標題 5 因為Tiddler的標題通常是標題１，因此建議避免使用標題１。	標題 2 標題 3 標題 4 標題 5
項目列表	*項目列表	項目列表
	#編號列表	編號列表
	定義列表 ;術語 :定義	術語 定義
	項目列表可以是組合式或巢狀式的 *項目符號 *#編號 *#;項目 *#:定義	項目符號 編號 項目 定義
區塊引述	>區塊引述 >>巢狀引述	區塊引述 巢狀 引述
	<<< 多列 區塊引述 <<<	多列 區塊引述
水平線	---- (4個減號)
連結	任何的 WikiWord 建立到一個tiddler的連結 (無論此tiddler是否存在皆可)。 WikiWord必須以大寫字母開頭，後續為大寫或小寫的組合。	WikiWord
	手動連結 [[Table of Contents]] (當tiddlers標題含空白時適用)	Table of Contents
	[[優美的連結|Link]]	優美的連結
	自動形成的外部連結 http://www.tiddlywiki.com	http://www.tiddlywiki.com
	優美的外部連結 [[我的烘培雞|http://www.tiddlywiki.com]]	我 的烘培雞
	作業系統的資料夾連結 Windows分享資料夾: file://///server/share Windows 本地資料夾: file:///c:/folder/file Un*x 本地檔案: file://folder/file 相對路徑檔案: [[folder/file]]	file://///server/share file:///c:/folder/file file://folder/file folder/file
圖片	[img[favicon.ico]] 對TiddlyWiki檔案而言，圖檔皆是外部資源
	靠右 [>img[favicon.ico]]
	靠左 [<img[favicon.ico]]
圖片連結	[img[fav.ico][TiddlerName]]
	[img[fav.ico][Alias|TiddlerName]]
	[img[fav.ico][http://www.aa.com]]
	參考本表格中的 連結 和 圖片 項目的說明
內部 註解	右邊文字不會顯示: /% 隱藏了的註解 %/ 在標記之間的文字不會顯示出來	右邊文字不會顯示:

TiddlyWiki範例

以下範例檔案存放在我的Google Pages裡，歡迎檢視、參考，為了呈現每次版本的變動，因而保存了每個版本的原貌。TiddlyWiki放在網路上的缺點就是檔案下載時間較久，下載時請耐心等待。

1. 第1版 GettingStarted+TW 的安裝與設定
2. 第2版 TiddlyWiki基本格式
3. 第3版 TiddlyWiki文件格式