Индивидуальный цвет тегов для тегов

У меня есть около шести тегов, которые я использую в своем блоге. На странице index.hbs я отображаю каждый пост в маленьком поле с заголовком, тегом и автором. Мне было интересно, есть ли способ стилизовать каждый из этих тегов разным цветом. Например, тег-1 будет красным, тег-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>

Я бы хотел, чтобы этот основной тег имел определенный цвет на основе тега. Это возможно?


ghost-blog
person Sujan Sundareswaran    schedule 11.02.2018    source источник
comment
Это возможно, но на самом деле здесь недостаточно вопроса, чтобы дать четкий ответ. Можете ли вы поделиться некоторым кодом, который у вас есть для вывода тегов, и оттуда будет намного легче дать предложение.   -  person ErisDS    schedule 14.02.2018
comment
@ErisDS Добавлен образец кода.   -  person Sujan Sundareswaran    schedule 15.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, вам нужно назначить класс. Все ресурсы 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 и buzz, а классы будут tag-foo-bar и tag-buzz.

Затем в вашем CSS вы можете установить соответствующие правила. Грубый пример:

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

.tag-buzz {
  background: blue;
}
person ErisDS    schedule 15.02.2018
comment
Оно работает! Спасибо, это именно то, что я ищу. - person Sujan Sundareswaran; 16.02.2018