最近我在開發新的 webStick v4 firmware。WebStick v4 本質上跟 v3 在硬體上沒甚麼差別，最大的差別大概就是在 firmware 上加入了一個比較正規的 Post 及 Page 管理系統。
WebStick v3 與 Blog Post
在 WebStick v3 的設計下，Blog 系統是一個非常簡單的頁面，甚至沒有它自己的編輯器，當要編輯部落格文章時，那個「編輯」按鈕只會打開內置的 Markdown Editor 讓使用者自己編輯然後儲存到檔案而已。
這樣的做法好處大概就是開發時間很短而且不用佔用額外的儲存空間，但是問題是使用者體驗實在太差了。所以在 v4 的時候我就來把這個 blog 系統改良了一下。
WebStick v4
WebStick v4 沿用了不少 v3 的部分，但是在對外 UI 大改的情況下，給人的感覺確實有點不同。我們先從 homepage 開始看起
WebStick v4 Homepage
homepage 的部分改用了 Tocas UI 風格設計，而且所有 icon 與 title 都是動態載入。這個在 PostEngine Pro 的部分會講到，但是大概就是現在如果要更改 homepage 上的聯系資料的話，使用者不再需要編輯 html，而是改一下設定檔就可以了。
WebStick 的關於頁面也有改良。這個頁面大概算是一個 static html template 的範例吧？使用者可以自行更改並加入其他內容，而在出廠時這個頁面就是用來介紹 WebStick 本身的技術資料。
當然，v4 也有 v3 的部落格系統。新版本的部落格系統支援放置 Video / Audio element 以外，也提供直接從 /site/img/ 載入截圖。這個也是 WebStick PostEngine Pro 帶來的新功能：支援直接 Ctrl + V 貼上截圖並置入到文章中。
最後就是 QR Code generator。一個滿好用的小東西 （特別是需要從 電腦分享資料到手機的時候）
WebStick v4 管理員介面
WebStick v4 的登入介面也使用 Tocas UI 重寫，加入了 Minimalist 的設計。
而 WebStick v4 的 admin panel 變代實際上並沒有很多，最多的變化大概就是加入了非同步載入：在你打開頁面的時候 iframe 內容才會動態載入。這樣對於 ESP8266 的 async TCP server 來說負擔比較低，體感上載入速度提升了不少。
WebStick PostEngine Pro
v4 最多的功能變動大概就是把 blog engine 砍掉換成了 PostEngine Pro。這個 PostEngine 具有很多帖文和頁面的建立、編輯和刪除功能。
由於 PostEngine Pro 加入了 Ctrl + V 時自動在前端壓縮、上傳和插入照片 URL 到帖文的關系，所以在 v4 的 PostEngine 也加入了 Library 功能以管理在寫文章時上傳的照片。
另一個我很喜歡 PostEngine Pro 的原因是，它現在可以直接選擇 WebStick 上的檔案進行嵌入。只要選一下功能表單上的資料夾按鈕，一個 File selector 便會彈出來。
這個選擇器除了照片以外，連音訊跟影片檔案也可以選擇，不過只限於 web safe 的格式就是了。
當然，這個功能也不只是能在編輯器內使用。如果你想在編輯器外上傳照片到 WebStick 上，也可以透過 PostEngine Pro 的 Image Paste 來貼上截圖。
這樣若你有想要保存的載圖時，只要 Win + Shift + S ，載圖範圍拉一拉之後 Ctrl + V 到 WebStick 上便能夠保存在 WebStick 內了。
另外，PostEngine 也支援了基於 WYSIWYG （What you see is what you get） 編輯器 ，可以直接輸出 HTML 檔案。
這個編輯器會直接把設計好的 html 輸出到 /site/pages/ 內，在按 Ctrl + S （或是選單內的 Save 按鈕）時，系統便會自動產生 .html 檔案並上傳到 WebStick 上。
跟 Post 一樣，你也可以把它刪除或編輯。預設 Page 並不會公開的 homepage 上，若你要把新設計的頁面分享出去的話，你要點一下 Page Name 的連接，這樣你便可以去到網頁的路徑了。
當然，你也可以透過 Notepad 工具手動編輯 html 並放到 /site/pages 上就是了。
這樣的一個個人 網站一般最少都需要一片 Raspberry Pi 之類的 Linux 開發板部署，是不是沒想到一片 6 HKD 的 ESP8266 也能做到同樣的事情很神奇吧？