رأس علامة التجارية

:discourse2: ملخص يضيف Brand Header رأسًا علويًا إضافيًا للعلامة التجارية يحتوي على شعارك، وروابط التنقل، وأيقونات التواصل الاجتماعي، ويعمل على كل من العرضين المكتبي والجوال. يمكن أن يكون شعار العلامة التجارية صورة أو نصًا.
:eyeglasses: معاينة معاينة على منشئ سمة Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-brand-header
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

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

الميزات

معاينة على سطح المكتب:

معاينة على الجوال:

الإعدادات

الاسم الوصف
اسم العلامة التجارية
عنوان موقع الويب
رابط شعار الجوال
الروابط روابط نصية سيتم عرضها في الرأس
الأيقونات روابط أيقونات سيتم عرضها في الرأس
أيقونات Font Awesome مخصصة قائمة بأيقونات FontAwesome 6 المستخدمة في مكون السمة هذا
إظهار الشريط على الجوال
منفذ الإضافة

استخدام أيقونات Font Awesome 6

لتمكين أيقونات Font Awesome 6 من الظهور بشكل صحيح في مكون السمة هذا، ستحتاج إلى إضافتها إلى ثلاثة أماكن في Discourse:

  1. إعداد الموقع مجموعة أيقونات SVG
  2. إعداد أيقونات Font Awesome مخصصة في المكون
  3. إعداد الأيقونات في المكون

بالإضافة إلى ذلك، لبعض أيقونات Font Awesome 6، ستحتاج إلى تحديد بادئة fa أو fab مع اسم الأيقونة (مثل: “fab-bluesky”)، لأن بعض الأيقونات جزء من مجموعة فرعية محددة من الأيقونات. راجع نحن نترقى بأيقونتنا إلى Font Awesome 6! للحصول على تفاصيل حول هذا الاستخدام.

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

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

87 إعجابًا
Is there a setting to add Facebook, twitter , Instagram profile links?
Beginner's guide to using Discourse Themes
Reuse Discourse Hamburger Functionality
Introducing Font Awesome 5 and SVG icons
How to use brand header html in my WordPress site
WordPress in a Discourse iFrame?
How to create additional header?
How to put a backlink to our company website above the top-menu in discourse?
Can I add a icon and link back to my homesite at the top bar
Customise home login page
How to finely scroll out custom header?
Login with federated social networks
Customize Your Site Branding
Need to create good-looking front page with Discourse login option
How I can add a custom header
Horizon interaction with Brand Header
How to add a directory of people/businesses to my theme?
How to create custom theme component?
Custom website header with forum
Adding header in theme messes up topic progress bar (when docked)
Structuring a multilingual community
Are these possible only with a custom theme?
Horizon Theme
How do I move an image/banner to the VERY top of the page?
Combining Brand Header and Header Submenus Plugins
Brand Header breaks chat reply box on mobile (iOS)
Air Theme
Quick access to bookmarks and messages on user menu
Why does the logo navigate to Discourse home not main site home
TavoWEB theme for Discourse
How to make your side have a side-bar and external links
Display name of forum
DiscoTOC & Brand Header - using together
TypeError: Discourse._registerPluginCode is not a function
Brand header theme component breaks page layout on static and no_ember pages
Brand header theme component breaks page layout on static and no_ember pages
How to add top menu bar like try.discourse.org
Dropdown links in existing Header
Insert Link to External Website
Structuring a multilingual community
Help needed with theming and logo
How do the Links and Icons settings work?
Customizing your site with existing theme components
How to embed Discourse in Wordpress?
Customize the header with links, icons, or menus
🌅 Introducing Horizon, our newest theme

@vinothkannans Great component!

One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.

5 إعجابات

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.

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

أنا متشوق، هل يوجد نوع من الكود يمكنني استخدامه/تعديله لنقل الروابط إلى هذا الجانب من الرأس؟

يفضل أن تظل أيقونات fa في مكانها (على اليمين تمامًا). أود فقط أن أرى كيف سيبدو الأمر.

مرحبًا، هل تمانع إضافة خيار لعرض الشريط أسفل الرأس بدلاً من أعلاه؟

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

بالتأكيد، سأقبلها إذا قمت بتقديمها في طلب سحب (PR).

4 إعجابات

هل هناك أي تلميحات حول ما يجب تغييره لذلك؟ لم أعمل مع Discourse من قبل.

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

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

يجب عليك تثبيت الودجيت في موصل “below-site-header” بدلاً من “above-site-header”. سيتطلب ذلك أيضًا بعض التعديلات الإضافية.

6 إعجابات

شكرًا لك، لقد نجح الأمر! سأقوم على الأرجح بإنشاء طلب دمج (PR) عندما أجد بعض الوقت الإضافي.

4 إعجابات

لقد دمجت طلب السحب (PR) الآخر الخاص بك، والذي سيضيف معلمة هدف اختيارية للروابط.

8 إعجابات

تم ذلك الآن في التعديل أدناه

4 إعجابات

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

لقد رأيت هذا شخصيًا على هاتف Moto (g7) Power محدّث بالكامل يعمل بنظام Android 9، وعلى iPhone 8 محدّث بالكامل.

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

إعجابَين (2)

شكرًا لك! اتضح أنني لم أكن أملك وقتًا لإعداد طلب دمج (PR) مناسب، هل تعتقد أنك قادر على إضافة إعداد رأس الموقع أدناه/أعلى؟

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

يبدو أنه سيكون مفيدًا جدًا القدرة على إضافة سمات إلى روابط الرأس بطريقة ما، مثل فئة CSS أو الهدف وما إلى ذلك.

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

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

اضطررت إلى شرح أنه يجب على المستخدم النقر في أي مكان على يمين الشاشة، بجانب القائمة، لإغلاقها.

هل من الممكن جعل الأمر أكثر بديهية، إما عن طريق:

  • إغلاق القائمة تلقائيًا عند النقر على رابط داخل القائمة على الأجهزة المحمولة؟
  • تضمين زر ‘إغلاق القائمة’ على الأجهزة المحمولة؟
إعجاب واحد (1)

كنت أعتزم تقديم طلب مماثل. غالبًا ما أحاول إغلاق القائمة على الهاتف المحمول عن طريق سحبها إلى اليسار. يبدو أن الأمر يعمل، لكنها تعود فورًا إلى مكانها. أما في القوائم الأخرى في Discourse، فإن سحبها إلى الجانب يُغلقها بنجاح.

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

مرحباً!

نجرب تخطيطًا مختلفًا بين نسختين من نفس المنتدى (discourse 3.2.0.beta4-dev و discourse 3.3.0.beta1-dev).

إليك مثال بدون CSS مخصص، فقط المكون الخام.

الإصدار 3.2 الإصدار 3.3

هل تغير تخطيط HTML في discourse بين الإصدارين؟

أيضًا، سلوك “الانزلاق” معطل في الإصدار 3.3.

إعجابَين (2)

أواجه نفس المشكلة في Discourse 3.2.2. سلوك الانزلاق معطل.

أتساءل، بالنظر إلى تواريخ المشاركات أعلاه، هل لا يزال مكون السمة brand-header مدعومًا؟

بناءً على المنشورين السابقين، لقد تعطل الأمر منذ 5 أشهر على الأقل ولم يستجب أحد. سأفترض أن هذا المكون الخاص بالموضوع قد توقف ما لم يقل شخص ما خلاف ذلك.