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

开发
1

如何为类别相同的元素添加自定义文本，例如，如果我想在 .category-logo.aspect-image img 下方添加一些文本，它会为所有类别添加自定义文本，如何为每个类别图像下方添加唯一的文本？我尝试为每个类别添加新类，然后使用 class::after 添加文本，这在页面每次重新加载时都可以正常工作，但只会在每次重新加载后显示。

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $(function() {
      var categories = [
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "SOME TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
          logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "SOME TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        // Add more objects for other categories
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "SOME TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
         logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "SOME TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
        logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "SOME TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
        {
      logoUrl: "/uploads/default/original/1X/4a4fcfc",
          line1: "SOME TEXT",
          line2: "<a href='https://EXAMPLE.com' style='color: #646464;'>WWW.ATALANTA.COM</a>"
        },
      ];

      $(".category-heading").each(function(index) {
        var category = categories[index];
        var $logoElement = $(this).find(".category-logo img");
        var $descriptionElement = $("<p>")
          .html(category.line1 + "<br>" + category.line2)
          .addClass("custom99"); // Add your custom class name here

        $logoElement.after($descriptionElement);
      });
    });
  });
</script>
2 个赞
2

您好 Pushpender！

使用 SCSS 可以实现此功能：

$categories: 13 12;
$labels: "第一个标签" "第二个标签";

@each $category, $label in zip($categories, $labels) {
  .category-title-link[href$="/#{$category}"] .category-logo.aspect-image:after {
    display: block;
    content: $label;
  }
}

请尝试此代码，并告诉我它是否符合您的要求。
我建议使用 ID 来标识类别，因为它们的 slug 可能会更改。但是，ID 将保持不变。
您可以在 CSS 中添加注释，写下哪个类别 ID 与哪个类别名称相关联。

3 个赞
3

仍然无法正常工作

  1. 分类 slug 是 /c/staff/3
  2. 图片 URL 是 /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png
  3. 我想在每个分类（共 7 个分类）图片下方添加自定义文本，如下所示
    image
    image1307×330 28.6 KB
4

在我的测试实例上看起来是这样的：

image
image1232×981 114 KB

这就是您想达到的效果吗？

如果是这样，这些信息都是无关紧要的，除了 slug 旁边的 category ID。

5

这是不同的页面。我想在类别页面中添加文本，就像您在论坛上点击“常规”类别时会看到主题页面一样，我们在顶部有类别图片和描述。我正在使用 Air 主题

从主页

image
image1343×602 64.5 KB

到类别页面内部，这是我需要在类别图片下方添加文本的位置

image
image1512×808 66.3 KB

6

哦，我明白了。 :slight_smile:

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

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

$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
image1136×638 79.5 KB

image
image1130×623 62.2 KB

2 个赞
7

运行得很棒，非常感谢您的支持。我尝试了从 CSS 到 JavaScript 的所有方法，还有一个问题：我想添加 2 行，如何添加换行符或在第一行文字下方添加文字

自然！
纯天然！

1 个赞
8

我更新了我的答案以添加此信息。

我还添加了.category-heading到选择器中，以防止子类别在图像下方具有相同的文本，并从图像容器中删除了max-height，因为它可能会隐藏图像下方的文本。

1 个赞
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.