Hugoで小説サイトを作成する その3
ページャーを修正する。
前ページ、次ページのリンクのことですが、テーマのデモとなんか違う! リンクの記事タイトルの上に表示されるはずの、PREVIOUS、NEXTが表示されてなくて、非常にかっこ悪い。
テーマのpartialsにあるpager.yamlをコピーし、ルートディレクトリにあるlayoutsフォルダにpartialsフォルダを作成し、保存する。
Mainroadは多言語に対応しているので、i18nフォルダの中にたくさんの言語のファイルがあり、その中に日本語のja.yamlがあります。config.tomlでlanguageCode = “ja"と指定しておけば、表示されますので、この操作は不要です。でも、英語にしたいなーという場合は、ja.yaml中で該当する項目を変更し、ルートディレクトリにi18nフォルダを作成し、その中にカスタマイズしたja.yamlを入れてください。
ソーシャルアイコンをつける
あった方が最近のサイトらしいのでとりあえずつけます。
こちらのサイト様を参考にしました。
AABrain様 Hugoで作ったサイトにシェアボタンを足した
kazamori様 HugoでSNS 向けのシェアボタンを追加する
アイコンを作るのがやっぱり面倒くさかったので、https://fontawesome.com/ に登録し、アイコンを探し、選択するとhtml"がコピーできるようになっているので、それで share.html"を作成し、layout/partialsフォルダに保存します。
├─layouts
│ ├─partials
│ │ │─pager.html"
│ │ └─share.html"
{{ if ne .Params.share false}}
<!-- use font awsome -->
<section class="section sns_parent">
<div class="sns_section">
<div class="sns_button clap">
<a href="https://soyosoyo.work/clap/index.html"><i class="fa-solid fa-hands-clapping"></i></a>
</div>
<div class="sns_button twitter">
<a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank" title="Tweet"><i class="fa-brands fa-twitter"></i></a>
</div>
<div class="sns_button hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="hatena"><i class="fa fa-hatena"></i></a>
</div>
<div class="sns_button facebook">
<a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="_blank" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
</div>
<div class="sns_button google">
<a href="https://plus.google.com/share?url={{ .Permalink }}" target="_blank" title="google+"><i class="fa-brands fa-google-plus-g"></i></a>
</div>
<div class="sns_button pocket">
<a href="http://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="pocket"><i class="fa-brands fa-get-pocket"></i></a>
</div>
</div>
</section>
{{ end }}
そして、ルートディレクトリのstatic/cssにshare.cssを作成して保存します。
├─static
│ ├─css
│ │ └─share.css
│ └─img
.sns_parent {
text-align: center;
}
.sns_section {
display: inline-block;
}
.sns_button {
float: left;
box-shadow: inset 0 0 0 2px #42464c;
border-radius: 100%;
-moz-transition: all 280ms ease;
-o-transition: all 280ms ease;
-webkit-transition: all 280ms ease;
transition: all 280ms ease;
}
.sns_button a {
display: table-cell;
width: 44px;
height: 44px;
color: #42464c;
text-align: center;
vertical-align: middle;
-moz-transition: all 280ms ease;
-o-transition: all 280ms ease;
-webkit-transition: all 280ms ease;
transition: all 280ms ease;
}
.sns_button i {
font-size: 20px;
vertical-align: middle;
}
.sns_button:hover {
box-shadow: inset 0 0 0 22px #eaeaea;
}
.sns_button + .sns_button {
margin: 0 0 0 12px;
}
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold
}
次にbaseof.html"をルートディレクトリのlayout/̠_defaultフォルダにコピーし、
├─layouts
│ ├─blog
│ ├─others
│ ├─partials
│ └─_default
│ └_baseof.html"
<link rel="stylesheet" href="/css/share.css"> #←付け加える
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css"> #←付け加える
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="stylesheet" {{ printf `href="%s"` $googleFontsLink | safehtml"Attr }}>
#をつけた2行を書き足して反映させます。
最後に、ソーシャルボタンを付け加えたい投稿のファイルを開き、(例:ai/ai001.md)
title: "愛だと信じていた 第01話"
author: "杏"
type: "post"
share: true #←付け加える
images:
- "img/back.jpg"
date: 2019-10-18T10:47:01+00:00
url: "s/ai/ai001.html"
categories:
- 愛だと信じていた
share: true を付け加えて保存します。
なんらかの反応をもらえると嬉しいものです。気兼ねなく利用していただきたいです。 拍手phpは、Hugoとは関係ないので割愛します。
続きます。