Publishでカスタムテーマを作成する方法(Swift)

13576 ワード
publish static_site_generator HTML Swift CSS HTML テキストリンク

「PublishでWebサイトを構築する」は4部構成です。
記事を順番に読み進めると、PublishでWebサイトが構築できるようになります。

第1部: セットアップ&使い方
第2部: カスタムテーマの作成　←イマココ
第3部: プラグインのインストール
第4部: プラグインの作成（未投稿）

はじめに

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をカスタマイズできます。

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サイトを作りましょう

参考リンク