Hugo(erblog)でサムネイル画像を指定する

2020-04-30 tips Hugo erblog

このブログについて

やりたいこと

  • erblogのテーマは,デフォルトでは,サムネイル画像は指定されていません.リンクを貼ったときにサムネイル画像がないと,ちょっと印象がイマイチだと思っています.そこで,このブログの各記事にサムネイル画像を指定しようと思います.

※ ↓サムネイル画像なしの状態での引用ツイートの例(ツイートありがとうございます!)

↓こういう風に画像つきで表示されてほしい

  • 今回は,全ページで同じサムネイル画像を指定します.
  • また,今回は,サムネイル画像として,ページのロゴ画像↓を使用します.

やったこと

  1. ロゴ画像ファイルを作り,themes/erblog/static/self/img/logo.png に置きます.
  2. ロゴ画像については,簡単な設定方法が用意されています.config.tomlに書きを追加します.
[Params]
	logo = "/self/img/logo.png"
  1. themes/erblog/layouts/partials/self-define-head.htmlを編集します.
<meta name="thumbnail" content="{{.Site.Params.logo}}"/>

.Site.Params.logoには上で指定した/self/img/log.pngが代入されます.

※ erblogでは,themes/erblog/layouts/partials/self-define-head.htmlを編集することで,ユーザが独自にヘッダを追加できます.

  1. 上記で動くはずなんですが,動きませんでした.(初学者なので自信がないですが)themes/erblog/partials/head.html の52行目に下記のバグがあるっぽいので修正します.

修正前:

    {{- partial "self-define-head.html" -}}

修正後:

    {{- partial "self-define-head.html" . -}}

つまり,self-define-head.htmlを探すパス.が抜けているようです.

結果

例えば,iframelyでlinkをembedするとこんな感じになりました.(twitterはサーバのキャッシュのせいか,まだ画像が表示されるようにならない…)

サムネイル画像が表示されてますね!めでたしめでたし.

comments powered by Disqus