رموز العلامة

:discourse2: ملخص يسمح أيقونات الوسوم بوجود أيقونة بجانب تسمية الوسم.
:eyeglasses: معاينة معاينة في منشئ مواضيع Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-tag-icons
:open_book: جديد في مواضيع Discourse؟ دليل المبتدئين لاستخدام مواضيع Discourse

تثبيت هذا المكون للموضوع

الميزات

إليك مثال على كيفية ظهور هذا مع تعيين نمط الوسم على الافتراضي (بسيط):

وهكذا يبدو مع تعيين نمط الوسم على box:

الإعدادات

الاسم الوصف
قائمة أيقونات الوسوم أدخل تكوينًا مفصولًا بفواصل للوسوم، بالصيغة “وسم-اسم،أيقونة،لون_الأيقونة”. لون الأيقونة اختياري.
أيقونات SVG قائمة بأيقونات FontAwesome 6 المستخدمة في هذا المكون للموضوع

:discourse2: مُستضاف لدينا؟ تتوفر مكونات المواضيع للاستخدام في خططنا القياسية، والتجارية، والمؤسسية.

79 إعجابًا
Is anyone else using tags on a Discourse forum in a big way?
Events Plugin :calendar:
Discourse Coloring Tag
Category Icons
How to test themes or theme components?
Discourse更新后,主页排版混乱
How to make a category-list-like front page for a tag-oriented site?
Request or idea for a component: topic title or topic flair
Admin guide to tags in Discourse
Customizing your site with existing theme components
Category Icons
Setup Continuous Integration using GitHub Actions
Tag change color for element in a Tag group
Add color and subcategory styling to category and chat mentions
Setting tag style to 'box'?
MD Topic List component
Remove Dashes from Tag Names
Links in tag descriptions aren’t escaped when using Tag Icons
Good approach for data sensitivity markings?
We're upgrading our icons to Font Awesome 6!
(Superseded) Add a custom fontawesome icon and color to your tag
How to create a tag "🎥"?
How to create a tag "🎥"?
Does anyone know how to add emojis to tags?
Renaming Tags: Consequences
Workarounds to support alternate tag structures
Difficult contrast of tags and categories when the text colour is white
Tag Banners
Some of my tags have # and some don't
The Horizon theme does not display tags on topic lists
Default tag icon
Tag Icons + Tag Banners + Right Sidebar Blocks
Add backgroundColor option for Tag Icons theme-component
For newly created labels, assign a random style
Trying to use css to insert png icons in tag boxes
Workarounds to support alternate tag structures
Uncaught TypeError: Cannot read property 'apply' of undefined
A picker for font awesome icons
api.onPageChange not working with endless scroll
Volunteer Activities - a simple setup for non-hierarchical collaboration
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Include an emoji when creating a new topic?
MD Topic List Mobile component
Javascript error + content missing after update 2.6.0.beta3
Emoji in tag - thoughts and experiences
A playful approach to category moderation

Does this also work with custom svg?

إعجابَين (2)

Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.

7 إعجابات

Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

3 إعجابات

Could the icon be added to the dropdown menu as well?

9 إعجابات

يتيح ذلك إضافة أيقونات مخصصة للوسم، ولكن ماذا لو أردت تغيير لون مربع الوسم؟

3 إعجابات

يمكنك فعل ذلك باستخدام CSS، على سبيل المثال، الكود أدناه سيجعل لون نص “theme-component” أحمر:

.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}

(هذا فقط لأغراض توضيحية، ستحتاج إلى تحديد CSS الخاص بك بنفسك.)

إعجابَين (2)

شكرًا لك، لقد فهمت. يبدو أنني مضطرّ إلى سرد كل علامة (tag) في ملف CSS باسمها وتحديد لونها. لكن سيكون من الرائع لو أمكنني القيام بذلك من لوحة الإدارة، تمامًا كما هو الحال مع مكونات المظهر، باستخدام قائمة مفصولة بفواصل مع توفير كود اللون السداسي العشري، كما هو الحال مع الأيقونات.

هل هناك طريقة لتحديد لون لجميع العلامات في مجموعة علامات معينة عبر CSS؟

4 إعجابات

