Hexo 資源文件夾

資源（Asset）代表 source 文件夾中除了文章以外的所有文件，例如圖片、CSS、JS 文件等。比方說(shuō)，如果你的Hexo項(xiàng)目中只有少量圖片，那最簡(jiǎn)單的方法就是將它們放在 source/images 文件夾中。然后通過(guò)類似于 ![](/images/image.jpg) 的方法訪問(wèn)它們。

文章資源文件夾

對(duì)于那些想要更有規(guī)律地提供圖片和其他資源以及想要將他們的資源分布在各個(gè)文章上的人來(lái)說(shuō)，Hexo也提供了更組織化的方式來(lái)管理資源。這個(gè)稍微有些復(fù)雜但是管理資源非常方便的功能可以通過(guò)將 config.yml 文件中的 post_asset_folder 選項(xiàng)設(shè)為 true 來(lái)打開。

post_asset_folder: true

當(dāng)資源文件管理功能打開后，Hexo將會(huì)在你每一次通過(guò) hexo new [layout] <title> 命令創(chuàng)建新文章時(shí)自動(dòng)創(chuàng)建一個(gè)文件夾。這個(gè)資源文件夾將會(huì)有與這個(gè)文章文件一樣的名字。將所有與你的文章有關(guān)的資源放在這個(gè)關(guān)聯(lián)文件夾中之后，你可以通過(guò)相對(duì)路徑來(lái)引用它們，這樣你就得到了一個(gè)更簡(jiǎn)單而且方便得多的工作流。

相對(duì)路徑引用的標(biāo)簽插件

通過(guò)常規(guī)的 markdown 語(yǔ)法和相對(duì)路徑來(lái)引用圖片和其它資源可能會(huì)導(dǎo)致它們?cè)诖鏅n頁(yè)或者主頁(yè)上顯示不正確。在Hexo 2時(shí)代，社區(qū)創(chuàng)建了很多插件來(lái)解決這個(gè)問(wèn)題。但是，隨著Hexo 3 的發(fā)布，許多新的標(biāo)簽插件被加入到了核心代碼中。這使得你可以更簡(jiǎn)單地在文章中引用你的資源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如說(shuō)：當(dāng)你打開文章資源文件夾功能后，你把一個(gè) example.jpg 圖片放在了你的資源文件夾中，如果通過(guò)使用相對(duì)路徑的常規(guī) markdown 語(yǔ)法 ![](example.jpg) ，它將 不會(huì) 出現(xiàn)在首頁(yè)上。（但是它會(huì)在文章中按你期待的方式工作）

正確的引用圖片方式是使用下列的標(biāo)簽插件而不是 markdown ：

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

通過(guò)這種方式，圖片將會(huì)同時(shí)出現(xiàn)在文章和主頁(yè)以及歸檔頁(yè)中。

Embedding an image using markdown

hexo-renderer-marked 3.1.0 introduced a new option that allows you to embed an image in markdown without using asset_img tag plugin.

To enable:

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, ![](image.jpg) will be rendered as <img src="/2020/01/02/foo/image.jpg">.