Blogger - 给每个标签一个不同的颜色答案

【问题标题】：Blogger - give each label a different colorBlogger - 给每个标签一个不同的颜色
【发布时间】：2016-06-08 01:14:32
【问题描述】：

我正在尝试使 Blogger 中的每个不同标签具有不同的颜色，例如每个爱好标签为红色，每个电影标签为蓝色，但似乎将每个标签的颜色更改为红色。

这是我当前的代码：

<b:loop values='data:post.labels' var='label'> 
  <b:if cond='data:label.name == &quot;hobbies&quot;'>
    <style> .post-labels a { color: red; } </style> 
  </b:if> 
</b:loop>

【问题讨论】：

标签： conditional blogger

【解决方案1】：

简单的方法是将class 添加到每个标签，例如添加一个类.Movies 到标签电影和类名为.Hobbies 到标签爱好。这样您就可以从 css 中为每个标签设置样式，而不是为每个标签添加代码。

在这种情况下，您所要做的就是将expr:class='data:label.name' 添加到<a> 标签，这将为每个标签添加与标签本身同名的类。

<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>

【讨论】：

【解决方案2】：

保持标签的默认 CSS 和 HTML 代码不变，而不是更改它，而是为每个标签执行此操作：

a[href^="http://www.YOURSITE.com/search/label/CINEMA"] {
color: #colorcode !important;
background: #colorcode !important;
}

你可以看到我已经为 Cinema 添加了整个标签路径。同样，取所有标签的完整路径，并为每个标签添加不同的颜色规则

例如，假设还有一个标签名称是“电视”。

您可以像这样再添加一条规则：

a[href^="http://www.YOURSITE.com/search/label/TELEVISION"] {
color: #colorcode !important;
background: #colorcode !important;
}

颜色和背景可以由您选择。确保保持 !important 指令不变。

【讨论】：