Publish插件:ColorfulTags
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"
]
)
]
...
)
用法
- 在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文件中标签的样式的总数。
- 更改HTML模版中生成tag列表的代码。例如在Foundation主题中作出如下修改:
将:
1
2
3
...
.class("tag"),
...
改成:
1
2
3
...
.class(tag.colorfiedClass),
...
你可能需要修改多个地方。
如果原本的主题没有给标签指定类(.class("tag")
),请自行添加.class(tag.colorfiedClass)
。
- 在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。