はじめに

Publishでテーマをカスタマイズする方法を紹介します。

環境

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

既存テーマの複製

0からテーマを作成するのは手間なので、本記事では foundation テーマを複製して作成します。
複製時はライセンスに遵守するよう気をつけてください。

以下から foundation テーマのSwiftファイルとCSSをダウンロードします。

Swiftファイルは Sources/{パッケージ名} フォルダ以下に格納します。
CSSは Resources フォルダ以下に格納します。

私は uhooi というテーマを作成するので、ファイル名とフォルダ構成は以下としました。

$ tree
.
├── Resources
│   └── UhooiTheme
│       └── styles.css
└── Sources
    └── WebsiteSample
        ├── Theme+Uhooi.swift
        └── main.swift

テーマ名やパスなどを修正します。

Theme+Uhooi.swift

+ import Publish
import Plot

public extension Theme {
-   static var foundation: Self {
+   static var uhooi: Self {
        Theme(
-           htmlFactory: FoundationHTMLFactory(),
-           resourcePaths: ["Resources/FoundationTheme/styles.css"]
+           htmlFactory: UhooiHTMLFactory(),
+           resourcePaths: ["Resources/UhooiTheme/styles.css"]
        )
    }
}

- private struct FoundationHTMLFactory<Site: Website>: HTMLFactory {
+ private struct UhooiHTMLFactory<Site: Website>: HTMLFactory {
    func makeIndexHTML(for index: Index,
                       context: PublishingContext<Site>) throws -> HTML {
        // ...
    }
    // ...
}

作成したテーマを使うように修正します。

main.swift

try WebsiteSample().publish(using: [
    .addMarkdownFiles(),
    .copyResources(),
-   .generateHTML(withTheme: .foundation),
+   .generateHTML(withTheme: .uhooi),
    .generateRSSFeed(including: [.posts]),
    .generateSiteMap(),
    .deploy(using: .gitHub("uhooi/uhooi.github.io", useSSH: false))
])

publish-cli run を実行して問題ないことを確認したら、既存テーマの複製が完了です。

テーマのカスタマイズ

テーマを複製したら、カスタマイズしていきます。

HTMLのカスタマイズ

HTMLは Plot というPublishと同じ作者が提供しているライブラリを使って書きます。
SwiftUIのようなDSLで、HTMLやRSSなどをSwiftを使って型安全に書けます。

試しに簡単な修正をしてみます。
フッターの「RSS feed」を「RSSフィード」に変更します。

Theme+Uhooi.swift

private struct SiteFooter: Component {
    var body: Component {
        Footer {
            Paragraph {
                Text("Generated using ")
                Link("Publish", url: "https://github.com/johnsundell/publish")
            }
            Paragraph {
-               Link("RSS feed", url: "/feed.rss")
+               Link("RSSフィード", url: "/feed.rss")
            }
        }
    }
}

publish-cli run を実行してWebサイトを確認します。

Before	After

ページ下部の文言が変わったことがわかります。

このようにしてHTMLをカスタマイズできます。

Publish.Website に準拠した構造体は context.site でアクセスでき、 url や name 、 description などを取得できます。

main.swift

struct WebsiteSample: Publish.Website {
    // ...
    var url = URL(string: "https://uhooi.github.io")!
    var name = "WebsiteSample"
    var description = "A description of WebsiteSample"
    // ...
}

Theme+Uhooi.swift

private struct UhooiHTMLFactory<Site: Website>: HTMLFactory {
    // ...
    func makeItemHTML(for item: Item<Site>, context: PublishingContext<Site>) throws -> HTML {
        print(context.site.url.absoluteString) // "https://uhooi.github.io"
        print(context.site.name) // "WebsiteSample"
        print(context.site.description) // "A description of WebsiteSample"
        // ...
    }
    // ...
}

これを覚えておくと、Webサイトのカスタマイズの幅が広がります。
他にも context でいろいろな情報へアクセスできるので、詳細は定義を追ってみてください。

CSSのカスタマイズ

CSSのカスタマイズは、そのままCSSを更新するだけです。

試しに背景色を白から青にしてみます。

styles.css

body {
-   background: #fff;
+   background: blue;
    color: #000;
    font-family: Helvetica, Arial;
    text-align: center;
}

publish-cli run を実行してWebサイトを確認します。
ChromeではCSSをキャッシュすることがあるので、更新されない場合はスーパーリロード（Command + Shift + R）すると反映されます。

Before	After

背景色が変わったことがわかります。

このようにしてCSSをカスタマイズできます。

デフォルトだとURLが折り返されないので、修正すると読みやすくなります。

styles.css

.content {
    margin-bottom: 40px;
+   overflow-wrap: break-word;
}

こちらの修正は PR を頂いて対応しました。
本家にも同様のPR を作成しています。

おわりに

これでPublishでカスタムテーマを作成できました！
オリジナルのテーマを作成して自分だけのWebサイトを作りましょう

参考リンク