接續上一篇「Hexo 架站流程﹍匯入 Blogger 文章」,將 Blogger 文章移轉到 Hexo 後,接下來需要了解如何撰寫文章。
上一篇也大致提到了如何建立 md 檔的格式,但未免不夠專業,因為一般部落格後台都會有文章編輯器,所以本篇會說明如何安裝本地後台界面,及如何編輯文章的操作。
_config.yml 設定了相關的參數。
如果我們的文章標題是中文字串,那麼網址也會變成 "年/月/中文字串.html",而 hexo-admin 是個比較陽春的外掛,沒有提供自訂網址字串的選項,那麼如果要將網址設定為英數字串的話,一開始請務必這麼做:點擊新增文章後,立刻可以設定文章標題,如上圖,請先輸入英數字串,此字串就會成為網址的一部分。
進入文章編輯界面後可看到,上圖紅框的 Preview 後面,就是我們設定好的英數字串網址結構,接著再將文章標題改為中文即可。
2. 設定選項編輯界面左半部可輸入 markdown 語法,跟我一樣習慣 Blogger 的 html 模式的話,直接使用 html 語法也可,右半部可看到預覽畫面。
點擊右上角「齒輪圖示」可出現設定畫面,可修改發布日期、作者、標籤、分類等等。
最後按「Publish」新增一篇文章。
3. 繼續閱讀從上圖還可看到,文章中插入繼續閱讀的話,需要加入以下語法:
\source\_posts 下的所有 md 檔,為了方便日後查看、管理 md 檔,檔名最好加上日期,以免文章標題出現重複,也可知道文章的新舊次序。
請編輯根目錄下的 _config.yml 這個檔案,找到 new_post_name: 這一行,改成以下格式:
F5 重整頁面就能看到圖片了。
一、安裝 Hexo Admin
首先介紹安裝最簡單的本地後台,也就是說不需要網路,在自己電腦就能編輯文章。可參考這篇教學「使用 hexo-admin 後台管理工具」的流程: 1. 安裝外掛在 Hexo 專案資料夾執行以下指令安裝 Hexo Admin 後台外掛:npm install hexo-admin --save
2. 進入後台繼續執行以下指令,執行本地伺服器:
hexo s
然後在瀏覽器輸入以下網址即可進入後台畫面:
http://localhost:4000/admin
二、編輯文章
首先說明如何新增一篇新的文章,進入後台畫面後,點擊左上角的「+ New Post」即可新增文章: 1. 自訂網址字串上一篇系列文有提過,Blogger 文章網址結構為 "年/月/xxx.html",我們也在<!--more-->
熟悉 Blogger 操作的話,這一點應該不用另外多解釋了。
4. 儲存另外補充一點,因為是本地操作,儲存速度會非常快,有任何編輯動作都會立即儲存。
三、佈署到 GitHub
1. 設定檔名結構在 Hexo Admin 新增、編輯文章,會將結果存放在資料夾new_post_name: :year-:month-:day-:title.md
這樣檔名會是 "年-月-日-文章標題" 這樣的格式。
2. 發布網站在 Hexo 專案資料夾執行以下指令來發布網站:
hexo clean //清除之前建立的靜態檔案,也可使用縮寫 hexo cl
hexo ddeploy //部署到 GitHub,也可使用縮寫 hexo d
四、上傳圖片
編輯文章時有可能需要上傳圖片,然而 Hexo Admin 上傳圖片的操作有些問題,因為這個外掛年代久遠,看起來作者已經沒繼續維護,需要另外研究如何解決。 1. 設定選項後台進入上方「Settings」分頁後,可看到上圖設定畫面:- 建議勾選「Always ask for filename」,能自訂圖片檔名對 SEO 比較好
- 可看到預設儲存的的圖片資料夾路徑(Image directory)為
/images ,有特別需求的話請自行更改 - 可看到預設圖片檔名前綴(Image filename prefix)為
pasted- ,有勾選自訂檔名就不用理會
- 可從檔案總管直接按
Ctrl+C 複製圖片 - 也可開啟圖片後,對圖片按右鍵進行複製
- 然後編輯文章時按
Ctrl+V
/images/hexo-admin-edit-post-1.png
這個錯誤上網查了很久,大致有了解原因,應該是 Hexo 已經升級版本很多次,而 Hexo Admin 因為沒有跟著維護,原本的程式碼早已不相容了。
4. 解決方法網路上多數解法都沒什麼用,比較可靠的解法只有一個,請參考這篇「hexo-admin 插入圖片失敗問題解決」,必須修改外掛檔案。
請找到以下路徑這個檔案:
hexo 專案資料夾\node_modules\hexo-admin\api.js
用編輯軟體搜尋兩處,首先找到:
filename = path.join(imagePath, filename)
改成以下:
filename = imagePath + "/" + filename
然後找到:
res.done({
src: path.join(hexo.config.root + filename),
msg: msg
})
改成以下:
res.done({
src: filename,
msg: msg
})
5. 修改效果修改後再執行,圖片檔案路徑終於正確了,但有點奇怪,右邊預覽怎麼還是無法顯示圖片?不用擔心,因為上傳圖片需要一點時間,但 Hexo Admin 的程式會立即執行顯示該路徑的圖片,所以當下無法顯示圖片。若按一下 五、補充
本篇雖然介紹了 Hexo Admin 這個本地後台外掛,但並不推薦使用,因為:- 功能太過陽春
- 作者沒繼續維護,想要自訂功能會很麻煩
Hexo 架站系列文章: