shareボタンを導入する

実行したこと

hexo に share ボタンを導入する

• 1.icarus を fork する
• 2._config.icarus.yml を編集する
• 3.share botton を取得する
• 4.share ボタンの設定
• 5.動作確認
• P.S.
• 参考

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

share:
type: sharethis
install_url: ''

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

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

_config.icarus.yml

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

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