Blogger - 给每个标签一个不同的颜色
Blogger - give each label a different color
我正在尝试使 Blogger 中的每个不同标签具有不同的颜色,例如每个爱好标签为红色,每个电影标签为蓝色,但它似乎将每个标签的颜色更改为红色.
这是我目前的代码:
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "hobbies"'>
<style> .post-labels a { color: red; } </style>
</b:if>
</b:loop>
简单的方法是向每个标签添加一个 class
,例如向标签 Movies 添加一个 class .Movies
和 class 将 .Hobbies
命名为标签 爱好 。这样您就可以为 css 中的每个标签设置样式,而不是为每个标签添加代码。
在这种情况下,您所要做的就是将 expr:class='data:label.name'
添加到 <a>
标签,这会将 class 添加到与标签本身同名的每个标签。
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag' expr:class='data:label.name'><data:label.name/></a>
</b:loop>
保持标签的默认 CSS 和 HTML 代码不变,而不是更改它,对每个标签执行此操作:
a[href^="http://www.YOURSITE.com/search/label/CINEMA"] {
color: #colorcode !important;
background: #colorcode !important;
}
你可以看到我已经添加了 Cinema 的整个标签路径。同样,获取所有标签的完整路径,并为每个标签添加不同的颜色规则
例如,再假设一个标签名称是 'Television'。
您可以像这样添加一条规则:
a[href^="http://www.YOURSITE.com/search/label/TELEVISION"] {
color: #colorcode !important;
background: #colorcode !important;
}
颜色和背景可以由您选择。确保 !important 指令保持完整。
我正在尝试使 Blogger 中的每个不同标签具有不同的颜色,例如每个爱好标签为红色,每个电影标签为蓝色,但它似乎将每个标签的颜色更改为红色.
这是我目前的代码:
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "hobbies"'>
<style> .post-labels a { color: red; } </style>
</b:if>
</b:loop>
简单的方法是向每个标签添加一个 class
,例如向标签 Movies 添加一个 class .Movies
和 class 将 .Hobbies
命名为标签 爱好 。这样您就可以为 css 中的每个标签设置样式,而不是为每个标签添加代码。
在这种情况下,您所要做的就是将 expr:class='data:label.name'
添加到 <a>
标签,这会将 class 添加到与标签本身同名的每个标签。
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag' expr:class='data:label.name'><data:label.name/></a>
</b:loop>
保持标签的默认 CSS 和 HTML 代码不变,而不是更改它,对每个标签执行此操作:
a[href^="http://www.YOURSITE.com/search/label/CINEMA"] {
color: #colorcode !important;
background: #colorcode !important;
}
你可以看到我已经添加了 Cinema 的整个标签路径。同样,获取所有标签的完整路径,并为每个标签添加不同的颜色规则
例如,再假设一个标签名称是 'Television'。
您可以像这样添加一条规则:
a[href^="http://www.YOURSITE.com/search/label/TELEVISION"] {
color: #colorcode !important;
background: #colorcode !important;
}
颜色和背景可以由您选择。确保 !important 指令保持完整。