روابط مميزة في البانر

[Arkshine]

	ملخص	يتيح لك “Banner Featured Links” إنشاء شريط روابط.
	معاينة	Theme Creator
	المستودع	GitHub - Arkshine/discourse-banner-featured-links · GitHub
	دليل التثبيت	كيفية تثبيت سمة أو مكون سمة
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

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

ملخص

يتيح لك “Banner Featured Links” إنشاء شريط روابط.
يوفر مجموعة واسعة من خيارات التخصيص.

هي ميزة مستوحاة من سمة “Meta Branded” الرائعة لـ Discourse.

الميزات

المظهر الافتراضي – يستخدم لون السمة.

يمكن تصميم الزر بشكل منفصل:

يمكنك وضع الروابط في مواقع مختلفة عبر إعداد plugin outlet.
يتم توفير قائمة بالمواقع الشائعة في الوصف.

أنصح باستخدام مكون سمة شريط أدوات المطورين لمعرفة مواقع منافذ الإضافات!

على سبيل المثال، إذا كنت ترغب في محاكاة سمة Meta Brand، استخدم منفذ search-banner-below-input. يفترض ذلك أنك قمت بتثبيت مكون شريط البحث.

التفاصيل

يمكن تحقيق النمط الحالي باستخدام الإعدادات التالية:

أشجعك على تجربة أسلوبك الخاص!

الإعدادات

عام

الاسم	الوصف
links	الروابط النصية التي سيتم عرضها في الرأس.
show_for_members	عرض الروابط للمستخدمين المسجلين.
show_for_anon	عرض الروابط للمستخدمين المجهولين.
display_on_mobile	عرض الروابط على الأجهزة المحمولة.
display_on_desktop	عرض الروابط على أجهزة الكمبيوتر المكتبية.
display on homepage	عرض الروابط في الصفحة الرئيسية.
url must contain	أدخل المسارات التي يجب أن يعرض فيها الشريط. أضف * في نهاية المسار كعلامة بدلة.
plugin outlet	الموقع لعرض الروابط. المواقع الشائعة above-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-stream مكون شريط البحث: search-banner-below-headlinesearch-banner-below-input

إعداد links:

الاسم	الوصف
أيقونة	أيقونة FontAwesome أو رمز تعبيري لعرضه للروابط. الاختصارات Windows: Win + . Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space
العنوان	عنوان الرابط.
URL	عنوان URL للرابط.
الهدف	يفتح المستند المرتبط: _blank: في نافذة أو علامة تبويب جديدة (هذا هو الافتراضي) _self: في نفس الإطار الذي تم النقر عليه _parent: في الإطار الأب _top: في جسم النافذة بالكامل.

يمكنك أيضًا تصميم كل زر على حدة. سيتجاوز النمط العام.

