Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 571

Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章

$
0
0
hexo-admin-edit-post.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章接續上一篇「Hexo 架站流程﹍匯入 Blogger 文章」,將 Blogger 文章移轉到 Hexo 後,接下來需要了解如何撰寫文章。 上一篇也大致提到了如何建立 md 檔的格式,但未免不夠專業,因為一般部落格後台都會有文章編輯器,所以本篇會說明如何安裝本地後台界面,及如何編輯文章的操作。

一、安裝 Hexo Admin

首先介紹安裝最簡單的本地後台,也就是說不需要網路,在自己電腦就能編輯文章。可參考這篇教學「使用 hexo-admin 後台管理工具」的流程: 1. 安裝外掛在 Hexo 專案資料夾執行以下指令安裝 Hexo Admin 後台外掛: npm install hexo-admin --save2. 進入後台繼續執行以下指令,執行本地伺服器: hexo s然後在瀏覽器輸入以下網址即可進入後台畫面: http://localhost:4000/admin

二、編輯文章

hexo-admin-edit-post-1.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章首先說明如何新增一篇新的文章,進入後台畫面後,點擊左上角的「+ New Post」即可新增文章: 1. 自訂網址字串上一篇系列文有提過,Blogger 文章網址結構為 "年/月/xxx.html",我們也在 _config.yml設定了相關的參數。 如果我們的文章標題是中文字串,那麼網址也會變成 "年/月/中文字串.html",而 hexo-admin 是個比較陽春的外掛,沒有提供自訂網址字串的選項,那麼如果要將網址設定為英數字串的話,一開始請務必這麼做: hexo-admin-edit-post-2.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章點擊新增文章後,立刻可以設定文章標題,如上圖,請先輸入英數字串,此字串就會成為網址的一部分。 hexo-admin-edit-post-3.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章進入文章編輯界面後可看到,上圖紅框的 Preview 後面,就是我們設定好的英數字串網址結構,接著再將文章標題改為中文即可。 2. 設定選項hexo-admin-edit-post-4.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章編輯界面左半部可輸入 markdown 語法,跟我一樣習慣 Blogger 的 html 模式的話,直接使用 html 語法也可,右半部可看到預覽畫面。 點擊右上角「齒輪圖示」可出現設定畫面,可修改發布日期、作者、標籤、分類等等。 最後按「Publish」新增一篇文章。 3. 繼續閱讀從上圖還可看到,文章中插入繼續閱讀的話,需要加入以下語法: <!--more-->熟悉 Blogger 操作的話,這一點應該不用另外多解釋了。 4. 儲存另外補充一點,因為是本地操作,儲存速度會非常快,有任何編輯動作都會立即儲存。

三、佈署到 GitHub

1. 設定檔名結構在 Hexo Admin 新增、編輯文章,會將結果存放在資料夾 \source\_posts下的所有 md 檔,為了方便日後查看、管理 md 檔,檔名最好加上日期,以免文章標題出現重複,也可知道文章的新舊次序。 請編輯根目錄下的 _config.yml這個檔案,找到 new_post_name:這一行,改成以下格式: new_post_name: :year-:month-:day-:title.md這樣檔名會是 "年-月-日-文章標題"這樣的格式。 2. 發布網站在 Hexo 專案資料夾執行以下指令來發布網站: hexo clean //清除之前建立的靜態檔案,也可使用縮寫 hexo cl hexo ddeploy //部署到 GitHub,也可使用縮寫 hexo d

四、上傳圖片

編輯文章時有可能需要上傳圖片,然而 Hexo Admin 上傳圖片的操作有些問題,因為這個外掛年代久遠,看起來作者已經沒繼續維護,需要另外研究如何解決。 1. 設定選項hexo-admin-edit-post-5.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章後台進入上方「Settings」分頁後,可看到上圖設定畫面:
  • 建議勾選「Always ask for filename」,能自訂圖片檔名對 SEO 比較好
  • 可看到預設儲存的的圖片資料夾路徑(Image directory)為 /images,有特別需求的話請自行更改
  • 可看到預設圖片檔名前綴(Image filename prefix)為 pasted-,有勾選自訂檔名就不用理會
2. 上傳圖片上傳圖片的操作很簡單:
  • 可從檔案總管直接按 Ctrl+C複製圖片
  • 也可開啟圖片後,對圖片按右鍵進行複製
  • 然後編輯文章時按 Ctrl+V
比較推薦從檔案總管複製,因為這樣產生的圖片檔案比較小,直接複製圖片的話會產生 .png 檔案太大。 另外說明一下,直接複製 jpg 檔 Hexo Admin 還是會當作 png 檔儲存,但實際上這張圖還是 jpg 檔,所以沒影響,只是比較奇怪。 3. 錯誤情形實際操作一次,我在檔案總管複製了 "hexo-admin-edit-post-1.jpg"這張圖,進入 Hexo Admin 後台編輯文章時貼上,下圖會要求輸入檔名: hexo-admin-edit-post-6.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章請注意指需要輸入檔名就好,不要輸入副檔名 .jpg,否則程式會報做,無法上傳圖片。 hexo-admin-edit-post-7.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章然而檔名輸入完後,如上圖,這張圖顯示的路徑是錯誤的,因此無法正常顯示圖片。錯誤之處在於,正確路徑應該長這樣: /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-edit-post-8.jpg-架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章修改後再執行,圖片檔案路徑終於正確了,但有點奇怪,右邊預覽怎麼還是無法顯示圖片?不用擔心,因為上傳圖片需要一點時間,但 Hexo Admin 的程式會立即執行顯示該路徑的圖片,所以當下無法顯示圖片。若按一下 F5重整頁面就能看到圖片了。

五、補充

本篇雖然介紹了 Hexo Admin 這個本地後台外掛,但並不推薦使用,因為:
  • 功能太過陽春
  • 作者沒繼續維護,想要自訂功能會很麻煩
之後會另外再介紹功能比較強的雲端後台外掛,無論是界面美觀性、功能實用性都大大提昇,但是需要折騰的地方將比本篇難上許多倍,所以暫時可先使用本篇的後台外掛,能夠先進行一些基本操作,才不至於被 Hexo 嚇跑。
Hexo 架站系列文章:

Viewing all articles
Browse latest Browse all 571

Trending Articles