Hugoでブログ中に画像イメージを貼り付ける
日付 タグ hugo カテゴリ hugo目次
オススメはビルトインのShortcodeを利用
Hugoのブログ記事を書き始めてすぐに持つ疑問は、文章はいいけど、画像貼り付けもできるの？というものだろう。Qiitaとか利用している人なら普通にMarkdown的な記法でURL貼り付けと同じ感じで画像リンク貼り付けを使っていると思うが、Hugoでも同様な記法が可能だが、どちらかというと、自分としてはShortcodeを普段は利用している。
- 画像イメージリンク貼り付け２パターン
- Markdown的な記法で貼り付け
- ビルトインShortcodeを用いて貼り付け
Markdown的な記法で画像イメージ貼り付け
RedmineとかGithubとかQiitaとか、そういうところで使われる画像イメージの貼り付けの場合は、
とすれば良い。それと同じようにHugoでもこの形式で画像イメージを記事中に貼り付けが可能である。
例えば、staticフォルダ以下に
/static/images/hugo-img/hakone.jpg
というファイルを用意しておいて貼り付けたいとする。
この場合、hugoコマンドでビルドされた暁には、このファイルは
public/images/hugo-img/hakone.jpg
というファイルになるので、
ブログ記事のMarkdownのmdファイル中で
ブログ記事のmarkdownのmd中
とすれば、どうだろう。
実際に画像が表示された。
Shortcodeで画像イメージ貼り付け
自分が普段使っているのはこちらの方法でShortcodeのfigureで画像イメージを貼り付けるやり方だ。
https://gohugo.io/content-management/shortcodes/ - Shortcodes
figure
figure is an extension of the image syntax in markdown, which does not provide a shorthand for the more semantic HTML5 element.
ブログ記事のmarkdownのmd中
{{< figure src="/images/hugo-img/hakone.jpg" alt="箱根散歩" >}}
どうだろう。無事に表示された。
figureのshortcodeの細かいオプションは公式ページを見ればわかるが、良く使うのは横幅指定。
300pxに横幅を指定したければ
{{< figure src="/images/hugo-img/hakone.jpg" alt="箱根散歩" width=300px >}}
実際にwidth指定を入れることで横幅が狭くなったのが確認できた。