0%

羊羽手札更新歷程 01

將網站更新成 Hexo 框架。
最主要的原因是舊的 Blog 系統當初寫得太急促,而且往往為了嘗試新東西而直接邊學邊做,導致系統問題有點多。
在重複考慮之下,決定改成目前的模式。這篇文章接下來寫的,是「羊羽手札」建立到目前為止的雜事以及更新狀況。

更新歷程

  • 2016.10.24 羊羽手札v1(PHP)
  • 2017.12.18 羊羽手札v2(Vue.js+Express)
  • 2017.02.25 羊羽手札v3(Hexo)

雜記

到目前為止,羊羽手札的特徵是文章頁面中有 JS 演示的部分,先談談之前的做法。
最早的 PHP 頁面想要時做這個部份時,想到的做法是將 HTML 直接寫到資料庫,然後 CSS 採用行內樣式,比方說:

1
2
3
4
<div id="demo_01" style="...">
<canvas ...> ... </canvas>
<button ...> ... </button>
</div>

因為透過編輯器寫入,需要跳脫過濾一些 HTML(像是 script 標籤)以及 JS 語法。
所以 JS 是另外上傳單個檔案,採用外鏈式加載:

1
2
3
4
(function(){
const root = document.getElementById("demo_01");
...
})()

這個的主要問題在於,每次更新系統時,
需要檢查 JS 檔案是否還在(有時會改動檔案上傳的部分、或遷移主機商平台等等)
也因為這件事,我有遺失幾個文章內的 JS 演示腳本。

經過考慮後,第 3 版的羊羽手札,屆時將會改成 HTML、CSS、JS 遊樂場(JSbin、JSfiddle 或 Codepen)來嵌入演示。