Blogger Editor更新 / Update Blogger Editor

8月 18, 2023 Blog , Blogger Editor , PWA 2 Comments Edit Copy Download

終於更新了許久以來都沒變動過的編輯器。

Blogger編輯器 / Blogger Editor

https://github.com/pulipulichen/Blogger-Editor

「布丁布丁吃什麼？」是放置在Blogger服務上的部落格。Blogger本身有提供編輯器，但我更偏好自己打造自己順手的編輯器，這就是Blogger Editor。

https://pulipulichen.github.io/Blogger-Editor/ 

Blogger Editor有什麼特點呢？現在想想，它可能有幾件我特別喜歡的功能：

1. 符合「布丁布丁吃什麼？」網頁樣式的畫面：這是來自於Windows Live Writer的想法。在Windows Live Writer無法使用的時候，也啟發了我開始開發Blogger Editor的契機。
2. 離線式的網頁寫作與圖片管理功能：Blogger Editor是以PWA的形式開發。看起來像是網頁，但它可以離線運作。有了Summernote的輔助，Blog的撰寫和圖片管理都可以在離線的狀態下，以Filesystem的形式保存起來。最後只要在發佈前把圖片上傳到Blogger，再替換掉文章本身的圖片即可。
3. 輔助寫作的功能：現在我在打字的時候會聽到打字機的聲音、右方可以看到文章設定的章節、左下角有字數與使用時間的統計。這些輔助功能都讓我比較願意在Blogger Editor好好打字。

除此之外，Blogger Editor也是我自己開發的工具，所以按鈕位置、功能，我都能隨心所欲地控制。現在叫我用Blogger的編輯器來寫東西，恐怕我會覺得非常適應不良了。

更新 / Update

那麼這段期間以來，Blogger Editor更新了什麼呢？

關鍵字萃取功能 / Keyword Extraction

之前先完成的是關鍵字的萃取。按下Recommend的時候，編輯器會將文章內容丟給API Layer來萃取關鍵字。

完成後可以看到Post Labels後面多了很多建議的關鍵字。

不過這個功能需要先申請Token，然後在Blogger內設定。

網址截圖 / Screenshot from URL

當文章出現一段網址時，滑鼠移上去會出現「Screenshot」選單。

按下去後，它會自動根據網址截取固定儲存的圖片。

此功能是用Google Apps Scripts搭配ScreenshotOne使用。一樣地，必須要先設定才能啟用這個功能。

Markdown匯入器 / Markdown Import

有時候出門在外沒辦法用Blogger Editor寫文章，但我們還是可以用其他工具，以Markdown語法記錄文章內容。回到電腦之後再用Makrdown匯入器來匯入文章內容。

搭配上面的網址截圖功能，就能夠很快地轉換成HTML格式的文章。

封面產生器 / Cover builder

https://pulipulichen.github.io/PWA-Blog-Cover-Builder/#/ 

之前我在「調整發文的排程」的時候有講過了，現在我的Blog封面圖是用我另外開發的封面產生器來製作。主要的圖片、標籤、文字，都可以動態調整。

後來我真的是太常用這些功能了，乾脆把它放到Blogger Editor的工具列吧。這樣要用的時候就順手多了。

圖片上傳與配對 / Image Replace

最後是將離線儲存的圖片取代成上傳到Blogger的圖片。步驟如下：

1. 完成文章內容。
2. 下載文章中的所有圖片。
3. 將圖片上傳到Blogger的原始編輯器。
4. 取得上傳後的HTML程式碼。
5. 將程式碼匯入到Image Replace。
6. 配對上傳的圖片跟文章中的離線原始圖片。
7. 將離線圖片取代成上傳的圖片。

步驟看起來好像很多，但搭配改良後的工具，其實做起來不會很花時間。之前最讓我覺得困擾的是第6步。以前Blogger在上傳圖片的時候會保留檔案名稱，但現在檔案變成變成亂碼，於是我只好改用手動配對的方式取代來配對，也就是第6步的內容。現在我加上圖片尺寸與比例作為配對的參考資訊，應該可以讓配對更容易一些。

最近的更新應該就是這樣囉。

文章最後要來問問大家的是：你都是怎麼寫文章的呢？

• 1. 我都用電腦上的文字編輯器(LibreOffice、Word)來寫文章。
• 2. 我都用網頁的筆記工具(Notion、Evernote)來寫文章。
• 3. 我都用特別的工具來寫文章，例如Gmail的草稿。
• 4. 我都在發佈目標的平臺(Facebook, Instagram)寫文章，不會另外撰寫草稿。

歡迎在下面留言喔！