「PublishでWebサイトを構築する」は6部構成です。
記事を順番に読み進めると、PublishでWebサイトが構築できるようになります。
第1部: セットアップ&使い方
第2部: カスタムテーマの作成 ←イマココ
第3部: プラグインのインストール
第4部: プラグインの作成（未投稿）
第5部: ツイートボタンの表示
第6部: はてなブックマークボタンの表示
はじめに
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
テーマ名やパスなどを修正します。
+ 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 {
// ...
}
// ...
}
作成したテーマを使うように修正します。
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フィード」に変更します。
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 などを取得できます。
struct WebsiteSample: Publish.Website {
// ...
var url = URL(string: "https://uhooi.github.io")!
var name = "WebsiteSample"
var description = "A description of WebsiteSample"
// ...
}
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を更新するだけです。
試しに背景色を白から青にしてみます。
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が折り返されないので、修正すると読みやすくなります。
.content {
margin-bottom: 40px;
+ overflow-wrap: break-word;
}
こちらの修正は PR を頂いて対応しました。
本家にも同様のPR を作成しています。
おわりに
これでPublishでカスタムテーマを作成できました！
オリジナルのテーマを作成して自分だけのWebサイトを作りましょう 