Question

我在博客上使用了大约六个标签。在index.hbs页面上，我在一个小方框中显示每个帖子，标题，标签和作者。我想知道是否有办法为每个标签设置不同的颜色。例如，tag-1为红色，tag-2为蓝色，依此类推。

这是我目前主页上项目的代码 -

<div class="synk-item ff-card shape-rounded bg-white shadow-mild">
    <a href="{{url}}">
        {{#if primary_tag}}
            <p class="post-category category-product no-margin">{{primary_tag.name}}</p>
        {{/if}}
        <h4 class="margin-top-fixed">{{title}}</h3>
    </a>

    <div class="margin-top-tiny vertically-center-items">
        {{#if author.profile_image}}
            <img class="icon-small shape-circular margin-right-fixed show-inline " src="{{author.profile_image}}" alt="{{author.name}}" />
        {{/if}}
        <p class="post-author text-small show-inline">{{author}}</p>
    </div>
</div>

我希望该主要标签具有基于标签的特定颜色。这可能吗？

Answer 1

首先，您需要分配一个班级。所有Ghost资源（标签，帖子，用户）都有一个“slug”属性，用于URL并且对类也有效。

所以你会做这样的事情：

{{#if primary_tag}}
  <p class="post-category category-product no-margin tag-{{primary_tag.slug}}">{{primary_tag.name}}</p>
{{/if}}

然后假设您有一个名为“Foo Bar”的主要标签和一个名为“Buzz”的主要标签，则该标签将为foo-bar＆amp; buzz，类别为tag-foo-bar和tag-buzz。

然后，您可以在CSS中设置适当的规则。一个粗略的例子是：

.tag-foo-bar {
  background: red;
}

.tag-buzz {
  background: blue;
}

标签的单独标签颜色

1 个答案: