This page looks best with JavaScript enabled

【Hugo】zzoテンプレートに はてブシェアボタンを追加する

 ·   ·  ☕ 2 分で読めます

用意するもの

  • zzoテンプレート
  • 使いたいSVG画像

既存テンプレートに はてブ用の設定コードを追加する

あらかじめzzoのテンプレートはすべてlayouts/にコピーしていたので、それをカスタマイズしていく。
Twitterのシェアボタンを参考にしながら少し書き換える。
名前はとりあえず"hatebu"で統一した。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
...
{{ else if eq (lower .name) "twitter" }}
  <a href="https://twitter.com/intent/tweet?text={{ $ctx.Title }}&url={{ $ctx.Permalink | absLangURL }}{{ with $ctx.Params.tags }}&hashtags={{ delimit . "," }}{{ end }}&via={{ .username | default $ctx.Params.author }}" 
  title="{{ i18n "twitter" | default "Twitter" }}" aria-label="Twitter Share Button" class="donation__item" target="_blank" 
  rel="noreferrer" data-type="share">
    {{ partial "svgs/share/twitter.svg" (dict "width" 35 "height" 35) }}
  </a>
{{ else if eq (lower .name) "hatebu" }}
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ $ctx.Permalink | absLangURL }}&title={{ $ctx.Title }}"
  aria-label="Hatena Share Button" title="{{ i18n "hetebu" | default "はてブ" }}" class="donation__item" target="_blank" 
  rel="noreferrer" data-type="share">
  {{ partial "svgs/share/hatebu.svg" (dict "width" 35 "height" 35) }}
</a>
...
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
...
&[data-name="twitter"] {
  color: white;
  @include on-event {
    background-color: #1da1f2;
  }
}
&[data-name="hatebu"] {
  color: white;
  @include on-event {
    background-color: #00a4de;
  }
}
...

SVG画像の設定

SVG画像はSimple Iconsからダウンロードした。
コピペでディレクトリに入れ、コードを以下のように編集する。

1
<svg data-name="hatebu" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Hatena Bookmark icon</title><path d="M20...(省略)...615z"/></svg>

config/_default/params.tomlの編集

パラメータを渡すとはてブシェアボタンが表示できるように設定できたので、設定ファイルにはてブを追加する。

1
2
3
4
5
6
7
8
9
# possible share name: ["facebook","twitter", "hatebu", "reddit", "linkedin", "tumblr", "weibo", "douban", "line"]
[[share]]
name = "facebook"
username = ""
[[share]]
name = "twitter"
# ↓追加
[[share]]
name = "hatebu"

シェアボタン

完成!

AI SVG 変換 - 画像ファイルをオンラインで変換する

Share on

aiandrox
Written by
aiandrox
今日も楽しく明日も楽しく

目次