HugoのテーマをRobustに変更・適宜カスタマイズしました

ポートフォリオっぽいサイトのデザイン (Hugo Bingo) でスタートを切ったのですが、実際に運用しようとカスタマイズを進めていると、あまりにカスタマイズする箇所が多すぎたので、思い切ってテーマを (Robust) に変更しました。

まだまだ弄り途中ですが、何だかんだ変更する箇所があったので、参考にしたサイトの紹介と共に変更箇所のメモを残しておきます

Hugoテーマのカスタマイズについて

/themes 以下にテーマに関連するファイルがありますが、プロジェクト直下の /layouts 以下にファイルを設置すれば、上書きして読み込まれます。

変更したい箇所のファイルをコピーし /layouts 以下でのみ編集することで元に戻すことが出来るので、直接触らないようにする

/partials とか /_default のフォルダは new した時点では作られないので、必要に応じて適宜作成すること

Hugo - Base Templates and Blocks

Authorの設定

もともとはFontAwesome使ってるのですが、自分の欲しいアイコンが無かったので全てsvgでの画像に変更しました。

また、メールでの問い合わせボタンも一応つけておきました

/layouts/partials/author.html

<ul class="author-facts">
  {{ with .github }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><img src="/images/icons/github.svg" width="16px"></a></li>{{ end }}
  {{ with .eight }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><img src="/images/icons/eight.svg" width="16px"></a></li>{{ end }}
  {{ with .twitter }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><img src="/images/icons/twitter.svg" width="16px"></a></li>{{ end }}
  {{ with .facebook }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><img src="/images/icons/facebook.svg" width="16px"></a></li>{{ end }}
  {{ with .mail }}<li><a href="{{ . }}" rel="nofollow" target="_blank"><img src="/images/icons/mail.svg" width="16px"></a></li>{{ end }}
</ul>

config.tomlにそれ用の設定を追加
※ 取り急ぎ mailto: を設定しましたが、さすがに嫌なので近い内に変更します

/config.toml

[params.author]
  thumbnail = "images/avatar.png"
  name = "masaquid"
  description = '自己紹介的なテキスト'
  twitter  = "https://twitter.com/USERNAME"
  facebook = "https://www.facebook.com/USERNAME"
  github   = "https://github.com/USERNAME"
  eight    = "https://www.facebook.com/USERNAME"
  mail     = "mailto:MAIL-ADDRESS@gmail.com"

Faviconの設定

デフォルトだとiPhone用のアイコンしかないようなので、Faviconとあわせて設定しました /static/favicon.ico と /static/images/logo.png を配置

/layouts/partials/meta.html

<link rel="apple-touch-icon" href="{{ .Site.BaseURL }}images/logo.png">
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}favicon.ico">

LINEでシェアした時に外部ブラウザで開くように

LINE内ブラウザが脆弱性の塊なので外部ブラウザで開く設定にします GETパラメータに &openExternalBrowser=1 を追加

/layouts/partials/share.html

<aside class="share">

  ...

  <a href="https://social-plugins.line.me/lineit/share?url={{ .Permalink }}&openExternalBrowser=1" title="LINEでシェア" class="ln" target="_blank" rel="nofollow"><i class="fab fa-line" aria-hidden="true"></i></a>
</aside>

サイト名の横にアイコンを表示

上記iPhone用のロゴと同じもの使いましたが、タイトル横にロゴを表示してみました

/layouts/_default/baseof.html
/layouts/_default/baseof.amp.html

<div class="logo">
    <a href="{{ .Site.BaseURL }}"><img src="{{ .Site.BaseURL }}/images/logo.png">{{ .Site.Title }}</a>
</div>

画像サイズの修正など CSSの変更は custom.css に書く

/layouts/partials/custom.css

.logo img {
  height: 1em;
  padding: 0 5px;
  vertical-align: bottom;
}

フッターの著作権表示の所にクリエイティブ・コモンズの表示

ちょっとフッターが寂しかったのでクリエイティブ・コモンズの画像を追加しました画像の vertical-align も合わせて変更できるようCSS追加した

/layouts/_default/baseof.html
/layouts/_default/baseof.amp.html

<p class="copyright">{{ with .Site.Copyright }}{{ . | safeHTML }}{{ else }}<span class="h-logo">&copy; {{ .Site.Title }}</span>{{ end }}</p>

/layouts/partials/custom.css

.copyright img { /* creativecommons */
  height: 15px;
  margin-left: 1em;
  vertical-align: middle;
}

copyrightの表記は config.toml で変更

/config.toml

copyright = """
&copy; masaqu.id
<a rel='license' href='http://creativecommons.org/licenses/by-sa/4.0/'>
  <img alt='クリエイティブ・コモンズ・ライセンス' src='https://i.creativecommons.org/l/by-sa/4.0/80x15.png' />
</a>"""

タグ・カテゴリーを有効化

テーマにタグ・カテゴリーが用意されてたので設定に書いて有効化させる

/config.toml

[taxonomies]
  tag = "tags"
  category = "categories"
  series = "series"

config.tomlの修正

日付表記やWebフォントなど、好みに合わせて内容変更した

/config.toml

[params]
  description = "サイトタイトルの下に表示されるテキスト"
  dateformat = "2006/01/02"
  # Fonts settings.
  googlefonts = "https://fonts.googleapis.com/css?family=Lato|Noto+Sans+JP&display=swap" # Optional, Include google fonts.
  fontfamily = "Lato, 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif" # Optional, Override body font family.
  # logofontfamily = "Lobster, cursive" # Optional, Override logo font.

コードのハイライト highlight.js を適用

HugoのSyntax機能を使っても良かったのですが、読み進めるのに時間がかかりそうだったので取り急ぎ highlight.js を導入したコードのハイライト表示用 JS ライブラリ highlight.js の使い方

Hugo - Syntax Highlighting

/layouts/_default/baseof.html

  ...
    
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-sulphurpool.dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>

記事投稿時のデフォルト設定を変更

FromtMatter奴
アイキャッチなんかは固定の名前で十分なので自動で入力されるようにした

アイキャッチ用意してない時は手動で削除する方針に。
thumbnail が空の時は /static/default.jpg が読み込まれる

/archetypes/default.md

---
date: {{ .Date }}
thumbnail: images/posts/{{ dateFormat "2006-01-02" .Date }}_eye-catch.png
title:
toc: false
categories:
 - ""
 - ""
---

大半は偉大な先駆者様の設定を参考にした (殆どそのまま使わせていただきました)
ありがとうございます

HUGO のテーマ Robust のカスタマイズver3
Robust設定 :: Alice in the Machine - wiki

それっぽくなったので、コレにて一旦終了して後はゆっくり触ってみます