# 如何在每个类别图片下方添加独特的文本？

**URL:** <https://meta.discourse.org/t/how-to-add-unique-text-below-each-category-image/265792>\
**Category:** Development\
**Created:** [2023年五月22日 11:15 UTC](https://meta.discourse.org/t/how-to-add-unique-text-below-each-category-image/265792 "2023-05-22T11:15:04Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年五月22日 13:21 UTC](https://meta.discourse.org/t/how-to-add-unique-text-below-each-category-image/265792/6 "2023-05-22T13:21:54Z")

</div>

哦，我明白了。 🙂

你仍然可以使用纯 SCSS 解决方案，方法是使用类别 slug：

ℹ 如果你想在文本中添加换行符，请在文本中放入 `\\A`，并在 `:after` 伪元素属性中添加 `white-space: pre;`。

```scss
$categories: "nature", "general";
$labels: "All natural!\A Naturaaal!" "Another text";

@each $category, $label in zip($categories, $labels) {
  body.category-#{$category} .category-heading .category-logo.aspect-image {
    max-height: none;
    &:after {
      display: block;
      content: $label;
      font-size: 1.25em;
      color: var(--primary-700);
      white-space: pre;
      text-align: center;
    }
  }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/1/9/51974588af5f074c1aaaa8641b77c19230bcdeec.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/e/a/8ea54ba1c1ee6755a277fd50633a27f0aef66e23.png)

---

_[View the full topic](https://meta.discourse.org/t/how-to-add-unique-text-below-each-category-image/265792)._