タグアイコン

はい、それがタググループにおける課題です。

はい、さっそく確認しましたが、これは比較的簡単な修正のようです。コア側でフィルタードロップダウンにタグレンダラーを使用する必要があります(作曲画面のタグピッカーと一致させるためです)。すぐに確認します。

「いいね!」 3

#mentioning 時のコンポーザーに表示されるドロップダウンでも、カテゴリレンダラーが置き換えられていることに気づきました。テーマコンポーネントのカテゴリアイコンが表示されていますが、タグレンダラーは他のすべての場所とは異なるレンダラーを使用しており、タグ名の横にタグアイコンが表示されています:

@pmusaraj さん、このレンダラーもテーマコンポーネントによって置き換えられたものを使用することは可能でしょうか?

ありがとうございます。

「いいね!」 2

これの標準化は確かに理にかなっていると思います。@renato さん、これに関する PR の作成に興味はありますか?

(参考までに、フィルター用ドロップダウンに関する PR が 提出済み です。来週中にもマージされる見込みです。)

「いいね!」 4

このコンポーネントを使用して、特定のタグを適用する際にチャット連携がトリガーされることをユーザーに視覚的に知らせる機能を導入し始めました。

このコンポーネントから直接、タグのテキスト色をオプションで変更することは可能でしょうか?フォーラムには、手動で色を設定するオプションがこちらにあります。

素晴らしいコンポーネントを提供してくださり、ありがとうございます!

編集:タグに複数のアイコンを追加できるとさらに便利だと思います。ご検討ありがとうございます!

「いいね!」 1

これはテーマ内の SCSS で対応できますが、コンポーネント自体にこの機能を追加する予定はありません。

また、タグに複数のアイコンを割り当てる機能の追加も予定していません。

「いいね!」 2

@pmusaraj さん、こんにちは。

タググループごとにフォールバックアイコンを設定する回避策は現在ありますか?

すべてのタグのアイコンを変更することは可能でしょうか?箇条書きの代わりに何か別のものにすることはできますか?このコンポーネントは、私の理解が正しければ、リスト形式のタグ専用です。

回答が見つかりました:

.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

SVG アイコン画像は、https://thenounproject.com/ などのサイトから自由にダウンロードできます。

「いいね!」 1

箇条書きタグ + タグの色

箇条書きスタイルのタグを使用しており、

  • 同じ タグアイコンタグテキスト の色にしたい場合
  • タグアイコン が設定されていない場合にのみ箇条書きを表示したい場合

booksscience-fiction のタグに対して私が行った方法を以下に示します。

完成例:

  1. Tag icons コンポーネント(このコンポーネント)の設定

  1. Tag Icons と同期を保つ必要があるセカンダリコンポーネントの設定
    このコンポーネントでは以下の 2 つの処理を行います:
    1. 特定のタグの箇条書きを非表示にする
    2. タグテキストをアイコンと同じ色にする

これを実現するために、新しいテーマコンポーネント Tag Icons extra を作成します。
Common/CSS セクションで:

  1. 以下のミックスインを追加します(1 回だけ必要):
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. 編集したいタグごとに以下のコードを貼り付け、REPLACEMETAG をタグ名に、REPLACEMECOLOR をアイコンと同じ色に置き換えます:
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

「いいね!」 7

バグ報告:投稿のタグセレクタにおいて、アイコンが色付けされていません。

ここでは、アイコンはテキストと同じ色であるべきです(テキストは私の独自のカスタム CSS です):

私の設定:

「いいね!」 2

@pmusaraj 約2週間前に、約50個のタグにアイコンを設定しました。現在タグのリストを確認すると、そのうち5つのアイコンが消えていました… 削除して再入力しても、何も解決しません。50個すべてを削除して再入力すれば直るかもしれませんが、それは手間がかかるので、できれば避けたいところです…

設定のスクリーンショットを投稿して、アイコンが機能しなくなっているタグを指摘していただけますか?

「いいね!」 2

ええと、最後の5件のエントリが動作しないのは不思議ですね。最後の5件のうち1件を、その上の別のエントリと入れ替えてみて、どうなるか確認していただけませんか?設定値がどこかで切り捨てられているように見えるのですが…

「いいね!」 3

余談ですが、表示されなくなったのは「元々」最後の5件ではありませんでした。最初は5件のランダムなものが表示されなくなり、それらを削除して再入力したところ(表示されませんでした)、それが最後の数件だけが表示されないように見える原因です。

その上で、proof-verification タグを削除して先頭に再入力しました。以前はオレンジ色でしたが、現在もオレンジ色のまま正常に表示されています。相変わらずあの5件のみ問題のようです。

タグのアイコン色に、その色変数を使用する方法はありますか?

タグアイコンにはあらゆる色を使用できます。
tagicons
それとも、どのような意味でしょうか?

良い質問ですね。はい、CSS カスタムプロパティを使用できるようです。私にはこれで動作しました:

「いいね!」 2

ああ、私のミスでした。エラーを見つけましたので、今は正常に動作しています。
それが可能だなんて素晴らしいですね!

「いいね!」 1

アイコンに PNG を使用する方法はありますか?私が使用したいすべての画像は PNG 形式で、これらを SVG に変換すると画像が劣化してしまいます。また、変換を行ってもアイコンが読み込まれません。

変換が必要な画像が 400 枚以上あり、1 枚の変換すらうまくいかない状況なので、すでに持っている PNG をそのまま使えると助かります。

このコンポーネントは PNG 画像での使用を想定していません。おそらく、あなたのケースでは CSS をそのまま使うことができます。

「いいね!」 2