Hugoにシェアボタンを追加する

Hugoで利用していたdisqusを辞めてシェアボタンを追加しました。

Disqusについて少しだけ気になった点と、シェアボタンを導入するまでの手順を記しておきます。

将来的にviewが大幅に増えるなどあれば再度コメントフォームを検討するかもしれないですが、おそらく無いでしょう。。

Disqusをやめた理由

そこまで大した理由でも無いのですが、これらの理由からDisqusの導入をやめました。

• コメントするためにログインが必要
• 広告が表示される
• shareボタンでの投稿がdisqusの短縮URLになる
• 読み込みが遅い

コメントするためにログインが必要

これはお国柄といいますか、ログインしてコメントがされる可能性が限りなく低いと考えました。

TwitterでShareの方がまだ可能性があると思い、この辺りはシェアボタンで達成できると判断してます。

広告が表示される

localでのプレビューだとDisqusが無効になるので気がつきませんでしたが、Disqusのコメント欄の上下に広告が入る様になりました。

Netlifyの無料枠を使っているので、少しでもBandwidthを削減したいという理由もあります。 そもそもNetlifyのBandwidthのカウントに入るかどうか、曖昧なのですが。

（とはいえ無料枠は100gbなので全く気にするレベルでは無いです）

shareボタンでの投稿がdisqusの短縮URLになる

これが導入をやめる一番大きな理由です。

shareされる時にブログタイトルが入らないため、エゴサーチのしやすさを考えて独自のshareボタンを配置しようと決めました。

Disqus上での website Name がshare時に利用されるらしく、 ブログ名とDisqusの設定を統一しておけば良いのですが。。

将来的にブログタイトルを変更する際にメンテナンス漏れする懸念もありました。

読み込みが遅い

こちらについては特に言及はしません。

独自シェアボタンの組み込み

こちらを参考に独自のシェアボタンを配置しました。

html作成

• share時のtextパラメータにブログ名を追加
• デフォルトで自分のアカウントにリプライを飛ばす様に設定（viaの追加）

{{ if ne .Params.share false}}
<!-- use font awsome -->
<section class="section sns_parent">
  <div class="sns_section">
      <div class="sns_button twitter">
        <a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}%20%7c%20{{ .Site.Title }}&via=chi_mi_y" target="_blank" title="Tweet"><i class="fab fa-twitter"></i></a>
      </div>
...

この辺りはTwitterのweb intentを参考に、パラメータを追加しています。

html読み込み

テーマのディレクトリ配下で直接htmlを編集しても良いのですが、 GitHubで変更がある度に追従するのが辛いのでテーマを上書きします。

hugoでは元ファイルと同じ構造のディレクトリ/ファイル名で作成すれば上書きできます。

自分はthemes/にテーマを配置しているので、今回は記事を定義しているファイルをコピーしてそのファイルに追記します。

$ cp -ip themes/Blonde/layouts/post/single.html layouts/post/single.html

$ vim layouts/post/single.html
...
        <aside id="meta">
            {{ with .Params.categories }}
            <div id="categories">
                <span class="icon-folder text-xl mr-1"></span>
                {{ range . }}
                <span
                    class="inline-flex py-2 leading-4 mr-2 mb-2 content-center bg-gray-200 justify-center h-8 px-3 text-blue-500 hover:text-black"><a
                        href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a></span>
                {{ end }}
            </div>
            {{ end }}

            {{ partial "share" . }}
...

css作成

static/css/custom.cssにcssを追記します。

利用しているテーマではデフォルトでcustom.cssを読み込んでいるため、別途読み込ませる必要はありませんでした。

記事のテンプレート修正

今回のhtmlはshareをtrueにすることでシェアボタンを表示しています。

毎回パラメータを追加することを避けるため、 archetypes/default.mdにshare: trueを追記します。

これで、次の記事新規作成時からシェアボタンがデフォルトで有効化されます。