الاسم	الوصف
العرض	عرض الزر.
الخط	خط الزر.
التكوير	كمية التكوير المطبقة على الزر.
الخلفية	لون الخلفية للزر.
الخلفية عند التمرير`	لون الخلفية للزر عند التمرير.
اللون`	لون النص للزر.
اللون عند التمرير`	لون النص للزر عند التمرير.
الحد	الحد للزر.
الحد عند التمرير	الحد للزر عند التمرير.
الظل	الظل للزر.
اسم فئة CSS	فئة CSS مخصصة لتطبيقها على الزر. مفيدة إذا كنت ترغب في تصميم الزر بشكل مختلف ولا تكفي الإعدادات. يمكنك استهدافه باستخدام .banner-featured-links__link.your-classname {}

التنسيق العام

تخصيص المسافة والمظهر الافتراضي للروابط.
يمكنك تجاوز تنسيق الزر لكل رابط على حدة.

تنسيق حاوية الأزرار

تخصيص حاوية الروابط.

الاسم	الوصف
buttons wrapper max width	الحد الأقصى للعرض لحاوية الأزرار.
buttons wrapper margin	الهوامش لحاوية الأزرار.
mobile buttons wrapper max width	الحد الأقصى للعرض لحاوية الأزرار على الأجهزة المحمولة.
mobile buttons wrapper margin	الهوامش لحاوية الأزرار على الأجهزة المحمولة.

تباعد الأزرار وخط النص

تخصيص تباعد الأزرار وحجم خط النص.

الاسم	الوصف
buttons justify	كيفية توزيع mسافة بين الروابط وحولها.
buttons gap	fgap بين الأزرار.
buttons font	خط الأزرار.
mobile buttons justify	كيفية توزيع mسافة بين الروابط وحولها على الأجهزة المحمولة.
mobile buttons gap	fgap بين الأزرار على الأجهزة المحمولة.
mobile buttons direction	الاتجاه للأزرار على الأجهزة المحمولة.
mobile buttons font	خط الأزرار على الأجهزة المحمولة.

تنسيق الزر

تخصيص المظهر الافتراضي للأزرار.

الاسم	الوصف
button width	عرض الزر.
button padding	hpadding للزر.
button rounding	كمية التكوير المطبقة على الزر.
button background	لون الخلفية للزر.
button background hover	لون الخلفية للزر عند التمرير.
button color	لون النص للزر.
button colo hover	لون النص للزر عند التمرير.
button border	الحد للزر.
button border hover	الحد للزر عند التمرير.
button shadow	الظل للزر.

التخصيص المتقدم

يمكنك استخدام CSS التالي للتخصيص الإضافي:

.banner-featured-links {
  &__wrapper {

  }

  &__wrapper-links {

  }

  &__link {

  }
}

إذا قمت بتوفير تخصيص لكل زر، يمكنك توفير اسم فئة في إعداد CSS Classname.

ثم يمكنك استهدافه بهذه الطريقة:

.banner-featured-links {
  &__link.myclass {

  }
}

روابط مفيدة

• متغيرات CSS الأساسية لـ Discourse: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub

الاعتمادات

• Discourse للفكرة، مستوحاة من سمة Meta Branded الرائعة.
• Don و nolo – قاما بإصدار أولي؛ أخذت بعض أفكارهما.

[Jagster (Jakke Flemming)]

تعليق واحد لتحسين مقدمة جيدة المكون: لقطة شاشة من هاتف محمول. ستوفر الوقت عند الاختيار بين الفائدة والإيجابيات والسلبيات.

[NateDhaliwal]

هل كان هذا مستوحى من سمة Meta Branded؟

[Moin]

أعتقد ذلك

@Arkshine

إنها ميزة مستوحاة من سمة “Meta Branded” الرائعة لـ Discourse.

[NateDhaliwal]

يبدو أنني قرأتها بسرعة كبيرة - كنت أنظر إلى قسم “الاعتمادات” :ضحك:

[Arkshine]

لا مشكلة. لقد قمت بتحديث قسم الاعتمادات لجعله أوضح. شكراً!

[Arkshine]

لقد قمت بتطبيق إصلاح بسيط إذا قمت بتثبيت المكون للمرة الأولى.
قام آخر تثبيت لي بإعادة تسمية إعداد، ولكن لم يتم تحديث القيم الافتراضية.
شكرًا لـ @manuel على الإبلاغ عن المشكلة!

[Helga_Razinkova (Helga)]

مرحباً @Arkshine، شكراً جزيلاً لك على هذه الإضافة!

لقد كنت أستخدمها لفترة، ولكن بعد إضافة زر آخر اليوم، تعطل المنتدى بأكمله ليبدو هكذا الآن:

هل لديك فكرة عن سبب حدوث ذلك؟

[Arkshine]

@Helga_Razinkova

لقد كنت أستخدمه لفترة من الوقت، ولكن بعد إضافة زر آخر اليوم، تعطل المنتدى بأكمله ليبدو هكذا الآن:

مرحباً، هل هذا يعني أنه إذا قمت بإزالة هذا الزر، فلن يتعطل؟

[Helga_Razinkova (Helga)]

حسنًا، اضطررت إلى الاتصال بفريق Discourse لتعطيل المكون الإضافي، لذا عاد كل شيء إلى طبيعته الآن، نعم.

أنا الآن متردد في استعادة الإعدادات القديمة لاختبار النظرية

[Arkshine]

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

[Helga_Razinkova (Helga)]

بالتأكيد، شكراً جزيلاً على مساعدتك!

هذا غريب حقًا، لأنني أجريت تغييرات منذ وقت ليس ببعيد وكان يعمل بشكل جيد.
لقد أزلت أحد الأزرار وأضفت زرًا جديدًا:

• العنوان: ملخصات شهرية

• الرابط: https://community.elfsight.com/c/announcements/release-notes/133?utm_source=elfsight&utm_medium=elfsight-community&utm_campaign=buttons-under-search&utm_content=monthly-recaps

• الهدف: self

• لون التمرير: #197bff

هذه هي السجلات، إذا كان ذلك يساعد

[{“url”:“Topics tagged new-widget Widgets”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“Topics tagged In-Progress Progress”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“CSS Codes - Elfsight Community Codes”,“target”:“_self”,“button_color_hover”:“#197bff”},{“url”:“Ask the Community - Elfsight Community Recaps”,“target”:“_self”},{“icon”:“”,“text”:"Join our Champion Program! ",“url”:“Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community”}]

السابق: [{“url”=>“Topics tagged new-widget”, “icon”=>“”, “text”=>“New Widgets”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Topics tagged In-Progress”, “icon”=>“”, “text”=>“In Progress”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“CSS Codes - Elfsight Community”, “icon”=>“”, “text”=>“CSS Codes”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Ask the Community - Elfsight Community”, “icon”=>“”, “text”=>“Support”, “target”=>“_self”, “button_color_hover”=>“#197bff”}, {“url”=>“Elfsight Champion Program: Help us grow our community forum! - Announcements - Elfsight Community”, “icon”=>“”, “text”=>“Join our Champion Program! “, “target”=>”_self”}]

[Arkshine]

بفضل مساعدة @Helga_Razinkova في الرسائل الخاصة، تمكنت من إعادة إنتاج المشكلة.
لقد دفعت إصلاحًا .

FIX: issue with missing icon from the settings

باختصار، لم يتوقع المكون تحديث الإعدادات من خلال محرر الإعدادات ومع وجود حقل icon مفقود، حدث خطأ.

[nathank (Nathan Kershaw)]

هذا رائع! إنه شامل وقابل للتخصيص للغاية؛ يبدو أنك فكرت في كل شيء تقريبًا.

لقد لاحظت خطأ بسيطًا حيث لا تظهر الأيقونات في بعض الأحيان.

هذا ما تبدو عليه الروابط الخاصة بي:

هذا ما يحدث عندما تقوم بما يلي:

1. استخدام Chrome (لم أجرب متصفحات أخرى، آسف)
2. الانتقال بعيدًا عن صفحة تحتوي على روابط مميزة باللافتة
3. العودة إلى الصفحة باستخدام زر “رجوع” في المتصفح

يمكنك إثبات ذلك بنفسك على ehealthforum.nz

[Arkshine]

شكراً يا ناثان! لقد أرسلت إصلاحًا. أخبرني إذا حدث ذلك لا يزال!

[nathank (Nathan Kershaw)]

رائع!!! تم إصلاح كل شيء.

واجهت خطأ آخر بسيط (ولكن مقلق) في تجربة المستخدم:

لا يزال النص الموجود على الأزرار يتم التقاطه بواسطة الفئة الزائفة :visited، مما يعني أن لون النص يتصرف بشكل غريب عند التحويم بمجرد زيارة كل رابط.

هذا هو الوضع قبل التحويم:

هذا هو التحويم قبل الزيارة (يتغير كل من الأيقونة والنص)

هذا هو التحويم بعد الزيارة (لاحظ أن الأيقونة تتغير ولكن ليس النص)

[Arkshine]

@nathank هل يمكنك المحاولة والتحديث لمعرفة ما إذا كان الأمر أفضل؟

[nathank (Nathan Kershaw)]

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

لا يظهر في وضع التصفح المتخفي، وأعتقد أنه لأنه لا يحفظ حالة الزيارة الخاصة بي.

[MAR (IOD)]

@Arkshine

GitHub - Arkshine/discourse-banner-featured-links

هل هذا متوافق مع سمة AIR ليتم تقديمه في أعلى صفحة المجتمع مع أزرار تربط بـ WordPress؟

[long]

أحاول وضع هذه تحت شريط البحث (كما هو الحال في هذا الموقع) باستخدام ‘search-banner-below-input’ لـ “Plugin outlet” - تبادلت الآراء مع الذكاء الاصطناعي وشرح أن هذا الموقع لم يعد يعمل الآن لأن البحث أصبح أساسيًا وليس امتدادًا. أتساءل فقط عما إذا كان هذا صحيحًا.