概要
Hugo/Robustの利用メモその2です。その1でサイト内の細かい設定を見直しましたので、その追加となります。
また、Hugo/Robustのバージョンによって多少の変更がありますので、その辺りは適宜読み替えをお願いします。
サイドバーの編集
Authorにinstagramアイコンを追加
Hugo/RobustのAuthorでは、デフォルトでfacebook/twitter/githubを表示可能となっています。
表示部分のコードはauthor.html
ですが、リンクURL等のパラメータはconfig.toml
に記載します。config.toml
の[params.author]
に記載がある項目のみ、表示される仕組みですね。
ということで、この部分にアイコンを追加する場合は、config.toml
のパラメータ追加、author.html
へのコード追加の2つが必要となります。
まずはconfig.toml
。
[params.author]
instagram = "https://www.instagram.com/XXXXXX/"
続いてauthor.html
。facebook/twitter/githubの下に下記を追加。
{{ 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の間に設置します。
この設定は下記サイト様を参考にさせていただきました。
まず、ピックアップ対象とする記事のヘッダ部分にパラメータ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
を作成します。
<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
により、ピックアップ記事のうち最新の1記事のみを表示するようになっています。この値を変更すれば、表示記事数を変更できます。
最後に、作成したpickup.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
プログラム等のソースコードを表記する際に、良い感じにハイライトしてくれるライブラリ。まさにこのページのコード部分で使っています。
導入には下記のサイト様を参考にさせていただいています。
ライブラリ等の読み込みはbaseof.html
にて記述されています。<head>
内に下記3行を追加。
<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
記事の本文前後に広告を追加
Google Adsense広告の追加場所については、追加したい箇所や広告種別によって異なります。各記事内の場合は、summary.html
に記載します。参考は下記サイト様。
詳細は割愛しますが、<div class="article-body">{{ .Content }}</div>
部分が記事本文、<footer class="article-footer">~</footer>
が記事フッター部分となります。ので、例えば本文の前後に広告を入れる場合は前述の記事本文を下記に書き換えます。
<div class="article-body">
/* 記事前広告のコード */
{{ .Content }}
/* 記事後広告のコード */
</div>
広告のコードはGoogle Adsenseより取得し、読み替えてください。もちろん、どちらか片方でも大丈夫です。
記事の本文中に広告を追加
本文前後は場所が固定のため上記の簡単な対応で問題ありませんが、本文中に広告を挿入する場合は工夫が必要です。
記事を書く際に最初から広告を埋め込むのも可ですが、広告コードの変更時などに大きな手間が発生しますし、何よりも毎回広告コードを埋め込むのは面倒です。この部分は自動化したいところですね。
ということで、本文中の広告挿入は下記サイト様を参考にさせていただきました。
こちらのサイト様記事では<p>
タグの数を計算し、真ん中に当たる<p>
部分に広告コードを挿入しています。<h2>
などを対象に書き換えても問題ないでしょう。
自動広告を追加
Google Adsenseの自動広告を追加する場合は、各ページ共通で読み込まれる個所に広告コードを記載します。Hugo/Robustだとmeta.html
あたりですね。
こちらも同様にGoogle Adsenseから自動広告コードを取得し、そのままmeta.html
に張り付ければOKです。