はじめに

Publishで記事にはてなブックマークボタンを表示する方法を紹介します。

環境

OS：macOS Monterey 12.2.1
Xcode：13.3 (13E113)
Swift：5.6
Publish：0.8.0

はてなブックマークボタンのHTMLの把握

まずはてなブックマークボタンのHTMLを把握し、生成後のイメージを掴みます。
詳細は以下の記事をご参照ください。

実装

HTML構築処理の更新

テーマのHTML構築処理を更新し、はてなブックマークボタンを配置します。

Theme+IosOsushi.swift

private struct IosOsushiHTMLFactory<Site: Website>: HTMLFactory {
    func makeItemHTML(for item: Item<Site>, context: PublishingContext<Site>) throws -> HTML {
        HTML(
            .lang(context.site.language),
            .head(for: item, on: context.site),
            .body(
                .script(.async(), .src("https://platform.twitter.com/widgets.js")),
+               .script(.async(), .src("https://b.st-hatena.com/js/bookmark_button.js")),
                .class("item-page"),
                .components {
                    SiteHeader(context: context, selectedSelectionID: item.sectionID)
                    Wrapper {
                        Article {
                            Div {
                                TweetButton(item: item, site: context.site)
+                               HatebButton()
                            }
                            .class("share-buttons")
                            Div(item.content.body).class("content")
                            Span("Tagged with: ")
                            ItemTagList(item: item, site: context.site)
                        }
                    }
                    SiteFooter()
                }
            )
        )
    }

+   private struct HatebButton: Component {
+       var body: Component {
+           Link(url: "https://b.hatena.ne.jp/entry/") {
+               Image(
+                   url: "https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png",
+                   description: "このエントリーをはてなブックマークに追加"
+               )
+               .attribute(named: "width", value: "20")
+               .attribute(named: "height", value: "20")
+               .style("border: none;")
+           }
+           .class("hatena-bookmark-button")
+           .data(named: "hatena-bookmark-layout", value: "basic-label-counter")
+           .data(named: "hatena-bookmark-lang", value: "ja")
+           .attribute(named: "title", value: "このエントリーをはてなブックマークに追加")
+       }
+   }
}

ボタン間にマージンを付けます。
今回は flex と column-gap で実現しました。
小さい画面のために、長い場合は折り返しを発生させ（ flex-wrap: wrap; ）、行間にもマージンを付けています（ row-gap: 5px; ）。

styles.css

.share-buttons {
+   display: flex;
+   flex-wrap: wrap;
+   row-gap: 5px;
+   column-gap: 5px;
    margin-bottom: 10px;
}

.style() や .data(named:value:) など、用意されている属性はそれを使って指定し、用意されていない属性は .attribute(named:value:) で指定するようにしています。

<script> では問題なく動いたので type や charset を指定していません。
もし明示的に指定したほうがいい場合はご指摘いただけると嬉しいです。

publish-cli run を実行し、記事の上部にはてなブックマークボタンが表示されたらOKです。

おわりに

これで記事にはてなブックマークボタンを表示できました！

参考リンク