Hexoで画像の表示(記事、投稿、固定ページ)
Hexo 5.4.2で、記事・投稿・固定ページに画像を表示させる個人的なメモ。
「source」フォルダの中に「images」フォルダを作って、画像を格納する管理方法。
サイトの構成は設計や環境で変動するため、以下は参考例
「blog」フォルダの中にある「source」フォルダをダブルクリック。
右クリックから「フォルダーの作成」で「images」の名前を付けて作成。
imagesフォルダの中に画像を格納して管理をする。
記事・投稿・固定ページに画像を表示させるマークダウン
png画像、jpg画像のマークダウン記述例
![代替テキスト(alt属性)](images/xxxxx.png)
![代替テキスト(alt属性)](images/xxxxx.jpg)
※HTMLのimgタグを記述しても結果は同じ様に表示される。
コマンドでimagesフォルダを作る例
GUI(マウスなどによってグラフィカルな画面を操作)
CUI(キーボードから文字を打ち込んで操作)
操作方法は異なるが、結果は同じ。
cd blog
cd source
mkdir images
現在のディレクトリ1つ上の階層のディレクトリに移動
cd ..
直前のディレクトリに移動
cd -
![代替テキスト(alt属性)](images/xxxxx.png)
まとめ
Hexoの設定(_config.yml)からAsset機能を有効にするよりも、個人的には、下書きも含めてURLの変動しない固定フォルダ(images)で画像管理の運用するほうが分かりやすい。
画像の命名や管理方法は「パーマリンクベース」か「投稿日ベース」だと、画像のファイル名で判別がしやすい。