「hugo/notepadium」に「合わせて読む」機能の追加

2020-03-18

今回は本サイトでも使用している「notepadium」テーマに「合わせて読む」機能を追加しようと思います。

本記事は「hugo/notepadium」にSNSシェアボタンを追加するの設定を完了したものとして説明を進めます。

はじめに

今回変更する箇所は下記の通りです。

.
└── themes/
    └── hugo-notepadium
        ├── assets
        │   ├── css
        │   │   └── font.css
        └── layouts
            └── partials
                ├── article-labels.html
                └── related.html (新規作成)

ネットで探していたら公式の機能で既に用意されていました👉List Related Content

使い方は非常に簡単で公式のサイトからコードをコピー。そして少し変更を加えます。

  • layouts/partials/related.html
{{ $related := .Site.RegularPages.Related . | first 3 }}
{{ with $related }}
<section id=related_link>
<h3>合わせて読む</h3><p></p>
<ul>
	{{ range . }}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
	{{ end }}
</ul>
</section>
{{ end }}
<p></p>
<div align=center>...SNSにもシェアしてみる?</div>
  • layouts/partials/article-labels.html
{{- partial "related.html" . -}}
{{- partial "share.html" . -}}
{{- if or .Params.categories .Params.tags -}}

{{- partial “related.html” . -}}を追加。

  • assets/css/font.css
section#related_link ul, section#related_link ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

section#related_link ul li, section#related_link ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれにからコピーしてきましたのをCSSセレクタ「section#related_link」を加えてます。

CSSセレクタを使用しないと、意図しないリストにも上記のCSSが適用されてしまいます。

完成品

結構良いんじゃーないですか。 合わせて読むの例

...SNSにもシェアしてみる?
サーバレスブログhugohugo-custom
(C) 2020, All Rights Reserved.

AWSのコストをSlackに通知する【Lambda - (1)IAM作成編】

「hugo/notepadium」にSNSシェアボタンを追加する