※この記事では、2017年12月2日時点でダウンロードした hugo_theme_robustを使用しています。


このブログは、静的サイトジェネレータ HUGO で作っていて、 Robust というテーマをちょっぴりカスタマイズして使用してます。
この記事はカスタマイズ内容のメモです。

config.toml

config.tomlでbaseurl、title、googleAnalyticsを設定します。他はデフォルトのままです。

アイキャッチのデフォルト画像の変更

任意の画像を用意してstatic/images/default.jpgを作成します。

Authorの設定

hugo_theme_robustは9月にAuthorが設定できるようになったみたいです。やったー!
これまで自分でサイドバーにプロフィール画像を追加していましたが、今回はhugo_theme_robustのAuthor機能を使って表示してみます。

その前に、SNS表示がfacebookとtwitterとgithubにか対応していないみたいです。 私はメールも追加したいので、少しカスタマイズしておきます。

themes/hugo_theme_robust/layouts/partials/author.htmllayouts/partials/author.htmlにコピーし、<ul class="author-facts">の中に以下のコードを追加します。

{{ with .mail }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>{{ end }}

fa-envelope-oはメールのアイコンを表しています。
他のアイコンを使いたい場合はFont Awesomeから探すことができます。 私は後でTumblrやSkypeを追加しても良いなあと思っています。

後はconfig.toml[params.author]を設定するだけです!

[params.author]
  thumbnail = "images/author.jpg"
  name = "ミサ"
  description = "xxxx。</p>"
  twitter = "xxxx"
  mail = "xxxx"

LATESTの削除

中身は空で、layouts/partials/latests.htmlファイルを作成しておきます。

更新日の表示

投稿日(Date)はカレンダーアイコンで、更新日(Lastmod)はリフレッシュアイコンで別々に表示するようにしました。
記事のFront MatterでDateLastmodをそれぞれ設定すると反映されます。

themes/hugo_theme_robust/layouts/_default/summary.htmllayouts/_default/summary.htmlにコピーして、以下のように修正。

$ diff themes/hugo_theme_robust/layouts/_default/summary.html layouts/_default/summary.html
9c9,11
<       <li><i class="fa fa-calendar" aria-hidden="true"></i><time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
---
> 	  <li><i class="fa fa-calendar" aria-hidden="true"></i><time datetime="{{ .Date.Format "2006-01-02T15:04:05JST" }}">{{ .Date.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
>       <li><i class="fa fa-refresh" aria-hidden="true"></i><time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
> 		

Google Adsenseの追加

まずは、普通のページ用の広告を設定します。

更新日の表示で作成したlayouts/_default/summary.htmlにGoogle Adsenseの広告コードを追加します。
どこに追加しても良いですが、私は</footer>の前に追加しました。
data-ad-clientdata-ad-slotは広告固有の値です。値は自分のGoogle Adsense管理ページから確認できます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxxxx"
     data-ad-slot="xxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

次に、ampページ用の広告を設定します。 先程のlayouts/_default/summary.htmlをコピーして、layouts/_default/summary.amp.htmlを作ります。 上記の広告コードを消して、代わりに以下のコードを追加します。

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="xxxxx"
data-ad-slot="xxxxx">
</amp-ad>

以上です。 .