TOP image

Hugoで作るアフィリエイトサイト

静的ジェネレーターで低コストアフィサイトを作る

【Hugo】画像をマークダウンに入れる方法

2019年 8月 15日  2019年 8月 15日

【Hugo】画像をマークダウンに入れる方法

目次

Hugoでの画像の入れ方は色々とありますが、個人的に一番しっくり来ているものを紹介します。

ショートコードが色々汎用性があっていいかなって。

Hugoで画像を入れるにはショートコードを使う

Hugoはローカル環境、ビルド時でそれぞれURLが変わります。

ローカルとビルド環境それぞれで画像を表示させるには、ショートコードを作成するのが効率的です

ショートコードを作成する

ショートコードフォルダにショートコードのHTMLを作成します

├─archetypes
├─content
├─data
├─layouts
│  └─shortcodes←このフォルダに作成
│     └─amp-img.html
├─public

今回は「amp-img.html」としました。

Hugoのショートコードは知ってのとおり、ファイル名を利用して呼び出します。

こうしておくと、VSCodeでHTMLタグと認識されて、色が着くので、非常に可読性が良くなるんです！

今回はampサイトの画像なのでamp-imgタグで作っていきます。

※<head></head>の間に以下のコードを入れる必要が有ります。

<head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

（サイト下部に参考として通常のimgも載せています。）

amp-img.htmlの中身はこうです。

blog\layouts\shortcodes\amp-img.html

<amp-img
  {{ with .Get "src" }}src="{{ . | absURL }}"{{ end }}
  {{ with .Get "alt" }}alt="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
  {{ with .Get "attribution" }}attribution="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
  {{ with .Get "srcset" }}srcset="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
  {{ with .Get "width" }}width="{{ . }}"{{ end }}
  {{ with .Get "height" }}height="{{ . }}"{{ end }}
  {{ with .Get "layout" }}layout="{{ . }}"{{ end }}>
</amp-img>

意味はショートコード上で“src”があったら「絶対参照のURLにして」src=“この中に”入れろってことです。

withで条件式を書くと判定文に使った変数を{{ . }}で描けるので、可読性が少し上がります。

amp-imgの属性をそれぞれ入れていて、ショートコード側から、amp-imgタグを自在に操れるようにしています。

ファイル構成

画像ファイルを置く場所は決まっていて、staticフォルダ以下(最近はpost以下にもできるのですが・・・)になります。

フォルダ構成

├─content
│  ├─pages ←固定ページ入れる所
│  └─post ←投稿ページ入れる所
│    └─static-site-generator-writing.md ←今見ているページの原稿。カテゴリやトップに分裂する
├─static ←分裂しない物を入れておく画像とかIfremeとかCSS・JSとか
│  ├─img
│  │  ├─common 
│  │  ├─eyecatch
│  │  └─post
│  │      └─static-site-generator-writing
│  │        └─static-site-generator-writing01.img ←入れたい画像
│  └─webfonts

staticフォルダ以下の構成は自由で、私は「img」ってフォルダを切って、その配下の「post」フォルダに投稿別でファイルを管理しています。

ちなみに、「common」はアイコンやトップ画像、ファビコンなんかが入っています。

「eyecatch」は文字通りアイキャッチです。

アイキャッチの要件が横1200px以上となる流れなので、別で管理しています。

使用方法

使用方法はこんな感じですね。

{{<amp-img src="/img/post/static-site-generator-writing/static-site-generator-writing01.jpg" width="16" height="9" layout="responsive">}}

「absURL」の変換で絶対パスにしています。

Hugoのローカル環境(テスト環境)とビルド(本番環境)に対応するにはこれが良いんじゃないかと。

「absURL」と書くことで、どちらにも対応できます

環境 画像のパス
ローカル環境 src="http://localhost:1313/img/post/static-site-generator-writing/static-site-generator-writing01.jpg"
ビルド src="http://設定したドメイン/img/post/static-site-generator-writing/static-site-generator-writing01.jpg"

これで、本来のパスである「static」が消えている理由もわかりますかね？

はい、ビルドすると、フォルダ構成が変わります。

public
├─post ←投稿が入る(contentフォルダがなくなります)
│  ├─static-site-generator-affiliate
│  ├─static-site-generator-environment
│  ├─static-site-generator-strategy
│  ├─static-site-generator-writing
├─img ←画像が入る(staticフォルダがなくなります)
│  ├─common
│  ├─eyecatch
│  └─post
│      └─static-site-generator-writing
│        └─static-site-generator-writing01.jpg
アイコン

フォルダ階層が変わることが一番むずかしいです。

アレンジ例

ショートコードを色々といじることで、画像の表示の仕方も変えられれます。

リンク付きamp画像

aタグで囲んだだけですが…

<a {{ with .Get "src" }}href="{{ . | absURL }}"{{ end }} target="_blank">
<amp-img
  {{ with .Get "src" }}src="{{ . | absURL }}"{{ end }}
  {{ with .Get "alt" }}alt="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
  {{ with .Get "attribution" }}attribution="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
  {{ with .Get "srcset" }}srcset="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
  {{ with .Get "width" }}width="{{ . }}"{{ end }}
  {{ with .Get "height" }}height="{{ . }}"{{ end }}
  {{ with .Get "layout" }}layout="{{ . }}"{{ end }}>
</amp-img>
</a>

ライトボックス付き

amp-liteboxと組み合わせることもできます。

idにソースへのパスを指定しているので、1回しか使えないんですけどね…。

おとなしくid属性を追加するか悩みどころです。

headに追加

<head>
<!-- ライトボックス -->
    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
</head>

ショートコード

<a  on="tap:{{ with .Get "src" }}{{ . | absURL }}{{ end }}">
  <amp-img {{ with .Get "src" }}src="{{ . | absURL }}" {{ end }}
    {{ with .Get "alt" }}alt="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}
    {{ with .Get "attribution" }}attribution="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}
    {{ with .Get "srcset" }}srcset="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}
    {{ with .Get "width" }}width="{{ . }}" {{ end }} {{ with .Get "height" }}height="{{ . }}" {{ end }}
    {{ with .Get "layout" }}layout="{{ . }}" {{ end }}>
  </amp-img>
</a>

<amp-lightbox id="{{ with .Get "src" }}{{ . | absURL }}{{ end }}" layout="nodisplay">
<amp-img {{ with .Get "src" }}src="{{ . | absURL }}" {{ end }}
{{ with .Get "alt" }}alt="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}
{{ with .Get "attribution" }}attribution="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}
{{ with .Get "srcset" }}srcset="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}
{{ with .Get "width" }}width="{{ . }}" {{ end }} {{ with .Get "height" }}height="{{ . }}" {{ end }}
layout="fill"
on="tap:{{ with .Get "src" }}{{ . | absURL }}{{ end }}.close"
role="button"
tabindex>
</amp-img>
</amp-lightbox>

黙ってsrcとalt属性だけ

非AMPサイトはsrcとaltがあれば、十分な性能を発揮するので…それだけです

<img {{ with .Get "src" }}src="{{ . | absURL }}" {{ end }}
    {{ with .Get "alt" }}alt="{{ range (split . " ") }}{{ . }} {{ end }}" {{ end }}>

まとめ

フォルダ階層が変化することを意識して、absURLで画像を入れよう！

って話でした。

工夫次第で、他の属性を入れられたり、

HTML5.2のpictureタグでレスポンシブな対応(たかがブログでそこまでやると、画像管理がめんどくなりますが…)をしたり

と夢が広がります。