您是否曾經感覺過頭部不夠大,無法容納需要記住的所有內容?
歡迎使用TiddlyWiki,這是一個用于捕獲,組織和共享復雜信息的獨特的非線性筆記本。
使用它來保存您的工作清單,計劃論文或小說,或組織您的婚禮。記錄跨越您大腦的每一個想法,或者建立一個靈活而響應迅速的網站。
- 網站官網:詳情
下載其他版本,只需對網頁進行一些修改,然后保存,即可保存至本地。

詳細介紹
- 原文來源:詳情
這篇文章將簡要介紹 TiddlyWiki 的特點,并且分享一些常用的參考鏈接、資源、插件和常見問題的解決方案,以方便有相近需求的小伙伴們。
TiddlyWiki ,按官方說法是一個「非線性個人 Web 筆記本」。相比其他筆記和 Wiki 系統,其最大的特點之一是程序本體和數據全部都在一個單 html 文件內,與此同時仍然有著非常強大的功能和插件系統。在我看來,管理以文字、代碼和數學公式為主的個人知識庫, TiddlyWiki 可謂是最好的選擇之一。
可以在我的知識庫站點「Dimpurr’s Knowledge Base #1」:http://note.dimpurr.com/?體驗一下 TiddlyWiki 的使用和效果。
注意,任意訪客都可以體驗到 TiddlyWiki 的全部功能,包括編輯和設置。不用擔心,你可以隨意折騰,因為你無法將更改保存到我的服務器上,只能下載到本地。

