やりたいこと
- このブログの投稿にアイキャッチ画像を指定したい．
使う画像↓
やったこと概要
- markdownファイルにアイキャッチ画像の相対パスを設定する．
- htmlのヘッド部分でパスを読み取り指定する．
1. アイキャッチ画像を用意する.
上の画像はcanvaで用意しました．この画像をstatic/img/eyecatch.jpgに置きます．
2. markdownファイルにアイキャッチ画像の相対パスを設定する．
---
title: "monospaceはChromeとSafariでかなり違う"
date: 2020-05-04T00:38:20+09:00
draft: false
categories: ['技術']
tags: ['フォント','ブラウザ','Hugo','tips']
eyecatch: '/img/07_eyecatch.jpg'
---
最後の一行で，アイキャッチ画像への相対パスを記載しています．
3. htmlのヘッド部分にアイキャッチのパスを記載する．
このテーマ(erblog)では，htmlのヘッドを編集するためのファイルは， themes/erblog/layouts/partials/self-define-head.html です．このファイルに，下記を記載します．
<!-- thumbnailの設定 -->
<meta name="thumbnail" content="{{ if ( and (.IsPage) (.Params.eyecatch) )}}{{ .Site.BaseURL }}{{ .Params.eyecatch }}{{ else }}https://nyakapoko.github.io/img/logo.png{{ end }}"/>
<!-- twitter等用の設定 -->
<meta name="og:image" content="{{ if ( and (.IsPage) (.Params.eyecatch) )}}{{ .Site.BaseURL }}{{ .Params.eyecatch }}{{ else }}https://nyakapoko.github.io/img/logo.png{{ end }}" />
if文により，下記が成立しない場合はデフォルトとしてロゴ画像（/img/logo.png）を指定するようにしています．
- コンテンツのページである (.IsPage)
- markdownファイルでeyecatchのパスが設定されている（.Params.eyecatch）
結果
無事，アイキャッチ画像が表示されるようになりました↓
めでたしめでたし．