Publishを使う時に、全てのタグが同じ色、様式ならつまらないでしょう。そこで自動的にタグにclassを振り分け、色を付けるプラグインを開発しました。

PublishのためのColorfulTagsプラグイン

Publishのタグに色をつけるプラグイン。

インストール

Swift PackageにColorfulTagsPublishPluginを追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
let package = Package(
    ...
    dependencies: [
    .package(url: "https://github.com/Ze0nC/ColorfulTagsPublishPlugin", .branch("master"))
    ],
    targets: [
        .target(
            ...
            dependencies: [
                ...
                "ColorfulTagsPublishPlugin"
            ]
        )
    ]
    ...
)

使い方

1. Build pipelineにプラグインを追加（Markdownファイルの追加の後、HTMLファイル生成の前）。

1
2
3
4
5
6
7
8
9
import ColorfulTagsPublishPlugin
...
try MyWebsite().publish(using: [
    .addMarkdownFiles(),
    .installPlugin(.colorfulTags(defaultClass: "tag", variantPrefix: "variant", numberOfVariants: 8)),
    ...
    .generateHTML(withTheme: .foundation),
    ...
])

このプラグインは三つのパラメーターが必要：

• defaultClass: String HTMLのデフォルトのタグのclass。Foundationテーマでは"tag"です。
• variantPrefix: String CSSファイルのタグの種類のプレフィックス。上の例では、生成されたclassはvariant-0、variant-1などになります。
• numberOfVariants: Int CSSファイルにあるタグの種類の総数です。

1. HTMLを生成するところのコードを変更。Foundatinoテーマでは、

1
2
3
    ...
    .class("tag"),
    ...

を

1
2
3
    ...
    .class(tag.colorfiedClass),
    ...

に変更します。

複数の場所の変更が必要かもしれません。

テーマにclassを.class("tag")で指定されてない場合は、自分で.class(tag.colorfiedClass)でclassを指定してください。

1. CSSファイルに違うタグのbackground-colorなどの様式を指定します。例：

1
2
3
4
5
6
7
8
.variant-0 {background-color: #66293c;}
.variant-1 {background-color: #913e37;}
.variant-2 {background-color: #ca7618;}
.variant-3 {background-color: #a38138;}
.variant-4 {background-color: #2f7176;}
.variant-5 {background-color: #246089;}
.variant-6 {background-color: #498840;}
.variant-7 {background-color: #484781;}

以上の例では、variantPrefixは"variant"、そしてnumberOfVariantsは8です。

Acknowledgement

John Sundell (@johnsundell)さんにPublishの開発を感謝します。