أداة نمط الوسم

:information_source: ملخص يتيح لك TagStyleTool تخصيص مظهر العلامات.
:eyeglasses: معاينة سيتم ملؤها لاحقًا
:hammer_and_wrench: المستودع TagStyleTool على Github
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

حول

TagStyleTool هو إصدار مستوحى من (3) مكونات موجودة للسماح بتخصيص مظهر العلامات على Discourse!

v0.2
أضف منشئ الأنماط المرئية - يسمح بالبحث عن الأيقونات، واختيار الألوان، واستيراد الفئات!

الميزات:

  • تم حل مشكلات التوافق (خاصة بين إزالة الشرطات، وأيقونات العلامات)
  • تعيين أيقونة Font Awesome لعلامات محددة.
  • تمت إضافة خيار لتطبيق أيقونة علامة افتراضية لأي علامة غير محددة.
  • وراثة معكوسة، على سبيل المثال لون التسمية أو النص
  • يحل مشكلة لون التباين مع لون النص عند استخدام إعداد تلوين التسمية.
  • سمح بالقدرة على الاختيار بين أنماط العلامات الموجودة.
  • تنوع الإعدادات مما يسمح بتعطيل الميزة الافتراضية للعلامة أو ميزة الشرطات.
  • تنسيق الإعدادات هو نفسه (مع إضافة إعدادات جديدة) مثل أيقونات العلامات مما يتيح سهولة النقل/التبني.

حتى الإصدار v0.2

  • تطبيق خيار للتطبيق على فئة بأكملها. (هذا له عيوبه، أعتقد أنه يمكن القيام به، ولكنه يتطلب صيانة إضافية)
  • البحث في قاعدة بيانات FontAwesome للحصول على الأيقونة المثالية!
  • اختر لونك المفضل من منتقي الألوان المرئي.

المزيد للقيام به:

  • لون العلامة الافتراضي :sweat_smile: سيناريو “ماذا لو” إذا كنت تريد اللون فقط وليس الأيقونة.
  • إصلاحات سهلة الاستخدام للإعدادات

أخرى:

هذه هي المرة الأولى التي أنشر فيها شيئًا للجمهور منذ فترة. إذا واجهت مشكلات، فأخبرني!

تم اعتماد الإلهام (وفي بعض الحالات التنسيق/الإعدادات وما إلى ذلك) مباشرة من هذه المشاريع الحالية:
إزالة الشرطات من أسماء العلامات
أيقونات العلامات
تلوين نمط العلامة

موارد مفيدة
تم دمج كليهما الآن في المكون
Font Awesome
منتقي ألوان HTML

8 إعجابات

سأجرب هذا! شكرًا!! نظرت في العديد من مكونات تنسيق العلامات (tag styling components) وبدا أنها تتطلب تثبيت عدة مكونات، لذا سأجرب المكون الخاص بك في المرة القادمة التي أعمل فيها على إعدادي!

إعجاب واحد (1)

جربت بسرعة. تعليقان “للمبتدئين”:

  • أضيع قليلاً في أمور FontAwesome. هل هي فقط الأيقونات المجانية؟ أي إصدار؟ هل هناك قائمة بجميع الأيقونات في مكان ما (أم أنها طويلة جداً لذلك)؟
  • اللون: ما مدى تعقيد توفير أداة اختيار الألوان، للأشخاص الذين لا يتقنون نظام RGB؟ :innocent:

ولكن شكراً بالفعل، يبدو هذا جيداً!

لا تقلق بشأن الضياع، يسعدني المساعدة بأي طريقة أستطيع، فهذا هو الغرض من Discourse في نهاية المطاف، أليس كذلك؟

Font Awesome
يجب أن يدعم المكون تلقائيًا أي أيقونة من Font Awesome من الإصدار الحالي الموجود في الإصدار الحالي من Discourse. أعتقد أنهم يدعمون الإصدار 6 حاليًا. يمكنك العثور عليها جميعًا هنا Font Awesome.
بالنسبة للجزء الثاني من السؤال، نعم إنه مجاني، هناك نسخة مدفوعة، لكني لست متأكدًا كيف يعمل ذلك مع Discourse نظرًا لأن Font Awesome مُضمن بالفعل في الإصدار الأساسي.

Color Picker
يمكنني إلقاء نظرة لمعرفة ما إذا كان بإمكاني تطبيق واحد، ولكن نظرًا لأنه مكون سمة (theme component)، لست متأكدًا من مقدار ما يمكنني فعله قبل أن يصبح من الضروري أن يكون مكونًا إضافيًا (plugin). ومع ذلك، يمكنك استخدام هذه الأداة المفيدة، حيث تنقر على منطقة “Use HTML 5” حيث يوجد اللون، وبالنسبة لهذا المكون، تريد استخدام لون الـ hex. HTML Color Picker

