hugo academic でLineの共有機能を追加する。

導入

今回はこの記事の下の共有リンクを追加してみようと思います。

2020年5月10日の記事を書こうとしているタイミングではこんな感じの共有リンクが並べられています。

デフォルトで、メール、Twitter、Facebook、LinkedIn、WhatsApp、Weiboが対応しています、Hugoすごい！

しかし、日本人ならばシェアがダントツで友達などに共有する際に便利な、あのツールの共有リンクが欲しいと思います。

そうですLINEですね、今やメールと通話全てをLINEで済ませてしまっている僕としては、LINEの共有機能はどうしても欲しい、

なので、早速実装してみましょう。

カスタマイズ

ページ共有機能をカスタマイズするにはdata/page_sharer.tomlを編集するみたいですね。

今回は初めてカスタマイズするのでthemes/academic/data/page_sharer.tomlからファイルをコピーします。

mkdir data 
cp themes/academic/data/page_sharer.toml data/page_sharer.toml

data/page_sharer.toml の一例はこんな感じですね

[[buttons]]
  id = "twitter"
  url = "https://twitter.com/intent/tweet?url={url}&text={title}"
  title = "Twitter"
  icon_pack = "fab"
  icon = "twitter"
  enable = true

idとtitleには基本サービス名入れておけばいいと思います、 urlが一番大事でソーシャルapiを調べて、いい感じに共有できるようにするのがポイントですね。

LINEシェアリンク

• URLだけの場合 https://social-plugins.line.me/lineit/share?url={シェアしたいURL}
• テキストも入れたい場合 http://line.me/R/msg/text/?{シェアしたい内容} {url}

アイコン

アイコンはリンクから選びます

fabにlineがあったのでそれを今回は使います。

実装

以上を踏まえるとLINEの共有設定は、以下をdata/page_sharer.tomlに追加すれば大丈夫です！

私はTwitterの次ぐらいにシェアしたいので上から二番目ぐらいに入れましたね。

[[buttons]]
  id = "line"
  url = "http://line.me/R/msg/text/?{title} {url}"
  title = "line"
  icon_pack = "fab"
  icon = "line"
  enable = true

こんな感じになりました！

せっかくなのでLINEで共有してみてね！

まとめ

今回はLINEの共有機能を追加してみました、似たような方法で自分の好きなソーシャルを追加できるのか、やってみてもいいかもですね。