Hexoで画像を表示

Asset Folderを有効にする

  • Asset Folders | Hexo

    Assets are non-post files in source folder, such as images, CSS or JavaScript files. Hexo provides a more convenient way to manage assets

Asset Folderを_config.ymlの設定で有効にする。

1
post_asset_folder: true

Asset Folderを有効にすると、hexo newで記事を新たに生成したときに、同名のフォルダが同時に生成される。

1
2
$ hexo new <title>
# => <title>.mdと<title>フォルダが生成される

フォルダの中に画像ファイルを入れると、記事中で使えるようになる。

たまにしか画像を使わないなど毎回フォルダが生成されると邪魔な場合は、post_asset_folder: falseにしておいて、画像を使いたいときだけ.mdファイルと同じ名前のフォルダを手動で作成しても大丈夫。

間違ってました。

.mdファイルと同じ名前のフォルダ(Asset Folder)を作ってファイルを入れておいても、post_asset_folder: trueにしておかないとhexo generateでファイルがアップされない。

画像を表示する

Hexo専用タグ

Asset Foldersのページ.mdファイル中で使える画像表示用のタグが説明されている。Hexo 3.0から追加されたらしいので、それ以前のバージョンでは使えない。

Several tag plugins are added in Hexo 3 for you to include assets in posts more easily.

slugの部分に画像ファイル名を入れればOK。絶対パスで指定されたimgタグに変換される。alttitleには同じ値が入る。

1
2
3
{% asset_img image.jpg title %}
=>
<img src="/<path>/image.jpg" alt="title" title="title">

マークダウン記法

マークダウン記法も可能。alttitleをそれぞれ指定できる。

1
2
3
![alt](image.jpg "title")
=>
<img src="image.jpg" alt="alt" title="title">

imgタグ直書き

Hexo専用タグとマークダウン記法、どちらの場合もサイズの指定は出来ない。サイズを指定したいときは.mdファイル中にhtmlimgタグを直書きするしかない。

1
<img src="image.jpg" alt="alt" title="title" width="100">

imgタグ直書きだとサイズも自由。

normal

small

どれを使う?

Hexo専用タグはイマイチしっくりこないので、サイズを変えなくていい場合はマークダウン記法、サイズを変えたい場合はimgタグ直書きでいく予定だが、マークダウン記法でもimgタグ直書きでも、ファイル名を指定するだけだと当然相対パスになる。

archivetagのページで本文を表示している場合、相対パスだと画像が表示されなくなってしまう。このブログは今のところarchivetagではタイトルだけで本文を表示していないので相対パスでも問題ないが、後々テーマ変更もありえるので絶対パス指定しておこうと思う。

絶対パスは_config.ymlpermalinkの設定に依存する。このブログはpermalink: :title/なので、例えばこの記事の画像の場合、

1
<img src="/hexo-image/lena.jpg" alt="small" width="100">

という風に設定している。permalink:yearとか:monthが入っている場合はそこまで入れて指定すればいい。

以前は、timnew/hexo-tag-asset-resというプラグインを使うとHexo専用タグでサイズも指定出来たようだが、3.0以降には対応していない模様。

共通のフォルダを作る(追記)

マークダウン記法、imgタグ直書きで絶対パスを指定する場合は、.mdファイルと同じ名前のフォルダ(Asset Folder)を使う必要はない。

sourceフォルダ以下にあるファイルやフォルダは、hexo generateするとそのままの構造でroot直下に配置される。例えば、sourceフォルダにimgフォルダを作って画像ファイルimage.jpgを置いておくと、

1
2
![alt](/img/image.jpg "title")
<img src="/img/image.jpg" alt="alt" title="title">

といった形で画像を表示できる。

このやり方だと同じ画像を違う記事から使えるので便利。post_asset_folder: trueにする必要もないので、hexo new postするたびにフォルダが生成されることもない。

お好みで。

関連記事