각 카테고리 이미지 아래 고유한 텍스트를 추가하는 방법?

[pinder99 (Raza shield)]

카테고리마다 클래스가 동일한 경우, 각 카테고리별로 고유한 텍스트를 추가하는 방법은 무엇인가요? 예를 들어 .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>"
        },
        // 다른 카테고리를 위해 더 많은 객체를 추가합니다
        {
         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"); // 여기에 원하는 사용자 정의 클래스 이름을 추가합니다

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

[Canapin (Coin-coin le Canapin)]

푸펜더님, 안녕하세요!

SCSS를 사용하면 가능합니다:

$categories: 13 12;
$labels: "first label" "second label";

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

위 코드를 시도해 보시고 원하는 동작을 하는지 알려주세요.
슬러그는 변경될 수 있으므로 카테고리를 식별하는 데에는 ID를 사용하는 것을 권장합니다. 반면, ID는 항상 동일하게 유지됩니다.
CSS에 주석을 추가하여 어떤 카테고리 ID가 어떤 카테고리 이름과 관련이 있는지 기록해 두실 수 있습니다.

[pinder99 (Raza shield)]

아직도 작동하지 않습니다

1. 카테고리 슬러그는 /c/staff/3입니다
2. 이미지 URL은 /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png입니다
3. 아래 이미지처럼 각 카테고리(총 7개) 이미지 아래에 사용자 정의 텍스트를 추가하고 싶습니다
   
   

[Canapin (Coin-coin le Canapin)]

테스트 인스턴스에서 이렇게 보입니다:

원하시는 것이 이런 것인가요?

이것이 맞다면, 슬러그 옆에 있는 카테고리 ID를 제외하고 이 정보는 관련이 없습니다.

@pinder99

• 카테고리 슬러그는 /c/staff/3입니다
• 이미지 URL은 /uploads/default/original/1X/8dd2540613b1bec241a29373562a06edab93ec25.png입니다

[pinder99 (Raza shield)]

이것은 다른 페이지입니다. 포럼에서 ‘일반’ 카테고리를 클릭하면 카테고리 이미지와 설명이 상단에 표시되는 주제 페이지가 보이는데, 저는 이 카테고리 페이지에 텍스트를 추가하고 싶습니다. 현재 air 테마를 사용 중입니다.

홈페이지에서

카테고리 내부 페이지로 이동하면, 카테고리 이미지 아래에 텍스트를 추가해야 하는 곳은 바로 여기입니다.

[Canapin (Coin-coin le Canapin)]

아, 그렇군요.

카테고리 슬러그를 사용하여 순수 SCSS 솔루션을 계속 사용할 수 있습니다:

텍스트에 줄바꿈을 추가하려면 텍스트 안에 \A를 넣고, :after 의사 요소 속성에 white-space: pre;를 추가하세요.

$categories: "nature", "general";
$labels: "All natural!\ANaturaaal!" "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;
    }
  }
}

[pinder99 (Raza shield)]

정말 잘 작동하고 있습니다. 지원해 주셔서 진심으로 감사드립니다. CSS부터 JavaScript까지 모든 방법을 시도해 보았어요. 마지막으로 한 가지 더 질문이 있는데, 두 줄을 추가하려면 줄바꿈을 어떻게 하거나 첫 번째 텍스트 아래에 텍스트를 추가해야 하는지 궁금합니다.

All natural!!
ALL NATURAL!!2

[Canapin (Coin-coin le Canapin)]

이 정보를 추가하도록 답변을 업데이트했습니다.

또한 선택자에 .category-heading을 추가하여 하위 카테고리가 이미지 아래에 동일한 텍스트를 표시하는 것을 방지하고, 이미지 컨테이너의 max-height를 제거했습니다. 이렇게 하면 이미지 아래에 있는 텍스트가 숨겨질 수 있기 때문입니다.