إعجاب واحد (1)

شكرًا! في الواقع، سيكون رابط لهذين المصدرين في واجهة الإعدادات مفيدًا للغاية!

إعجاب واحد (1)

يوجد مكون HTML أصلي لاختيار الألوان في الوقت الحاضر

نحن نغلفه أيضًا بمكون لسهولة الاستخدام.

4 إعجابات

شكراً جزيلاً!

Chandler Bing Smiling in Friends

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

لقد اكتشفت أيضًا :eyes: كيفية التطبيق على جميع العلامات في مجموعة علامات.


colorpickdemo

3 إعجابات

ستكون أداة إنشاء الأنماط تلك ميزة رائعة!

:smiley: لقد دفعته للخارج، أبلغني إذا واجهت أي مشاكل.

إعجاب واحد (1)

أداة البناء رائعة حقًا! تمكنت من استخدامها لبعض العلامات للبدء، ثم عندما ضغطت على علامة الصح الخضراء لحفظ الإعدادات، اختفت أداة بناء نمط العلامة (Tag Style Builder).

إذا قمت بالتحديث، يظهر الزر للحظة وجيزة قبل أن يختفي مرة أخرى.

أنا أيضًا غير قادر على جعل إحدى الأيقونات (مثل قفل-ثقب المفتاح، على سبيل المثال) تظهر على العلامة على الرغم من اقتراحها من قبل أداة البناء. أضفتها إلى قائمة أيقونات SVG أيضًا، وحفظت، ولكن لا يزال الأمر غير مجدٍ.

هذا قريب جدًا من أن يكون ممتعًا في الاستخدام، شكرًا على الجهود. أود أن أرى هذا يحل محل العديد من مكونات الثيمات الأخرى بالنسبة لي بشكل دائم.

:sweat_smile: لقد قمت بكل هذا في الساعة 1-2 صباحًا، ونشرته في الساعة 6 صباحًا، لذا سامحني على بعض المشاكل البسيطة.

  • يمكنني إعادة إنتاج اختفاء الزر، هذا الشيء عنيد. تمكنت من إصلاحه، أعتقد.
  • أفترض أنني نسيت شيئًا بخصوص أيقونات Font Awesome. تحتاج إلى الانتقال إلى إعدادات موقعك، والانتقال إلى مجموعة SVG الفرعية، وإضافتها يدويًا. إذا لم يكن Discourse يستخدمها بالفعل، فلن يتم عرضها افتراضيًا. على الرغم من أنني حتى عند القيام بذلك، واجهت مشكلة في عدم عرضها. سأبحث في هذا الأمر أكثر.

لقد تم نشر هذا.

إعجاب واحد (1)

أتمنى لو كان الأمر كذلك.

كان عليّ حذف المكون وإعادة تثبيته (في كلتا المرتين) لجعل زر البناء يظهر في المقام الأول.

مع أحدث إصدار، يمكنني جعل الزر يستمر خلال الإعداد الأولي للعلامات الخاصة بي. ويمكنني جعله يستمر عبر التحديث. ولكن عند العودة إلى شاشة تحرير المكون من السمات والمكونات (Themes & Components)، يختفي الزر مرة أخرى. أيها الخطأ المخادع.

سألعب بالإعدادات المتعلقة بالأيقونات. نظرًا لوجود طريقة لإيقاف تشغيل الأيقونات الافتراضية، فهل هناك طريقة للتخلص من أيقونة العلامة للعلامات الملونة؟ مثل إذا كانت تطابق مجموعة الأيقونات الافتراضية أو شيء من هذا القبيل؟ كان مكون العلامات الملونة رائعًا لعدم حاجته إلى تعيين أيقونة، ولقد استمتعت بالمظهر النظيف له، وتكرار ذلك سيكون ميزة مفيدة بالنسبة لي.

إعجاب واحد (1)

:sweat_smile: إنه شيء مزعج بالفعل.

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

يجب أن يحل بعض هذه الأشياء. لقد أضفت قائمة مهام للرجوع إليها في حالة تجاوزات الإعدادات، على سبيل المثال، سيؤدي Tag1,Pencil,NoColor إلى عرض Tag1,Pencil, <Color if default is used, True or false default used, otherwise, no color applied>.

هذه عملية تعلم رائعة بالنسبة لي! :joy:

إعجاب واحد (1)