shareボタンを導入する

実行したこと

hexoにshareボタンを導入する

1.icarusをforkする

どうせなら変更もgithub上で管理できるようにしておきたいのでicarusをforkする。forkしたものをsubmoduleとして追加。

terminal
git submodule add https://github.com/m0r016/hexo-theme-icarus.git

これでsubmoduleとして追加することができた。

2._config.icarus.ymlを編集する

shareを探す。

_config.icarus.yml
187
188
189
share:
type: sharethis
install_url: ''

とある。
ここに設定の変更方法が書いてあるらしいので見てみる。

addtoanyがシンプルに済みそうだ。addtoanyに変更

_config.icarus.yml
187
188
189
190
share:
+ type: addtoany
- type: sharethis
- install_url: ''

3.share bottonを取得する

AddToAnyで取得できるらしい。
“Get the Share Botton”とあるのでクリック、”Any Website”を選択。
“Choose Services”で適当に選択。
“Get Button Code”で必要なコードを入手することができる。

4.shareボタンの設定

AddToAnyのレイアウトファイルをリポジトリから引っ張ってくる必要があるらしい。これを/themes/icarus/layout/search/addtoany.jsxに書き込み、AddToAnyで入手したコードを貼り付ける。

/themes/icarus/layout/share/addtoany.jsx
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const { Component, Fragment } = require('inferno');
- const { cacheComponent } = require('../../util/cache');
+ const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

...Some code is skipped here...

class AddToAny extends Component {
render() {
return <Fragment>
- <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
- <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
- <a class="a2a_button_facebook"></a>
- <a class="a2a_button_twitter"></a>
- <a class="a2a_button_telegram"></a>
- <a class="a2a_button_whatsapp"></a>
- <a class="a2a_button_reddit"></a>
- </div>
- <script src="https://static.addtoany.com/menu/page.js" defer={true}></script>
+ <!-- AddToAny HTML code you just got... -->
+ <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
+ <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
+ <a class="a2a_button_facebook"></a>
+ <a class="a2a_button_twitter"></a>
+ <a class="a2a_button_email"></a>
+ </div>
+ <script async src="https://static.addtoany.com/menu/page.js"></script>
</Fragment>;
}
}

保存して終了。

5.動作確認

hexo gをして問題ないことを確認、gitにpushする。

きちんと反映されている。

P.S.

下の著作権表記が少し邪魔に感じるのでどこかにまとめておきたいところ

参考

Icarus User Guide - Share Buttons

コメント