画像を貼り付けよう
📷
ここでは、記事の本文中に画像を貼り付ける方法を見ていきます。画像の管理を簡単に行えるプラグインを使う方法も見ていきます。
staticフォルダの使い方
ディレクトリ構造のところでも見た通り、NKSSG のインストール直後は static という名前のフォルダがあります。ここのフォルダに入れたものは、すべて public フォルダにそのまま移動します。
ですので、例えば次のようにファイルを保存していたとしましょう。
static
└── img
└── sample.png
この状態で、nkssg buildを実行すると、次のようにファイルがコピーされます。
public
└── img
└── sample.png
これを踏まえ、記事の中では次のように書くと画像を呼び出すことができます。
【HTML の場合】
<img src="/img/sample.png">
【Markdown の場合】
パスを /（半角スラッシュ）から始めると、ルート相対パスで指定したことになります。ローカルサーバーで見ている場合はhttp://127.0.0.1:5500/からのパス、nkssg build実行のファイルでは、サイトの URL からのパスになります。public フォルダの中身をサーバーにアップするので、この書き方で画像を呼び出せます。
ただし、この書き方はサイトの URL がサブフォルダを含んでいる場合は、うまくいきません。サブフォルダを含んでいる場合でも呼び出せるようにする方法は、次で説明します。
画像管理プラグイン
先ほど紹介した画像の呼び出し方は、画像や記事が少ない場合には問題ないのですが、画像が多くなってくると大変です。画像と記事とを対応させるのが難しくなってきます。数が多くなってくると、画像と記事は同じフォルダ内で管理できた方が便利です。
そのため、NKSSG では、画像を簡単に管理するためのプラグインを用意しています。nkssg.ymlのプラグインの設定（plugins のところ）を見てみると、awesome-img-linkがリストに入っているはずです。これが画像管理プラグインです。デフォルトでは有効になっています。
相対パスで呼び出す
この画像管理プラグインを使えば、次のような書き方ができます。まず、記事ファイルと画像ファイルが次のようにあったとします。
docs
└── post
└── 2021
├── 20210401.html
├── 20210401.md
└── sample.png
このとき、次のように呼び出します。
【HTML の場合】
<img src="./sample.png?">
【Markdown の場合】
最後に「?」マークをつけます。VSCode を使っている場合は、imgタグのsrcを入力する際には、ドロップダウンが出てくるはずなので、選んだ後に「?」をつければいいです。Markdown の場合は、Markdown All in Oneといった拡張機能を使えば、ドロップダウンでファイルを選べるようになります。
なお、次のように呼び出してもいいです。
【HTML の場合】
<img src="sample.png?">
【Markdown の場合】
画像と記事は、同じフォルダになくてもかまいません。例えば、記事が多くなってくると、画像フォルダは1つ下の階層に置きたくなるかもしれません。
docs
└── post
└── 2021
├── 20210401.html
├── 20210402.html
├── 20210403.html
└── img
└── sample.png
こうした場合、次のように呼び出すことができます。
【HTML の場合】
<img src="./img/sample.png?">
【Markdown の場合】
なお、最後に「?」がなければ、何も変換されません。
呼び出されないファイルは、public フォルダの下には移動しません。ですので、例えば、ai ファイルや ps ファイルを img フォルダに入れておいても public フォルダには移動しないため、公開されてしまうことはありません。
絶対パスで呼び出す
絶対パスで呼び出して最後に「?」をつけると、docsフォルダから指定して呼び出すことができます。
docs
└── post
└── 2021
├── 20210401.html
├── 20210402.html
├── 20210403.html
└── img
└── sample.png
このようになっている場合、sample.png の上の階層にあるファイルからは、どちらで呼び出しても同じ結果になります。
【HTML の場合】
<img src="/post/2021/img/sample.png?">
<img src="./img/sample.png?">
【Markdown の場合】
"/" から始まると、絶対パスで指定したと判断します。
まとめると、画像管理プラグインを有効にしている場合は、画像のパスが「?」で終わっているかどうかで、次のように処理が変わります。
- 「?」で終わっている場合は、docs フォルダ内のファイルを探す
- 「?」で終わっていない場合は、static フォルダ内のファイルを探す
ただ、docs フォルダ内の画像ファイルを絶対パスで指定すると、後でフォルダ構成を変えたときに修正箇所が増えるのでやめておいた方がいいでしょう。相対パスで指定する方法をおススメします。
どんな処理が行われている？
参考までに、この画像管理プラグインで、どのような処理が行われているかを説明します。コードはコチラにあります。
まず、各記事ファイルに対して、imgタグのsrcをすべてチェックします。このとき、最後に「?」があれば、変換対象だと認識します。
変換対象のものに対して、画像のパスを計算します。このとき、画像があれば、その画像は記事ファイルの出力先と同じフォルダにコピーされます。画像がなければ、それを示すメッセージが出力されます。また、元の記事にあった画像へのパスは、同じフォルダ内にある画像を呼び出すようにパスを書き換えます。
具体例で見てみます。次のような構成を考えましょう。
docs
└── post
└── 2021
├── 20210401.html
└── img
└── sample.png
また、20210401.html のファイル内で、<img src="./img/sample.png?"> と書いてあったとします。
さらに、post のパーマリンクが、/%Y/%m/%d/ となっていたとしましょう。そうすると、記事ファイルと画像は次の場所に作成されます。
public
└── post
└── 2021
└── 04
└── 01
├── index.html
└── sample.png
また、<img src="./img/sample.png?"> と書いていたところは、<img src="./sample.png"> に書き換わります。
docsフォルダ内の各記事ファイルは、publicフォルダ内のどこに保存するか、自由に決めることができます。そのため、富豪的な解決方法ですが、記事が使う画像は、記事ファイルと同じフォルダに全部コピーする、という方法をとっています。
このことからもわかりますが、1つの画像を複数の記事から呼び出すと、その分だけ画像がコピーされます。これは無駄です。なので、たくさんの記事から呼び出すような画像は、 static フォルダ内で管理し、呼び出すのがいいです。
サムネイル画像の扱い
ちなみに、サムネイルの画像は、/public/thumb/ フォルダの下に移動します。サムネイル画像は、記事ページだけでなく、アーカイブページやサイドバーなど、いろいろなところから呼び出されます。そのため、記事ファイルと同じフォルダにコピーするのではなく、 thumb フォルダから呼び出すようにしています。
docs フォルダ内と public フォルダ内の構造が大きく異なるため、少し変わった解決策をとっています。「こんな解決策はイヤだ」という人のために、この機能はプラグイン化しており、外すことができるようにしています。nkssg.yml からこのプラグインの設定を削除すれば、この機能を止めることができます。このプラグインを使用しない場合は、static フォルダから画像を呼び出す方法しか使えません。