我想找到一個能方便快捷的打打筆記和維護個人知識庫 Wiki 的方式已經很久了。
筆記軟件,例如 EverNote 、 WizNote 、 OneNote 的確十分不錯,但是也會帶來客戶端是否跨平臺、啟動速度是否好看甚至默認文字排版是否美觀的問題;而且,常規的筆記軟件也達不到 Wiki 級別方便的 Tag 標簽系統。當然, Wiki 系統有經典的 MediaWiki 系統,還有許許多多的靜態 Wiki 系統、 Wiki 知識庫類客戶端。然而, MediaWiki 龐大、復雜和丑陋; Wiki?客戶端程序有好有壞,有設計簡陋也有強大美觀,但是最大的限制還是往往不跨平臺;一些可以用 Github Pages 部署的,基于 Markdown 的 Wiki 系統盡管幾乎能在功能上滿足我的需求,但是每一次撰寫新條目和部署的復雜度還是令人難以接受。
你可能已經看出了我口味相當的刁鉆和需求相當的詭異 …… 高中時因為沒有時間折騰,我搭建了一個 Ghost 博客來存放簡單的讀書筆記,然而隨著某次 VPS 上的 SQLite 被我搞跪了之后,天國的 WIKI#0 除了遺留下來數據庫里的幾篇文章之外,就這樣成為了歷史。高中畢業的暑假來臨,我決定動手尋找一款我需要的 Wiki 系統。于是,我找到了 TiddlyWiki 。
TiddlyWiki 的特點
- 程序和數據全部存儲在一個單文件 html 中
- 這讓 TiddlyWiki 既可以在你的本機運行,類似一個在瀏覽器中運行的綠色版單文件應用程序;又可以上傳到服務器上,和網絡上的所有人分享
- 同時部署極其簡單,只需要一個能存放 html 的服務器,上傳上去就可以使用,根本不需要 PHP、 Node.js、Python 或者其他什么語言環境,也沒有任何配置步驟
- 你可以隨時再把服務器上的 TiddlyWiki 保存進本地或者 U 盤,以便帶進任何沒有網絡的環境查閱
- 作為 Wiki 系統,有 Tag 標簽和條目關聯等必須的基本功能,和強大的編輯器
- 你能用 Tag 快速整理條目
- 你能用?
[[條目名]]
?這樣的語法快速鏈接到其他條目 - 你能用條目名作為 Tag 其他條目,達到設置子條目的效果
- 你甚至可以用?
<>
?這樣的過濾器生成一個包含特定 Tag ,但是刪除掉另一個特定 Tag 的條目列表! - TiddlyWiki 使用一種類似 Markdown 但是稍有差異的語法,不過很快可以習慣并且非常好用
- 方便的插件和主題系統
- 可以通過插件支持代碼高亮、 LaTex 數學公式、標準 Markdown 語法、文章嵌入 TODO 列表、條目加密鎖定 ……
- 可以安裝 Material Design 風格、博客風格的樣式主題 ……
- 外觀和操作設計別致,使用體驗好
- TiddlyWiki 是一個典型的單頁面 Web 應用,所以打開的時候全部內容都已經載入和緩存在了瀏覽器中,換而言之你不需要刷新頁面,操作和訪問體驗非??焖俸土鲿?/li>
- TiddlyWiki 在右側是搜索和多種方式的條目索引,而左邊是可以卡片式展開多個和關閉的條目,還可以為特定的條目順序和組合生成靜態鏈接,瀏覽和使用十分方便
如何開始
進入?http://tiddlywiki.com?官網,閱讀下面的 GettingStarted 條目。這里根據你的瀏覽器版本會切換的對應的教程,不過總的來說,你只需要點擊 Download Empty 按鈕就可以下載好一個全新的 TiddlyWiki 的 html 文件了?;蛘?,你可以按照官方說明通過 Node.js 從 npm 安裝。
你已經可以開始本地體驗和使用了。
注意,你可能需要去設置頁面手動安裝并啟用中文語言包。
當然,我覺得大部分人應該都有上傳到服務器上,以便發送地址和在線共享的需求。一般我們會需要把默認的 tiddlywiki.html 重命名成 index.html ,這樣訪問就很方便了。
不過如果你直接上傳 html 文件到服務器,你會發現,每次保存都會重新向本地下載一個編輯后的 html ,然后你需要不厭其煩的用 FTP 再進行上傳和替換 …… 其實,只需要簡單的配置 PHP 或者 Node.js 保存服務,就可以解決這個問題。
額外的:?http://tiddlyspot.com?提供了一個似乎是免費的在線托管 TiddlyWiki 的服務,還提供了專門用于 GTD 的一些模板;?TiddlyDesktop?是一個 TiddlyWiki 專用的瀏覽器,或者說桌面客戶端。
PHP 保存
PHP 保存非常容易配置。官方的教程在這里:《官方教程》?
- 在?《官方下載》?下載一份?
TiddlyHome_*.*.*.zip
- 找到里面?
_thlibstore.php
?這個文件,解壓并編輯里面的?$USERS = array( 'UserName1'=>'Password1', etc)
?為你想要的用戶名和密碼 - 上傳 store.php 到你的服務器,去 TiddlyWiki > 保存 >?TiddlySpot 保存模塊 ,設置 高級設置 >?服務器網址 為這個 store.php 文件的完整地址,然后在上面填寫用戶名和密碼
- 現在,點擊保存時,已經會直接保存在服務器上了
- 注意:
- 你可能需要把備份文件名設置成 index.html
- 每次保存都會自動創建一份備份,你可以定期手動清理
- 建議修改備份文件夾為 backup ,這樣會把備份保存在 backup/ 子目錄而非 . 根目錄下
因為 TiddlyWiki 并沒有用戶登陸界面,這個設置頁面就相當于登陸頁面。密碼是按瀏覽器保存的,所以如果你想在當前瀏覽器退出登錄,到設置頁面清除密碼設置就好。如果你換了一個瀏覽器打開 Wiki ,你將需要進入設置重新填寫一次密碼(相當于登陸),才能使用在線保存。
可能遇到的 store.php 錯誤
如果你在如上配置完成后,點擊保存后彈出正在保存 Wiki,此后就沒有反應、并且在瀏覽器開發者工具中的 Network 網絡面板看到 500 Internal Servel Error ,你可以嘗試打開 PHP 的錯誤日志查看報錯:
vim /usr/local/php/etc/php-fpm.conf
php_flag[display_errors] = On # 直接在網頁上顯示錯誤信息
#php_admin_value[error_log] = /usr/local/php/var/log/php_errors.log
#php_admin_flag[log_errors] = on
cat /usr/local/php/var/log/php-error.log # 或者直接在瀏覽器中查看報錯
如果遇到關于 split() 函數的問題:

