各カテゴリ画像の下にユニークなテキストを追加する方法は？

開発
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: "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は常に同じままです。
どのカテゴリIDがどのカテゴリ名に関連しているかを書き留めるために、CSSにコメントを追加できます。

「いいね！」 3
3

まだ機能していません

  1. カテゴリスラッグは /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

これが達成したいことですか？

もしそうであれば、この情報は、スラッグの隣にあるカテゴリIDを除いては無関係です。

5

これは別のページです。カテゴリページ内にテキストを追加したいです。「フォーラムの[General]カテゴリをクリックすると、カテゴリ画像と説明が上部にあるトピックページが表示されます。Airテーマを使用しています。

ホームページから

image
image1343×602 64.5 KB

カテゴリページ内では、ここにカテゴリ画像の下に追加したいです。

image
image1512×808 66.3 KB

6

なるほど。 :slight_smile:

カテゴリのスラッグを使用して、純粋なSCSSソリューションを引き続き使用できます。

:information_source: テキストに改行を追加したい場合は、テキスト内に \\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;
    }
  }
}

image
image1136×638 79.5 KB

image
image1130×623 62.2 KB

「いいね！」 2
7

素晴らしいです。サポートに感謝します。CSSからJavaScriptまで、あらゆることを試しました。もう1つ質問があります。2行追加したいのですが、改行を追加したり、最初のテキストの下にテキストを追加したりするにはどうすればよいですか？

すべて自然!!
すべて自然!!2

「いいね！」 1
8

回答を更新して、この情報を追加しました。

また、サブカテゴリの画像の下に同じテキストが表示されないようにセレクターに.category-headingを追加し、画像コンテナの最大高さを削除しました。これにより、画像の下のテキストが隠れる可能性があるためです。

「いいね！」 1
9

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