2012年1月1日

更適合閱讀的 Dokuwiki Readability 樣板發佈

Dokuwiki 是一套輕巧的 Wiki Engine,不必使用資料庫,就可以在幾分鐘內架設好協作網站,用於個人筆記或組織的知識管理都很方便。

我習慣在看書、寫程式時,採用 Dokuwiki 快速將筆記整理好,累積久了就形成可以隨時可供檢索的知識庫。在日後要發佈成網誌文章、製作簡報,或者備忘查詢時,都可以很快速找到內容(利用 Dokuwiki 的站內搜尋或 Google 搜尋)。

但是,長久以來總覺得 Dokuwiki 缺少漂亮的樣板

幾個月來,我從幾套軟體重新感受到閱讀舒適度的體驗,包括:
  1. 在 iPad 及 Mac 平台上的 Reeder (RSS/Google Reader)閱讀器
  2. 用於提昇網頁閱讀舒適度的 Readability 服務
  3. 內建佈景主題很適合閱讀的 Octopress 部落格引擎
這些軟體(或服務)有共同的特色,就是不管在筆電或平板電腦,都能得到很不錯的閱讀效果。因此,逐漸有許多花在閱讀上的時間,開始轉移到這些軟體。

不過,我還是喜歡用 Dokuwiki 簡單的語法製作筆記。

所以,利用這個跨年週末的零碎時間,開始進行一項 Dokuwiki Readability Template 的小專案。

這個專案的目標是:
  1. 採用版面較精簡的 Starter Templates 為基礎
  2. 使用 Sass 重新定義類似 Readability 閱讀效果的 CSS
  3. GeSHi 原始碼的色彩(Syntax Highlight)套用 Solarized 色票
  4. 以 jQuery + jQuery UI 重新定義使用者介面的互動功能
原本使用 Starter Template 的原始畫面為:

這是 Readability Template 的顯示畫面:


目前在 iPad 平板電腦以直式(768x1024)閱讀的顯示效果:


目前這個樣板使用於: http://lyhdev.com/

Dokuwiki Readability Template 是一項開放原始碼的專案,目前仍是剛發芽的階段,歡迎有興趣的朋友一起 GitHub。



5 則留言:

  1. template很棒,非常感谢分享,但是似乎这个模板不能显示斜体?以dokuwiki syntax定义了还是显示为正体,很奇怪?

    回覆刪除
  2. 哈囉你好 我在 tpl 底下 git clone 您的 template,
    但是在設定選項選了dokuwiki-readability套用之後,
    變成這樣:
    https://www.dropbox.com/s/59xf0517g17uy7d/Screenshot-start%20-%20Debian%20DokuWiki%20-%20Google%20Chrome.png
    不知道有沒有簡易的安裝簡介 ^^"
    謝囉

    回覆刪除
  3. Hi 你好 我是剛剛留言的 Jay,
    已經可以了, 不要用 apt-get 安裝就好...

    感謝你喔 非常有質感又好看 ^_^

    回覆刪除
  4. 感謝你的支持!
    目前這個佈景已經暫停更新,功能有些不完整。
    我們新的計畫是將 twitter-bootstrap readable http://bootswatch.com/readable/
    這個支援手機平板最佳化瀏覽的版面移植到 Dokuwiki
    有興趣歡迎一起研究~~~

    回覆刪除
  5. to Jay:

    今天發佈了新的 dokuwiki-readable 佈景,原始碼在:

    https://github.com/lyhcode/dokuwiki-readable

    範例請參考:

    http://lyhdev.com/

    這個版本使用 bootstrap 針對手機平板實作的 Responsive Design
    基礎的 CSS 也比較完整

    雖然還在非常 initial 的階段,但還是邀請您來試用看看

    歡迎一起開發或回饋問題給我們,謝謝

    回覆刪除

lyhcode by lyhcode
歡迎轉載,請務必註明出處!