那么可能是你運行的 php 版本已經廢棄這個函數,編輯?store.php
?文件并查找替換所有的?split
為?explode
?即可。
可能用到的資源
我收集的 TiddlyWiki 相關資源,都會第一時間整理到我的知識庫:?詳情
比較重要的包括:
- 第三方官網繁體中文翻譯:?詳情?(感謝 Bennyli 提醒)
- 編輯器標記語法參考:?詳情
- TiddlyWiki Community (官方整理的社區資源列表):?詳情
- tid.li Plugins (一個個人第三方插件源):?詳情
- CommunityPlugins?(更大的一個第三方插件索引):?詳情
關于插件
需要注意的是, TiddlyWiki 最新的版本 5 有重大的變化,導致針對老版本設計的插件全部失效無法安裝。你可能會在網上搜索到很多老版本的插件源,以及告訴你使用新建條件、粘貼插件代碼內容的方式安裝,都已經無法再使用了。所以,記得確認你找到的插件支持 TW5 。
目前,正確的插件安裝方式除了在設置頁面的官方插件源在線安裝,對于第三方插件源來說,一般是你拖動第三方插件源提供的鏈接、圖標或者按鈕(不一定有效),或者其設置頁面的插件名稱(一定有效),拖動到你的 Wiki 頁面上,完成導入安裝。
我這里安利下我用到的插件,更多的可以在官方插件、主題市場和上面的插件源里自己發掘。
- TiddlyWiki 官方插件程式庫
- Highlight.js: syntax highlighting?代碼高亮,程序員必備
- Markdown parser?添加標準 Markdown 支持,如果你希望和?md 格式的平臺互相導入和導出的話;大部分情況下,如果可以我建議使用原生 TiddlyWiki 語法,因為功能更加強大和對插件支持更好
- KaTeX: mathematical typography?數學公式輸入和排版
- MathJax?相比 KaTeX 更強大的 TeX 解析器
- 為了兼容新版主題,你可能需要?做點微小的工作?修改一行插件代碼
- TiddlyWiki Community Search
- tw5-checklist?我經常使用的,一個輕量級在文章中嵌入 checklist 的插件,適合做些學習計劃等
- Encrypt-Tiddler?對單個條目啟用輸入密碼查看
- tid.li Plugins
- ToDoNow?一個強大的簡直有點過頭的嵌入 Todolist 插件
- EditorCounter & Autosaver?為編輯器添加字數統計和一定字數更改后自動保存 (原生自帶了條目修改確認和刪除操作時自動保存功能,去設置里開啟即可)
- TiddlyMap?一個強大的令人發指的流程圖、思維導圖等繪制插件
至于主題也有不少,不過我對默認的主題很滿意 (你可能會發現 TiddlyWiki 的默認樣式巧合的和我的?Clearision?博客主題灰色風格的設計十分相似) ,外加懶得折騰,所以就沒有更換。
當然,盡管內容數據很難占據多少空間,安裝過多不必要的插件卻可能很快使 html 源文件尺寸增大,這點需要注意。

關于文本編輯

