Publish插件：ColorfulTags

如果Publish网站中所有的标签都是同一个样式的话就太无聊了。所以我写了一个插件来自动给标签添加不同的css类，这样就可以给标签自定义不同的样式。

一个为Publish开发的给标签添加不同颜色的插件。

安装

在Swift包中添加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中添加.colorfulTags()。注意必须添加在处理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),
    ...
])

这个插件需要3个参数：

• defaultClass: String HTML中标签的默认类名。在Foundation主题中，标签的类名是"tag"。
• variantPrefix: String CSS中标签类的类别的前缀。在上面的例子中，生成的类名是variant-0，variant-1等。
• numberOfVariants: Int CSS文件中标签的样式的总数。

1. 更改HTML模版中生成tag列表的代码。例如在Foundation主题中作出如下修改：

将：

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

改成：

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

你可能需要修改多个地方。

如果原本的主题没有给标签指定类（.class("tag")），请自行添加.class(tag.colorfiedClass)。

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。

致谢

感谢John Sundell (@johnsundell)开发了Publish。