#Hugo | #CSS | #Hugo theme | #Share icon

August 12, 2018

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

今使っているThemeにシェアボタンが付いていなかったので自分で作ってみました。
Hugoがサイトをbuildすると、rootディレクトリとTheme内のディレクトリは統合されます。 そのためrootディレクトリに、Theme内と同じディレクトリ名でファイルを追加するとThemeのファイルに影響を与えずに読み込めるようになります。

例)

├── README.md
├── archetypes
├── config.toml
├── content
├── ...
│
├── layouts
├── static
└── themes
    └── HugoTheme
        ├── layouts
        └── static

今回最終的に作るShare iconの完成形はこのようになります。 各SNSで用意されているhtml, jsのコードを並べる方法もありますが、今回はブログの雰囲気を壊したくなかったので、 独自でcssを書いて作成しました。

share_icons

元々白黒でマウスhoverで色を付けます。

HTML

SNSアイコンにはFont awesome を使います。
Hugoは好きな単位でHTMLをmodule化出来るので、シェアボタンだけのmoduleを /layouts/partials/share.html として以下のHTMLを追加しました。

{{ if ne .Params.share false}}
<!-- use font awsome -->
<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 }}" 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 }}" 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 }}" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a>
      </div>
      <div class="sns_button google">
        <a href="https://plus.google.com/share?url={{ .Permalink }}" target="_blank" title="google+"><i class="fab fa-google-plus"></i></a>
      </div>
      <div class="sns_button pocket">
        <a href="http://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="pocket"><i class="fab fa-get-pocket"></i></a>
      </div>
  </div>
</section>
{{ end }}

ifの部分はaboutページ等、Shareボタンが不要なページ用に追加しました。
.Params.share は記事のmark downのトップに設定として追記することでfalseの場合はShareボタンを表示しないようにします。 デフォルトfalseにしたのは、今まで記事にshareの設定項目を追加していなかったので書いていない場合はshare trueにしたいためです。 今後の記事を作成する時はデフォルトにshareの項目を追加したい場合は、/archetypes/default.md に share: true を追記しておきます。

各SNSのlinkを設定します。
Hugoは {{ .Permalink }} で記事のurl, {{ .Title }} で記事のタイトルを取得出来るので、各SNSサイトに適したlinkを作成します。

  • Twitter
    http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}

  • はてな
    http://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}

  • Facebook
    http://www.facebook.com/sharer.php?u={{ .Permalink }}&t={{ .Title }}

  • Google+
    https://plus.google.com/share?url={{ .Permalink }}

  • Pocket
    http://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}

HTML部分の読み込み

上記の部分はThemeに依らないパーツなので、rootのディレクトリにpartialとして足せば問題が無かったのですが、 読み込み部分は使用しているThemeに依存してしまうので、themelのlayoutに直接追加する必要があります。
ただし、慣例として theme/[theme name]/layouts/_default/[***].html このように layouts/_default 以下に定義されている可能性が高いです。
記事部分が定義されているHTMLがわかったら、以下の一文をpartialとして読み込ませます。

{{ partial "share" . }}

CSS

ご存知の通り、HTMLの読み込みだけでは 無装飾なアイコンリストなのでCSSを定義して見た目を良い感じにします。
ここもTheme依存になってしまいます。Themeによっては config.toml にcssを書くと読み込んでくれるoptionが付いていたりするのですが、付いてないことの方が多いかもしれません。
CSSは慣例として /static/css/ 配下に定義されることが多いです。
今回はrootの /static/css/custom.css に定義しました。

.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;
}

.google:hover a {
  color: #dd4b39;
}

.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でセンタリングする方法はいくつかあるのですが、最初はこのようにしてセンタリングしていました。

.sns_parent {
  position: relative;
}
 .sns_section {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

しかし、この方法だとtranslateしているのでモバイル端末のように画面サイズが小さい端末の場合にアイコンの改行がキレイではないので、 今回は子のdivをinline blockにしてセンタリングしました。
最近のCSSのお作法には詳しくないので、もしかしたらもっといい方法があるかもしれません。

もう一つポイントとして、日本ではよく使われている はてなブックマークのボタンを独自に作っています。
何故かと言うと、はてなブックマークのアイコンはfont awesomeには定義されていません。そのため、似たようなフォントを使って代用しています。

CSSの読み込み

CSSの読み込み定義をHTMLを生成している部分に追加してください。定義箇所はThemeに依ります。

  • Font awesome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
  • Your css
<link rel="stylesheet" href="https://aakira.app/css/custom.css">

まとめ

もしかすると、CSSの定義によっては上書きされて上手く表示されない可能性がありますので、各自ThemeのCSSを確認してみてください。
独自のシェアアイコンの弱点はモバイルはDeep linkで良い感じになるのですが、PCブラウザで押した場合に新しいurlとして開いてしまう事です。 これはtarget=_blank で上手く誤魔かしていますが、使い勝手はあまり良く無さそうです。

CSSを5年ぶりくらいに書きましたｗ 普段はAndroidのxmlでlayoutを組んでいるのでCSSの面倒さを感じましたｗ
ChromeのDeveloper Toolの偉大さを思い知ります。これ無かった時代はDream weaverとかで頑張ってたな＼(^o^)／

Similar articles:

© AAkira 2023