部落格建站9 - hexo網站如何提升markdown文件的編輯效率和體驗

• 1. 本網站的系統架構
• 2. 場景概述
• 3. 影響效率的問題和解決方案
  • 3.1. 圖片插入-根據文章來分類管理
    • 3.1.1. 效率問題
    • 3.1.2. 解決方案
  • 3.2. 圖片插入-從剪貼簿中插入圖片
    • 3.2.1. 效率問題
    • 3.2.2. 解決方案
  • 3.3. 圖片插入-在VSCode中預覽圖片
    • 3.3.1. 效率問題
    • 3.3.2. 解決方案
  • 3.4. 提交程式碼時自動部署
    • 3.4.1. 效率問題
    • 3.4.2. 解決辦法

1. 本網站的系統架構

• 網站示例： SunLogging
• 伺服器: 阿里雲ECS
• 伺服器系統： Ubuntu 24.04 LTS
• 部落格框架： Hexo
• 網站主題： Volantis

2. 場景概述

透過hexo搭建的部落格網站，一般會用markdown來編寫部落格文章。我的使用場景是：

1. 部落格的素材（如圖片、影片）和文件（markdown編輯的文章內容）備份在gitee程式碼託管平臺，透過git來更新和管理。
2. 部落格的靜態資源和HTML頁面是部署在自己的阿里雲ECS伺服器上，透過nginx來提供靜態資源的訪問。
3. 平時透過VSCode來寫文章，用markdown來保持。文章編寫完成後透過 hexo g -d 來生成HTML頁面，並部署到伺服器上。

在解決下面的問題之前，可以閱讀《VSCode系列1-VSCode搭建Markdown編輯環境》一文，瞭解VSCode編輯Markdown的基本用法。

3. 影響效率的問題和解決方案

3.1. 圖片插入-根據文章來分類管理

hexo 預設的圖片插入方式是：在 source 目錄下新建一個靜態資原始檔夾（如 source/images），在此目錄下儲存圖片，然後在文章中引用圖片時，使用相對路徑（如 ![](/images/xxx.jpg)）。

3.1.1. 效率問題

當文章比較多時，source/images 下會存放大量的圖片，圖片的管理、查詢都會非常麻煩。

3.1.2. 解決方案

hexo 支援“文章資原始檔夾”，可以開啟這個功能，將 config.yml 檔案中的 post_asset_folder 選項設為 true 來開啟。

_config.yml
post_asset_folder: true

這樣，每次透過 hexo new [layout] <title> 命令建立新文章時，會在與文章同級的目錄下自動建立一個與文章同名的資料夾。將所有與你的文章有關的資源放在這個關聯資料夾中之後，你可以透過相對路徑來引用它們。如：

文章目錄：

source/_posts/hello-world.md
source/_posts/hello-world/image1.jpg
source/_posts/hello-world/image2.jpg

圖片引用：

[圖片](image1.jpg)

3.2. 圖片插入-從剪貼簿中插入圖片

3.2.1. 效率問題

上面我們解決了“圖片根據文章分類管理”的問題，但仍然需要手動儲存圖片和引用圖片。我們寫文章的時候如果能夠 截圖、貼上 的方式完成圖片的插入的話，將會極大的提高我們的效率。

3.2.2. 解決方案

1. VSCode 安裝 Paste Image 外掛。

2. 自定義儲存路徑，在 settings.json 檔案中新增以下配置：

// 設定圖片儲存路徑：與檔案同級的目錄建立一個與檔案同名的資料夾，在此資料夾下存放圖片。
"pasteImage.path": "${currentFileNameWithoutExt}/",
// 圖片插入方式：採用 asset_img 標籤。currentFileNameWithoutExt是圖片的描述，在下一個步驟中用特殊的作用
"pasteImage.insertPattern": "{% asset_img ${imageFileName} ${currentFileNameWithoutExt} %}"

3. 截圖然後插入圖片，預設插入圖片的快捷鍵：

Windows/Linux: Ctrl+Alt+V

MacOS: Cmd+Alt+V

插入完後，markdown檔案中會增加一行類似如下程式碼：

{% asset_img hello-world/2024-06-25-12-21-02.png %}

3.3. 圖片插入-在VSCode中預覽圖片

3.3.1. 效率問題

前面兩步完成之後，hexo寫文章時應該能快速地插入圖片了，網站上也能正確渲染圖片。但是這種方式插入的圖片VSCode的Markdown預覽功能無法識別，無法正常預覽。

3.3.2. 解決方案

1. 安裝外掛：Markdown Preview Enhanced。

2. 修改 Markdown Preview Enhanced 的渲染指令碼。

ctrl+shift+P 輸入 Markdown Preview Enhanced: Extend Parser 調出外掛的 parse.js 檔案，修改其中的 onWillParseMarkdown 方法。

({
    onWillParseMarkdown: async function (markdown) {
        markdown = markdown.replace(
            /\{%\s*asset_img\s*(.*)\s*%\}/g,
            (whole, content) => {
                [imgPath, altText] = content.split(" ");
                // console.log("imgPath:", imgPath);
                // console.log("altText:", altText);
                // 說明：這裡藉助圖片描述(altText)引數來表示md的檔名，因為markdown的語法需要用相對路徑。
                result = `![](${altText}/${imgPath})`
                // console.log("result:", result);
                return result;
            }
        );
        return markdown;
    },
    // ...
})

這樣一來，我們 markdown 中的 {% assest xxx %} 程式碼就會在解析預覽時被替換成md的圖片語法，並且同樣採用相對路徑，圖片預覽成功。

3.4. 提交程式碼時自動部署

3.4.1. 效率問題

每次文件編寫完成後，我都需要做兩個動作：

1. git commit + git push, 將文章內容提交到gitee程式碼託管平臺，備份我的內容。
2. hexo g -d 將文章部署到我的部落格網站。

我希望把這兩個動作，合併成一個動作。

3.4.2. 解決辦法

1. 在你的文件倉庫的 .git/hooks 目錄下有一個 pre-push.sample 文件，這是一個 pre-push 指令碼的 Demo。pre-push 指令碼會在執行 git push 之前，被觸發執行。

2. 建立 pre-push 並編輯內容。

# 進入 ./.git/hooks 目錄
cd ./.git/hooks 
# 建立 pre-push 檔案
cp ./pre-push.sample ./pre-push
# 新增執行許可權
chmod +x ./pre-push
# 編輯 pre-push 檔案
vim ./pre-push

#!/bin/sh

echo "------start pre-push------"

hexo g -d

echo "------end pre-push------"

exit 0

---

大家好，我是陌塵。

IT從業10年+, 北漂過也深漂過，目前暫定居於杭州，未來不知還會飄向何方。

搞了8年C++，也幹過2年前端；用Python寫過書，也玩過一點PHP，未來還會折騰更多東西，不死不休。

感謝大家的關注，期待與你一起成長。

---

---

【SunLogging】

掃碼二維碼，關注微信公眾號，閱讀更多精彩內容