Hugo/Robustで静的サイト構築メモ（２）

概要

Hugo/Robustの利用メモその２です。その１でサイト内の細かい設定を見直しましたので、その追加となります。

また、Hugo/Robustのバージョンによって多少の変更がありますので、その辺りは適宜読み替えをお願いします。

サイドバーの編集

Authorにinstagramアイコンを追加

Hugo/RobustのAuthorでは、デフォルトでfacebook/twitter/githubを表示可能となっています。

表示部分のコードはauthor.htmlですが、リンクURL等のパラメータはconfig.tomlに記載します。config.tomlの[params.author]に記載がある項目のみ、表示される仕組みですね。

ということで、この部分にアイコンを追加する場合は、config.tomlのパラメータ追加、author.htmlへのコード追加の２つが必要となります。

まずはconfig.toml。

config.toml

[params.author]
instagram = "https://www.instagram.com/XXXXXX/"

続いてauthor.html。facebook/twitter/githubの下に下記を追加。

author.html

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

PICKUPを表示

サイドバーにピックアップ記事を表示する領域を追加します。配置場所は好みかと思いますが、ここではAuthorとLatestsの間に設置します。

この設定は下記サイト様を参考にさせていただきました。

HUGOで作れるCMSっぽいパーツ:関連記事・目次・JSON-LDなど

まず、ピックアップ対象とする記事のヘッダ部分にパラメータpickup:"true"を追加します。

ピックアップ記事

---
title: "記事タイトル"
date: 2020-01-01T12:12:12+09:00
draft: false
categories : [ "カテゴリ" ]
thumbnail : "/images/test.JPG"
pickup : "true"
---

次に、ピックアップ表示部分を作成します。基本的な表示方などはlatests.htmlと同様にしましょう。layouts/partialsにpickup.htmlを作成します。

pickup.html

<section class="sidebar">
  <header>PICK UP</header>
  <div>
    <div class="articles sm">
      {{ range first 1 (where .Site.Pages ".Params.pickup" "true" ) }}
      {{ .Render "li_sm" }}
      {{ end }}
    </div>
  </div>
</section>

このコードによりサイト内すべてのページのパラメータが取得され、pickupがtrueの記事が抽出されます。レンダリングはlatests.htmlと同様ですね。

また、range first 1により、ピックアップ記事のうち最新の１記事のみを表示するようになっています。この値を変更すれば、表示記事数を変更できます。

最後に、作成したpickup.htmlをサイドバーへ追加します。

baseof.html

<aside class="l-sidebar">
    {{ partial "author.html" . }}
    {{ partial "pickup.html" . }}
    {{ partial "latests.html" . }}
    {{ partial "categories.html" . }}
    {{ partial "tags.html" . }}
</aside>

{{ partial "pickup.html" . }}の挿入場所を変えることで、サイドバーへの配置順番を変更できると思います。

CSS等の読み込み

highlight.js

プログラム等のソースコードを表記する際に、良い感じにハイライトしてくれるライブラリ。まさにこのページのコード部分で使っています。

導入には下記のサイト様を参考にさせていただいています。

コードのハイライト表示用 JS ライブラリ highlight.js の使い方

ライブラリ等の読み込みはbaseof.htmlにて記述されています。<head>内に下記３行を追加。

baseof.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/hybrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.jsのバージョンやcssの種類はお好きなものを。特にcssは様々な種類がありますので、公式サイトで確認すると良いでしょう。

また、今回はCDNから取得していますが、ローカルに保存しても大丈夫かと思います。

記事の本文前後に広告を追加

Google Adsense広告の追加場所については、追加したい箇所や広告種別によって異なります。各記事内の場合は、summary.htmlに記載します。参考は下記サイト様。

Hugo の Robust theme のカスタマイズ

詳細は割愛しますが、<div class="article-body">{{ .Content }}</div>部分が記事本文、<footer class="article-footer">～</footer>が記事フッター部分となります。ので、例えば本文の前後に広告を入れる場合は前述の記事本文を下記に書き換えます。

summary.html

<div class="article-body">

/* 記事前広告のコード */

{{ .Content }}

/* 記事後広告のコード */

</div>

広告のコードはGoogle Adsenseより取得し、読み替えてください。もちろん、どちらか片方でも大丈夫です。

記事の本文中に広告を追加

本文前後は場所が固定のため上記の簡単な対応で問題ありませんが、本文中に広告を挿入する場合は工夫が必要です。

記事を書く際に最初から広告を埋め込むのも可ですが、広告コードの変更時などに大きな手間が発生しますし、何よりも毎回広告コードを埋め込むのは面倒です。この部分は自動化したいところですね。

ということで、本文中の広告挿入は下記サイト様を参考にさせていただきました。

【Hugo】記事の真ん中あたりに広告コードを挿入する方法

こちらのサイト様記事では<p>タグの数を計算し、真ん中に当たる<p>部分に広告コードを挿入しています。<h2>などを対象に書き換えても問題ないでしょう。

自動広告を追加

Google Adsenseの自動広告を追加する場合は、各ページ共通で読み込まれる個所に広告コードを記載します。Hugo/Robustだとmeta.htmlあたりですね。

こちらも同様にGoogle Adsenseから自動広告コードを取得し、そのままmeta.htmlに張り付ければOKです。