Hexo で画像を扱う

asset ディレクトリーを有効にする

設定ファイル _config.yml の post_asset_folder の値を変更する。

>git diff _config.yml
diff --git a/_config.yml b/_config.yml
index ca61901..0fc9eb2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -41,7 +41,7 @@ external_link:
   exclude: ''
 filename_case: 0
 render_drafts: false
-post_asset_folder: false
+post_asset_folder: true
 relative_link: false
 future: true
 highlight:

post_asset_folder の値を true にすると、新規記事作成時に記事に対応したディレクトリーが自動的に生成されるので、記事で使用する画像をそのディレクトリーに保存する。

記事のトップに画像を表示する

記事の Front-matter に下記を追記する。

photos: /2019/12/26/hexo-photos/photos.jpg

記事中に画像を表示する

以下の3種類の書式で画像を表示することができる。

Hexo 書式

{% asset_img image.jpg 画像貼付けテスト %}

HTML

<img src="{% asset_path image.jpg %}" title="画像貼付けテスト" />

Markdown 書式

![alt](/2019/12/26/hexo-photos/image.jpg "画像貼付けテスト")