HugoにURLとタイトルをコピーするボタンを表示する

clipboard.jsを使って Hugo(hugo-coder)に記事のURLとタイトルをクリップボードにコピーするボタンを追加しました。

参考サイト

以下のサイトを参考にしました。

導入の背景

少し前から当ブログにもシェアボタンを追加しました。
Twitterやはてブはシェアボタンが用意されているのですが、私が愛用しているMastodonには公式が提供しているシェアボタンはありません。
一応、Mastodhareというサービスもあるのですが、証明書の有効期限切れで使えないことがしばしばありまして。。。

記事のタイトルとURLをコピーできるボタンを追加した方が良いのではと思い、重い腰を上げました。

clipboardjsの準備

クリップボードへのコピーを実現するためにclipboard.jsを使います。
テーマの layouts/_default/baseof.html を開き、 </body> タグの直前に以下を記載します。

1
2
3
4


<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
    new ClipboardJS('.share-url');
</script>

ボタンの設置

layouts/partials/sharebutton.html というファイルを新規作成し、以下のHTMLを記載します。

1
2
3
4
5


<div class="sns_button link">
    <button title="記事のタイトルとURLをコピー" class="share-url" data-clipboard-text="{{ .Title }} {{ .Permalink }}">
    <i class="fas fa-link"></i>
    </button>
</div>

最後にボタンの見た目を調整します。
Hugoで作ったサイトにシェアボタンを足した | AABrainを参考に、テーマではなくブログ側のCSSファイル static/css/custom.css を編集します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


.share-url{
    display: table-cell;
    width: 44px;
    height: 44px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    background: none;
    background-color: #42464c;
    color:#fff;
}

これにて完成です。