自製文章編輯器

從以前就一直很想要有一個自己的貼文空間 但部落格或者各種投稿網站總感覺不是那麼自由 啊既然現在都有自己的網站，終於可以自由地寫文了吧！

並沒有。

一個完整的文章區塊是由文字跟排版所組成的 單純的 input / textarea 沒辦法盡善盡美 想要弄出讓自己覺得舒適的版面 不只要認真寫 CSS，還要努力排 Html 這其實是很累人的事情 畢竟我只是想要換一個段落，就必須重寫一次 <p>內文</p> 而且一堆東西塞在 Html 裡面，維護起來也很累

所以我最後決定把文章改成 JSON 格式，用程式自動生成段落 這樣也方便我將來把文章區改造成能夠雲端維護的架構 然後就產生了下面這樣的文件格式以及模板：

好的，現在 Html 乾淨了，我只要引入模板 + JSON 就能渲染出文章頁面 甚至還能自動產生圖片的幻燈片 (如上) 目前網站裡面的價目、案例分類裡面所有的頁面都是透過這個方法製作的 這真的是模組化的大勝利！

但是，我寫文又更累了，我每次寫一個段落就要大括號 / "type" / "content" 然後混合了換行符號之後可讀性與維護性來到了歷史性的新低 感覺離我「自由寫文」的目標又更遙遠了一步。

所以我決定自己寫一個編輯器。

原本是只有開發環境才會開放的頁面，但有時候上班也想寫文 (就像現在) 反正實際上也沒有任何管理功能，只是產生一個靜態檔案，索性就直接放出來了

這是一個參考 Markdown 語法，但主要還是為我自己程式服務的文字分析/轉譯程式 首先藉由換行符號來切分段落，然後透過字串的 startsWith() 的方法判斷 type 如果是圖片組或者連結組，就再判斷逗號來切分內容物 然後每次輸入新的文字就會重新分析一次內文產生新的 JSON

聽起來很浪費效能對吧？

所以我在轉譯程式外面包上了一個 debounce 函式 讓連續觸發的程式要經過一段冷卻時間後才會正式執行

經過一番資料處理的調整過後，編輯器終於大功告成 完成編輯器的愉悅心情也促使我馬上寫了第一篇文章：

但是，又是這個但是，我在用筆電寫作過程中至少觸發兩次上一頁的手勢 讓我整整寫了三次才終於完成那篇文章，想來都感覺沮喪。

為了防止各種意外發生 我決定在每次執行轉譯的同時將原始文檔存入瀏覽器的 localstorage 直到正式儲存成文件以後才將暫存資料刪除 並在每次進入這個頁面的時候判斷是否有暫存資料，顯示還原暫存的按鈕

不過目前只是為了防止不小心當機、跳頁造成的文章遺失 如果在有暫存資料的情況下寫了新的內容，暫存就會消失 至於這一塊要如何調整改進，或許等我下一次發生悲劇就有方向了。

雖然感覺萬事俱備了，但目前我要更新文章都必須整個網站一起更新。 這會讓我有點「殺雞焉用牛刀」的感覺，所以我文章上面的錯字到寫這篇文章時都還沒改（

我畢竟是蹭免費服務一條龍的，重新建置太多次總有撞到限制的一天， 但老實地用 firestore 之類的服務託管靜態資料也有流量炸掉的風險， 雖然使用者付費天經地義...(ry

總之 github 有 API 以及 CDN 可以蹭 所以我又開了另一個儲存庫專門用來放文章原檔

我只要加入新文章後維護 menu.json 這個檔案， 並用 API 讀取這支檔案，就可以動態產生文章列表，不用更新整個網站 儲存庫裡面甚至可以看到我打算用程式自動產生 menu 檔案的痕跡 XD

不過這個文檔庫還沒正式上線使用。 所以我為了發這篇文章還是更新了整個網站。

雖然教程式的文章都會說不要重新造輪子， 也就是別人寫過的工具就不要自己再寫一遍， 但正如我所追求的目標那樣， 我就是在享受這種自由自在以及挑戰的感覺。