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とは関係ないので割愛します。

続きます。