انتهيت بالحصول على شيء يشبه هذا: image (لا يزال أيقونة الوسم الافتراضي هنا)

هل يرى أي شخص نتائج من هذا النوع؟

ابحث عن “نمط الوسوم” في إعدادات موقعك، ثم غيّر إلى بسيط، وسيؤدي ذلك إلى إزالة النقاط الرمادية.

أرى، شكرًا لك، لكنني سأحتاج إلى النقاط الرمادية الافتراضية لجميع الوسوم الأخرى. لقد حققت ذلك بإزالة النقاط من وسم محدد:

a[data-tag-name="test1"]::before {
    display:none!important;
}

image

3 إعجابات

يبدو تعديلًا رائعًا. سؤال للمؤلف للحصول على نصيحة: أفكر في تزيين وسامي البسيطة، وبعضها أستخدمه لتصنيف المنشورات حسب اللغة (لذا لدي وسوم “castellano”، “deutsch” إلخ)، باستخدام أعلام دول صغيرة. هل سيكون رفع ملف .svg مخصص كما هو موضح أعلاه هو الحل، أم توجد مجموعات أيقونات مُعدة مسبقًا أو ربما مجموعات تعبيرات وجهية مدمجة في discourse يمكن استخدامها؟

إعجابَين (2)

قد يكون استخدام رمز تعبيري (إيموجي) مناسبًا لأعلام الدول، لكن هذا المكون لا يستخدم الرموز التعبيرية، بل يستخدم أيقونات من مجموعة أيقونات مثل Font Awesome.

يمكنك تجربة إضافة الرمز التعبيري مباشرة في تسمية الوسم. جربت ذلك محليًا، والمشكلة هي أن الوسوم لا يمكن أن تحتوي على مسافات. مثال:

إذا كنت موافقًا على استخدام الشرطة، فهذه هي الطريقة المثلى.

4 إعجابات

واو، هذا في الواقع أنيق جدًا. باستثناء الشرطة :slight_smile: لكنني ربما أستطيع التعايش معها. قد يكون الأمر يستحق تجربة علامة تحمل فقط رمز علم إيموجي…

نعم، مجرد رمز تعبيري أمر رائع… لكنك لن تتمكن من العثور عليه بسهولة عبر البحث في قائمة الوسوم المنسدلة (عند النشر).

إعجابَين (2)

حسناً، سؤال واحد آخر شبه غبي: كيف أجعل رمز الإيموجي يعمل كما فعلت أعلاه مع الفرنسية؟ لقد حاولت إنشاء وسم “:sweden:-svenska” لكنه لا يترجم إلى علم السويد.

يجب عليك استخدام رمز تعبيري (على الهاتف المحمول، على سبيل المثال، ستقوم بالتبديل إلى لوحة مفاتيح الرموز التعبيرية).

3 إعجابات

أوه، ظننت أن الرموز التعبيرية في ديسكورد. حسنًا، أحتاج إلى التبديل إلى الهاتف المحمول. ظننت أنني يمكنني استخدام هذه بطريقة ما. لقد نجح الأمر، شكرًا لك!

3 إعجابات

إذا فهمت الأمر بشكل صحيح، فلا توجد طريقة سهلة لاكتشاف المجموعة التي ينتمي إليها وسم معين داخل مُعرِّض الوسوم؟

هذه الفكرة ستكون رائعة. كنت أستخدم سابقًا نهج CSS مخصصًا ثم تخلّيت عنه لصالح مكون القالب هذا مع أيقونة احتياطية لجميع الوسوم غير المحددة (على الأقل قبل دعم مجموعات الوسوم)، وهذا هو الشيء الوحيد الذي أفتقده.

وبالنظر إلى أن discourse-category-icons يدعم هذه الميزة، فأنا أظن أن المُعرِّض الذي تستبدله replaceCategoryLinkRenderer يُستخدم في القائمة المنسدلة للفئات، بينما المُعرِّض الذي تستبدله replaceTagRenderer لا يُستخدم في القائمة المنسدلة للوسوم، أليس كذلك؟ لذا قد يتطلب هذا الأمر تغييرًا في النواة. فالقائمة المنسدلة للوسوم في المُنشئ تستخدم المُعرِّض المستبدل، مع الأيقونات.

إعجابَين (2)