رئيسي كبير - رئيسي صغير

[tshenry (Taylor)]

سيوفر هذا المكون للقوالب رأسًا ثابتًا يحتوي على شعار كبير عند التمرير في أعلى الصفحة. ومع التمرير لأسفل الصفحة، سيظهر شريط رأس Discourse العادي. يتيح ذلك عرض شعار الموقع الكبير بشكل أنيق في أعلى الصفحة.

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

أفضل طريقة لمعرفة ما يفعله هذا المكون للقوالب هي تجربته، ويمكنك القيام بذلك بزيارة:

'Big Header - Little Header' by @tshenry

إليك محاولة مني لصورة متحركة (GIF) صغيرة توضح كيفية عمله (نوصي بشدة بالنقر فوق الرابط أعلاه للحصول على توضيح أفضل )

الإعدادات:

هناك حاليًا ثلاثة إعدادات يجب أن تكون واضحة بحد ذاتها:

التثبيت:

مهم: يجب أن تكون تشغل Discourse Version 2.0.0.beta4 أو إصدار أحدث لكي يعمل هذا القالب.

اطّلع على هذا الموضوع للحصول على تعليمات حول كيفية تثبيت مكون القالب:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

رابط الاستيراد:

https://github.com/tshenry/discourse-big-header-little-header.git

حول:

جاءت المقترح الأصلي لهذا من @ryanerwin في قناة Marketplace. طلب مني تعميم ما أنشأته له ومشاركته مع بقية المجتمع. لذا فإن هذا القالب مستوحى جدًا ويعود الفضل فيه إليه

ملاحظات:

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

المشاكل المعروفة:

بما أن هذا يضيف حشوة إلى div#main-outlet، فقد يتأثر الجدول الزمني للمواضيع اعتمادًا على حجم الشعار الخاص بك. توجد طرق ثابتة للتعامل مع ذلك، لكنها ليست مثالية. من المرجح أن أنشر منشورًا في قناة Dev لتوضيح كل ما جربته ومعرفة ما إذا كان لدى أي شخص أفكار حول كيفية التعويض عن الحشوة الإضافية.

المستودع:

GitHub - tshenry/discourse-big-header-little-header

كما هو معتاد، لا تتردد في النشر إذا كانت هناك أي أسئلة أو مشاكل أو اقتراحات! وقتي ضيق قليلاً حاليًا، لكنني سأحاول معالجة كل شيء بأسرع ما يمكن

[ryanerwin]

Awesome work on this @tshenry.

For anyone who wants to use a BIG LOGO at the top of their Discourse site, particularly if their logo is not rectangular, this is a great theme plugin!

[featheredtoast (Jeff Wong)]

Oh dang, that’s a pretty rad component you’ve got there, thanks for sharing back with us!

Any chance of an animated sample, just so those interested in something similar can git the gist of how it feels? (Or better yet, link to a live sample you can share on theme creator so they can play with it themselves!)

[tshenry (Taylor)]

No problem!

I will most definitely add a sample to theme creator. Thanks for the reminder! I need to update my other themes with the links to their demos on there as well. I’ll try to get a GIF in the post as well.

Edit: I’ve added both an animated image and a demo link to the topic post

[robmc (Robert McIntosh)]

I believe that recent logo changes may have broken this component - if you look at the theme creator version it is not working

[tshenry (Taylor)]

Yep, very broken! I’ll get that fixed up ASAP.

[tshenry (Taylor)]

Ok, it should be fixed now

If anyone reading this notices issues after updating the component, please report them!

[YTPMania_Forums (david)]

There’s just a slight dead zone under the little header where you can’t interact with certain things. Highlighting text, entering a topic, interacting with the timeline. I’m sorry, I don’t really know how to describe my problem, but you can reproduce it by just having text or the timeline below the little header. Try to highlight the text, or interact with the timeline.

Does anybody have any suggestions to fix this? It’s not a super huge problem in general, but it does make the Table of Contents theme component wonky to work with. I’m not sure if this is something to tell you or them.

I love this component, by the way @tshenry.

[tshenry (Taylor)]

Thanks for reporting! This should be fixed once you update the component. Let me know if you ever find any other issues.

[YTPMania_Forums (david)]

My goodness, that was quick! Works fantastic, thank you so much!

[Ashley_N_Moses]

I have installed this theme, but my logo is not showing up. It was before I installed this theme.

Is there a solution for this? Thanks!

[tshenry (Taylor)]

I’ve been meaning to take a look at this component and make sure everything is still working as expected. I’ll take a look either today or tomorrow and let you know.

Edit: I tested it out and all seems to be working correctly. Make sure you add the large logo image to the theme setting. I have a few improvements in mind for this component, but I’m not sure when I’ll get to them.

[Denis_Heraud]

@tshenry لماذا تغير لون خلفية الترويسة من اللون الذي حددته في سمة المظهر الخاصة بي إلى الأبيض عند تفعيل خيار «ترويسة كبيرة - ترويسة صغيرة»؟ هل يجب أن أجاوز هذا الإعداد؟ يبدو أن الإضافة يجب أن تحترم مخطط الألوان الذي قمت بضبطه مسبقًا في السمة.

[tshenry (Taylor)]

يبدو أنني كنت قد ضبطته لاستخدام متغير اللون $secondary المحدد في مخطط ألوان موقعك. بالنظر إلى الوراء، كان ينبغي أن أستخدم $header_background لأن ذلك كان سيسمح للمستخدم بتغييره بسهولة من خلال مخطط الألوان الخاص به. تم التغيير عبر:

Use header-background color variable

[Denis_Heraud]

@tshenry يعمل بالنسبة لي في شعار “صغير” (شكرًا لك)، لكنه لا يعمل في شعار “كبير”، لا يزال أبيض.

[tshenry (Taylor)]

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

[Denis_Heraud]

نعم، تمكنت من تجاوز ذلك باستخدام:

.d-header { background-color: #000 !important; }

[Denis_Heraud]

مشكلة أخرى أواجهها هي أنني استخدمت CSS مخصصًا لتحديد ارتفاع أكبر للرأس مع شعار أكبر من الافتراضي في Discourse.

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

بخلاف ذلك، كيف يمكنني تحديد ارتفاع رأس “الصغير”؟

[tshenry (Taylor)]

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

[Denis_Heraud]

شكرًا لك! كان عليّ تعطيل الإضافة الخاصة بك مؤقتًا لأنه عند التواجد في /admin، لم أتمكن من النقر على روابط التنقل في الأعلى (لوحة التحكم، الإعدادات، المستخدمين، إلخ…). لم أستطع تحديد ما إذا كان ذلك تفاعلًا مع تنسيقي CSS، لكنني سأقوم بالتحقيق.

تحديث: كان الأمر بالفعل متعلقًا بتنسيقي CSS، لقد ارتكبت خطأً في مكان ما، وليس له أي علاقة بالإضافة الخاصة بك.