（追記）
ZZOのデフォルトで"hatena"という名前ではてブが追加されました。他のシェアボタンを付けたい場合は同様にしてください。
用意するもの
既存テンプレートに はてブ用の設定コードを追加する
あらかじめ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 変換 - 画像ファイルをオンラインで変換する