請務必花點時間閱讀編輯器標記語法參考?http://tiddlywiki.com/#WikiText?的內容,你會發現十分值得。這里強調幾點我覺得特別有用的內容。
插入圖片的正確姿勢是?[img[http://img1.cheny.org/dptool/img/170921112724_v2-0d6d1cde06a90b753193b510e5b9a5a4_r.jpg]]
?。文本中的 URL 會被自動識別為鏈接,如果你想要給一段自定義文本設置超鏈接,試試?[ext[個人成長/學習/考試/品格/自控/時間管理 - Dimpurr 的知乎收藏|https://www.zhihu.com/collection/104053246]]
(ext 大部分情況下可以省略)。
相比 Markdown 的用縮進排版, TiddlyWiki 的無序列表 * 和有序列表 # ,以及縮進子列表不用 Tab 而是用兩次列表符號比如 ** 或者 *# 剛開始可能顯得有點讓人迷惑。習慣就好。
用 TiddlyWiki 排版表格真的非常的爽!你可以自由的設置表頭,表尾,表名,每個單元格對齊方式,跨格,而且語法非常簡單方便,輸入流暢。請閱讀官方文檔?《官方文檔》?。
前面展示過自動生成條件列表,并且按 Tag 過濾的「魔法」。參考:《官方文檔》?,記得閱讀底部的 See also 詳細說明!
如果你愿意折騰,你可以嘗試學習 Macro 宏和 Variables 變量的用法。
TiddlyWiki 有時會把符合 PascalCase /?UpperCamelCase 的詞自動識別為條目鏈接。你只需要在前面加入一個波浪線 ~ 轉義,比如 ~TiddlyWiki ,就會恢復為純文本。
安裝了?Highlight.js 插件后,你可以這樣指定代碼塊使用的高亮語法:
```bash
? ~ pwd
/Users/dimpurr
```
在 Highlight.js 插件設置頁面你可以找到支持的語法列表。注意所有 shell 命令的標識符是 bash ,而不是 sh 或者其他的什么。
一些小問題
禁用搜索最小字數限制
TiddlyWiki 默認的搜索框存在字符數限制,要求搜索關鍵詞大于三個字符。對于英語環境來說這很合理,但是對于中文來說,二字詞的搜索是很常見的,因此很不方便。修改這個設置只需要:
- 添加一個標題為?
$:/config/Search/MinLength
?的新條目 - 內容為?
1
禁用自動 WikiLink
TiddlyWiki 默認自動會把符合 CamelCase 的文本替換為條目鏈接,稱為 WikiLinks?或者 WikiWords?。一般來說你可以用 ~WikiText 來轉義禁止鏈接,但是對于長篇文章這樣做實在辛苦。網上流傳的基本是直接禁用 WikiLink 功能的方法,但是這樣之前 ~ 反轉移過的文字又會顯示出 ~ 符號。
一個既能讓之前的 ~ 不顯示,同時也不會有自動鏈接的方法是:
- 點擊搜索框旁邊的圖標進入?AdvancedSearch
- 搜索?
$:/core/modules/parsers/wikiparser/rules/wikilink.js
?,或者點擊?$:/core
再找到這個條目,點擊進入編輯 - 系統會提示?
這是一個修改過的默認條目。刪除此條目可以還原為 $:/core 插件中的默認版本。
?因此不用擔心 - 找到最后面的?
return [{return [{ type: "link",
?,在這一行上面加上一行?return [{type: "text", text: linkText}];
?,以便在本要返回鏈接的時候返回純文本
使用樹狀結構組織條目內容
如果你對條目的組織結構有強迫癥,又不像我一樣覺得內容零散到只能手動編寫目錄,使用自帶的樹狀目錄系統是個好選擇。
<div class="tc-table-of-contents">
<<toc-selective-expandable 'Contents' sort[title]>>
</div>
通過以上代碼可以創建以 Contents 條目(該條目不會顯示出來)為根節點,按照標簽關系嵌套的樹狀目錄結構列表。
通過將這個條目命名為「目錄」,并加上?$:/tags/SideBar
?標簽,就可以使這個目錄顯示到側邊欄。效果如下:
