Hugoにシェアボタンを追加する

Posted by utimukat55 on Tuesday, August 6, 2019

TOC

やること

よくある「Twitterでシェア」を実現します。Hugoでのやり方は以下のURLを参考にしました。

Hugoで作ったサイトにシェアボタンを足した | AABrain

読みながら…うむ…なるほど…大雑把に以下の事をやればよさそうという事で、手順をなぞります。

  • シェアボタン部分のHTMLを作成
  • シェアボタン部分のHTMLを読み込む部分を追加
  • シェアボタン部分のCSSを作成
  • シェアボタン部分のCSSを読み込む部分を追加

で、読み込み箇所は例によってthemeごとに違うので、確認しながら進めます。

シェアボタン部分のHTMLを作成

layouts/partials/の下に以下の内容でsharebutton.htmlを作成します。参考URLでの手順との差異は以下です。

  • 参考URLではファイル名がshareとなっていますがすぐわかるようにsharebuttonにしてます
  • Google+は外しました
  • 参考URLではtextパラメータを{{ .Title }}としてましたが「記事名+サイト名」にしたかったので{{ .Title }}%20%7c%20{{ .Site.Title }}にしました1
  • if ne .Params.share falseは悩みましたがなくてもいいかなと思って外してます2
<!-- use Font Awesome -->
<section class="section sns_parent">
  <div class="container sns_section">
      <div class="sns_button twitter">
        <a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}%20%7c%20{{ .Site.Title }}" target="_blank" title="Tweet"><i class="fab fa-twitter"></i></a>
      </div>
      <div class="sns_button hatena">
        <a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}%20%7c%20{{ .Site.Title }}" target="_blank" title="hatena"><i class="fa fa-hatena"></i></i></a>
      </div>
      <div class="sns_button facebook">
        <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}&t={{ .Title }}%20%7c%20{{ .Site.Title }}" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a>
      </div>
      <div class="sns_button pocket">
        <a href="http://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}%20%7c%20{{ .Site.Title }}"" target="_blank" title="pocket"><i class="fab fa-get-pocket"></i></a>
      </div>
  </div>
</section>

シェアボタン部分のHTMLの読み込み

Clean Whiteテーマのlayouts/_defaultの下から記事を書いてると思われるもの…

baseof.htmlとsingle.htmlがあって中身を見てみるとsingle.htmlがそれっぽいので、themesではなく直下にlayouts/_defaultディレクトリを作成し、その下に以下の感じでsingle.htmlを作る。というかこのファイルで記事ページ作ってる事を初めて知る。場所は記事の下に水平線とPREVIOUS POST/NEXT POSTがあるので、その上に追加しています。

diff -u themes/hugo-theme-cleanwhite/layouts/_default/single.html layouts/_default/single.html
--- themes/hugo-theme-cleanwhite/layouts/_default/single.html   2019-08-02 20:02:33.900001000 +0900
+++ layouts/_default/single.html        2019-08-02 20:01:22.211879300 +0900
@@ -63,6 +63,7 @@
                 {{ partial "reward.html" . }}
                 {{ end }}

+                {{ partial "sharebutton" . }}
                 <hr>
                 <ul class="pager">
                     {{ if .PrevInSection }}

シェアボタン部分のCSSの作成

/static/css/sharebutton.cssを作成。例によってファイル名はすぐわかるように変更してます。.google:hoverは削除しています。

.sns_parent {
  text-align: center;
}

.sns_section {
  display: inline-block;
  text-align: left;
}
.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;
}

.twitter:hover a {
  color: #1B95E0;
}

.facebook:hover a {
  color: #3B5999;
}

.instagram:hover a {
  color: #2b5c84;
}

.pocket:hover a {
  color: #EE4056;
}

.hatena:hover a {
  color: #4BA3D9;
}

.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}

シェアボタン部分のCSSの読み込み

これもテーマごとに読み込み場所が異なるという事ですがWebフォント対応する時にlayouts/partials/head.htmlを作ったので同じようにCSS読みこみを追加。

diff -u head.html.org head.html
--- head.html.org       2019-08-02 19:42:44.593122400 +0900
+++ head.html   2019-08-02 19:44:33.942715500 +0900
@@ -66,6 +66,12 @@
     <!-- Koruri font CSS -->
     <link rel="stylesheet" href="{{ "css/koruri.css" | relURL }}">

+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
+
+    <!-- Share Button CSS -->
+    <link rel="stylesheet" href="{{ "css/sharebutton.css" | relURL }}">
+
     <!-- Custom Fonts -->
     <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <!--

補足事項

シェアボタン自体はちゃんと追加されたけど幅が狭いと中央寄せできているのに幅が広いと左寄せになるとかいうよくわからない状態…themes/hugo-theme-cleanwhite/layouts/partialsの下のfooter.htmlを見た限りだと一番下のシェアボタンと違うのかどうかよくわからない…


  1. 記事名 半角空白 パイプ 半角空白 サイト名 [return]
  2. frontmatterでshare: falseを書けばそこには表示されなくなるがそのシチュエーションがなさそうなので [return]

comments powered by Disqus