Hexo 搭建個人博客（五）Hexo 資源文件夾

目標

本文將介紹 Hexo 資源文件夾的使用，以及解決如何以相對路徑的方式引用圖片使其能夠在主頁和文章中正常顯示。

本文基於 hexo: 3.8.0

資源文件

資源（Asset）代表 source 文件夾中除了文章以外的所有文件，例如圖片、CSS、JS 文件等。

直接引用

如果 Hexo 項目中只有少量圖片，那最簡單的方法就是將它們放在 source/images 文件夾中，然後通過以下方法引用：

![direct](/images/img.png)

編譯成靜態文件後 img.png 存放在 public/images 文件夾下，生成的 html 文件中的引用路徑爲：

<img src="/images/img.png" alt="direct">

使用文章資源文件夾

對於那些想要更有規律地提供圖片和其他資源以及想要將他們的資源分佈在各個文章上的人來說，Hexo 也提供了更組織化的方式來管理資源。這個功能可以通過將 _config.yml 文件中的 post_asset_folder 選項設爲 true 來打開。

post_asset_folder: true

當資源文件管理功能打開後，Hexo 將會在你每一次通過 hexo new [layout] <title> 命令創建新文章時自動創建一個文件夾。這個資源文件夾與這個 markdown 文件同名。將所有與該文章有關的資源放在這個關聯文件夾中之後，你可以通過相對路徑來引用它們，推薦使用該方式，其引用方式和原生 Markdown 方式一致，避免過多的使用 Hexo 的擴展標籤。

使用 post_asset_folder 存在的一些問題，可以參考下方 “圖片的相對引用”。

使用標籤插件

通過常規的 markdown 語法和相對路徑來引用圖片和其它資源可能會導致它們在存檔頁或者主頁上顯示不正確，你可以使用 標籤插件 來解決這個問題。

{% asset_img slug [title] %}

例如，當你打開文章資源文件夾功能後，你把一個 example.jpg 圖片放在了你的資源文件夾中，如果通過使用相對路徑的常規 markdown 語法 ![](./example.jpg) 或 ![](example.jpg)，它將不會出現在首頁上，但它會在文章中正常顯示。

通過下列方式，圖片將會同時出現在文章和主頁以及歸檔頁中。

{% asset_img example.jpg This is an example image %}

圖片的相對引用

開啓 post_asset_folder 後，例如創建一篇名爲 “assetsTest” 的文章並引用一張圖片，它的文件目錄結構如下：

$ tree source/_posts 
source/_posts
├── assetsTest
│   └── example.png
└── assetsTest.md

三種相對引用的寫法及其效果：

• ![example](example.png)

  Hexo 官方文檔關於 markdown 的示例寫法，圖片不能在主頁正常顯示，但在文章中能正常顯示。此外，這種相對引用寫法在絕大數 markdown 編輯器的預覽視圖中都無法正常顯示圖片（Typora 通過設置 Use Image Root Path 可以解決，它會在文件頭添加 typora-root-url: xxxx）。

• {% asset_img example.png example %}

  Hexo 官方推薦使用標籤的寫法，圖片能在主頁和文章中正常顯示，但是不能在 markdown 編輯器的預覽視圖中預覽圖片。

• ![example](assetsTest/example.png)

  幾乎所有的 markdown 編輯器都支持的相對引用的寫法，在markdown 編輯器的預覽視圖中都能正常顯示圖片，但在主頁和文章中無法正常顯示。

推薦使用第三種寫法，爲了解決無法在主頁和文章中正常顯示的問題，需要安裝 hexo-asset-image 插件：

npm install [email protected] --save