原稿に貼り付ける画像の管理方法、投稿ページに使用した画像を投稿ごとにフォルダ分けする方法について調べてみました。

投稿ページで説明用に画像を貼り付けたい場合があります。
画像フォルダはデフォルト状態では１つになっていますが、投稿ページごとに画像を管理するフォルダを作り管理することも出来ます。

Hexoで、画像管理用のフォルダはpost_asset_folderと呼ばれ、コンフィグで有効化することで使用できます。post_asset_folder管理機能について調べてみました。

デフォルト状態

post_asset_folder: falseになっている。
投稿ページと画像の管理フォルダのツリー図は以下の通り。

1
2
3
4
5

source/
├── _posts
│   └── hello-world.md
└── images
    └── image.png

したがって画像を読み込む場合は、![alt](/images/image.png)と記述します。

個別管理を有効化する

configファイル中で、post_asset_folder: trueと指定します。

1
2
3
4
5

source/
└── _posts
    ├── hello-world
    │   └── image.png
    └── hello-world.md

したがって画像を読み込む場合には、{% asset_img image.png alt %}と記述します。

カバー写真が欲しい場合

coverImage: 4x3a.jpg

画像

投稿記事と画像ファイル

相対関係をリンクに記述する

![画像のリンク先](/img/ファイル名.jpg)というように記述する。

画像のスライド切替

Before/After

twentytwenty image slider うまく行かなかったわけ

_config.ymlに宣言していない

hexo cleanしていない

public/jsにファイルをおいていない

リンク先

リンク先をプレビュー表示

hexo-tag-link-preview

リンク先をカードスタイル表示

hexo-valkyr-url
シンプルカードのテストをします。