标签的单独标签颜色

Question

我在我的博客上使用了大约六个标签。在 index.hbs 页面上，我将每个 post 显示在一个小框中，并带有标题、标签和作者。我想知道是否有办法为每个标签设置不同颜色的样式。例如，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

首先，您需要分配 class。所有 Ghost 资源（标签、帖子、用户）都有一个 "slug" 属性，用于 URL 并且对 classes 也有效。

所以你会做这样的事情：

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

然后假设您有一个名为 "Foo Bar" 的主标签和一个名为 "Buzz" 的主标签，这些 slug 将是 foo-bar 和 buzz，而 class es 将是 tag-foo-bar 和 tag-buzz.

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

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

.tag-buzz {
  background: blue;
}

标签的单独标签颜色

Individual tag colour for tags

ghost-blog