さらいふ

HUGOでデザイン凝りたい?ならShortcode使おうぜ

投稿日 : 2020/10/11 23:00:05

タグ : #salad's memo#HUGO#旧ブログシステム

warningこの記事は作成から一年以上が経過しています

最新のコードやバージョンに対応していない場合があります。ご了承ください。

HUGOで画像を入れる時みなさんはどうしていますか?
多分ほとんどのマークダウン 方式になれた人は

![画像の名前](画像URL)

みたいな感じで書いていると思います。ただそれって

<p><img src="hoge/hoge.png" alt="hoge"></p>

というふうに出力されるんですよね。
それってなんか気持ち悪くないですか?
別に気にならないという方がいれば別にいいのですが、とても気持ち悪い感じがするんですよね。文章の中に画像。これの対処法をご紹介します。

shortcodeの使い方

ということでとりあえず使い方の前に、shortcodeってなんやねんというお話から。shortcodeとは、

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video <iframe> ’s) to Markdown content. We think this contradicts the beautiful simplicity of Markdown’s syntax. \n Hugo created shortcodes to circumvent these limitations.
Shortcodes-Hugo

ということらしいです。いや英語わからねぇという人のために翻訳すると

Hugoはmarkdownを使ってるけど、iframeとかの生のHTML入れたい時マークダウンの綺麗な形が損なわれるし、不便よな。Hugo動きます。

ということです。(もうこのネタ古いのかな?)生のHTMLを埋め込むのがダサいのでそれの改善策で作られたものみたいですね。これをうまく使って画像を表示しようということです。

画像を表示してみた

ということで、実際にコードを書いていきたいと思います。
まずは、Shortcodeを使うために必要なHTMLファイルを作りたいと思います。

  1. まず、layoutsディレクトリ内にshortcodesディレクトリを作成します。
  2. その中にshortcodeの名前にしたいHTMLファイルを作る 例)img.html twitter.htmlなど
  3. コードを書く
    ではどんなコードを書くのか。以下のコードをコピペしちゃってください。
<img
    src="{{ .Get `src` }}"
    {{ if .Get `alt` }}
        alt="{{ .Get `alt` }}"
    {{ end }}
    {{ if .Get `id` }}
        class="{{ .Get `id` }}"
    {{ end }}
    {{ if .Get `class` }}
        class="{{ .Get `class` }}"
    {{ end }}
/>

これで、imgにclassやidをつける事が可能になります。
では、次にmarkdownにはどのように書くのか、上記の通常使用の場合は以下のコードを書くと実装できます。

{{ < img id="" class="" src="" alt="" >}}

ここまでフルに入れなくてもいいという場合は

{{ < img src="" alt="" >}}

こんな感じでいいと思います。ちなみに僕は以下のようにコードを変えています。

<img
    {{ $type := .Get `type` }}
    {{ if eq $type "cfa" }}
        src="https://res.cloudinary.com/saladbowl/image/upload/f_auto/{{ .Get `src` }}"
    {{ else if  eq $type "cf" }}
        src="https://res.cloudinary.com/saladbowl/image/upload/{{ .Get `src` }}"
    {{ else if  eq $type "none" }}
        src="{{ .Get `src` }}"
    {{ else }}
        src="{{ .Get `src` }}"
    {{ end }}
        alt="{{ .Get `alt` }}"
    {{ if .Get `id` }}
        class="{{ .Get `id` }}"
    {{ end }}
    {{ if .Get `class` }}
        class="{{ .Get `class` }}"
    {{ end }}
/>

こんな感じにif文を使ってurlを短くする工夫をしています。このブログでははcloudinaryというサービスを使っているのでどうしてもurlが長くなってしまいます。ですので、共通の部分はできるだけ省けるようコードに書いています。

応用編 - YouTube埋め込み

という事で、少し応用をしてみたいと思います。
YouTubeを埋め込んでみましょう。どうするのか、もうお分かりですね。shortcodesディレクトリ内にyoutube.htmlを作成し、中に以下の記述をします。

<iframe
	width="560"
	height="315"
	src="https://www.youtube.com/embed/{{ .Get `url` }}"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

youtubeのurl (https://youtu.be/yaUxNp-fn-A) をコピーしてきて、

{{ < youtube url="yaUxNp-fn-A" >}}

こんな感じに記述をします。
そうすると表示されます!

{{< youtube url="yaUxNp-fn-A" >}}
HUGOからSvelteKit + Newtのシステムに変更したため使用を終了しました。

(昔作っていた、文字PVです。よかったらみてください。)
もし、cssなど使ってデザインを凝りたい場合は、適宜htmlファイルを変更してくださいね。

YouTubeのレスポンシブデザイン対応

記事も書いているので是非ご覧ください。

さらだぼぉる

[非公式]滋賀県コロナまとめサイトをはじめとした滋賀情報ネットプロジェクトといった地域情報を発信する取り組みをしている。 2022年10月現在高校三年生で滋賀在住。 PythonやSvelteKitが最近のお気に入り。