شريط أدوات أسفل رأس الموقع لكل فئة

https://meta.discourse.org/t/welcome-link-banner/218743/28

مرحبًا، أتساءل عما إذا كنت قد رأيت طلبي للميزة؟

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

أو بدلاً من ذلك، مكون سمة (theme-component) يسمح بـ “تثبيت” شريط أدوات أسفل الشريط الرئيسي للموقع عند عرض فئة معينة؟ هذا هو ما أبحث عنه بشكل أكثر تحديدًا. يمكن أن يكون هذا شيئًا مثل روابط الرأس المخصصة لـ Joe على سبيل المثال.

حتى التوجيه لتعديل سلوك مكون سمة موجود لتحقيق ذلك سيكون رائعًا.

أعتذر، ما زلت مبتدئًا وأتعلم أثناء تقدمي.

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

مرحباً!

هل يمكنك أن تكون أكثر تحديدًا بشأن احتياجاتك؟ ما الذي تريد وضعه بالضبط أسفل رأس Discourse؟

الطريقة القياسية لوضع “أي شيء” أسفل الرأس تكون داخل علامة التبويب After Header عند تحرير سمة أو مكون:

ولكن يبدو أنك تفكر في شيء أكثر ديناميكية و/أو أكثر تعقيدًا.

كلما زادت المعلومات التي تقدمها، زادت فائدة الردود :slight_smile:

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

شكراً على الرد السريع.

لتوضيح الأمر بشكل كبير ومحدد، شيء مثل “روابط رأس مخصصة لـ Johani (أيقونة)” سيكون قريباً من الكمال.

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

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

أي رابط المتجر، الدعم، روابط المجتمع.

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

نهج آخر سيكون إنشاء مكون بدون أي إعدادات، باستخدام HTML و CSS (وربما القليل من JS). لذلك، سيكون تخصيصًا “ثابتًا” جدًا وإذا كنت بحاجة إلى إجراء أي تغيير، فسيتعين عليك تحرير كود HTML و CSS المناسب.

إليك مثال صنعته لمنتدى الخاص بي:

وهذا كيف يبدو في تخصيصات الموقع:

هل يكفي هذا الأسلوب لاحتياجاتك، أم تفضل شيئًا أسهل في التحرير من جانب المسؤول مثل مكون روابط الرأس المخصصة مع عدة مدخلات، مثل هذا؟

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

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

على سبيل المثال

  1. (أ) روابط الرأس المخصصة
  2. (ب) روابط الرأس المخصصة

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

أعلم أنني أستطيع التصدير ثم الاستيراد من ملف مضغوط لتعديل الكود. لكنني سأحتاج إلى إرشادات حول ما يجب تغييره إذا اتبعت هذا المسار. أنا على استعداد للمحاولة.

قد يكون الأمر أسهل الآن من خلال العمل على مكون سمة مخصص
كما ذكرت لتبسيط ذلك ببعض الأكواد البسيطة بعد الرأس التي تستهدف الفئة من خلال عرض روابط بسيطة باستخدام صورة هنا وهناك للروابط الرئيسية مع رابط مجتمع يذهب إلى منشور أو صفحة منشورة؟
أود مرة أخرى أن أشكرك على وقتك ومشاركة معرفتك.

إليك مثال عملي صنعته لك:

إليك كود HTML الذي وضعته في علامة التبويب After Header

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Here's some content only displayed on the <strong>General</strong> category</h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Here's some content only displayed on the <strong>Site Feedback</strong> category</h2>
</div>

إليك كود SCSS الذي وضعته في علامة التبويب CSS (يستخدم Discourse ميزات CSS الموسعة لـ SCSS):

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

إليك النتيجة. يظهر كل لافتة فقط في فئتها المخصصة.

آمل أن يساعد ذلك أكثر!

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

هذا مثالي تمامًا! شكراً جزيلاً لك!

مع هذا الكود الأساسي، هل سيظل يُعرض إذا كان في فئة فرعية من الفئة الأم؟ أم أحتاج إلى إضافة الفئات الفرعية إلى الشرط؟

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

:vulcan_salute::smiling_face_with_sunglasses::handshake:

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

الفئات الفرعية لها فئتها الخاصة في وسم body.

على سبيل المثال، في https://meta.discourse.org/c/support/wordpress/21، Support > WordPress هي فئة فرعية لـ Support.

فئة الفئة على وسم <body> هي: category-support-wordpress.

إذا كنت تريد عرض اللافتة في الفئات الفرعية وكذلك في الفئة الأصل، فيجب أن يكون كود SCSS مختلفًا. يمكنني إلقاء نظرة غدًا.

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

رائع! شكرًا لك مرة أخرى على مشاركة ثروة معرفتك ومنحي بداية قوية.
أنت بالتأكيد رصيد لفريقك! :clinking_beer_mugs::smiling_face_with_sunglasses::vulcan_salute:

إعجابَين (2)

أعتذر عن قلة خبرتي. ولكن هل يمكنني الاعتماد عليك مرة أخرى؟


<div id="pimax-navbar">
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
</ul>
</span>
</div>

كيف أدمج هذا مع مثالك؟ وهل أحصل على الروابط أيضًا لتمتد من اليسار إلى اليمين؟ مقابل مكدسة فوق بعضها البعض؟

بشكل أساسي، ستقوم بأخذ هذا الكود ووضعه في الكود الخاص بي كبديل لوسم <h2> ومحتواه. لكنني أقترح عليك تحسين وتكييف هذا الكود ليناسب احتياجاتك، وليس مجرد نسخه ولصقه.

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

في هذا النوع من الحالات المتعلقة بأشياء HTML و CSS العامة، وغير المتعلقة مباشرة بـ Discourse، قد تجد معلومات هنا: Making custom CSS changes on your site
وفي أي مكان تقريبًا على الإنترنت. على سبيل المثال: https://www.google.com/search?q=css+make+list+element+inline

وبناءً على ذلك، ما هي مهاراتك الحالية في HTML مع CSS؟
معرفة المزيد عن هذا من شأنه أن يساعد في كتابة ردود أكثر تخصيصًا. :slight_smile:

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

بصراحة مع نفسي ومع من حولي، أنا متحمس مبتدئ. لقد قمت ببعض البرمجة في المدرسة الثانوية باستخدام gwbasic و turbo pascal. لقد اتخذت المبادرة لاستخدام تطبيق للمساعدة في تعلم html و CSS وحققت بعض النجاحات. ومع ذلك، لم يكن أي منها على مستوى عالٍ.

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

كان ذلك أكثر كفاءة من استهداف كل فئة على حدة لإخفائها. :wink:

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

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

لهذا السبب أنا ممتن حقًا لأن لدينا هذا المجتمع الرائع والمتفهم الذي غالبًا ما يقدم لي، عند الطلب، التوجيه الذي أحتاجه بمستوى عالٍ من الصبر الذي قد لا يقدمه الكثيرون.

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

أنا أستخدم لينكس وقد قمت الآن بإعداد سطح المكتب الخاص بي لتسهيل الأمور.. بالإضافة إلى الحاجة إلى رؤية كيف يعمل جانب سطح المكتب للتصميم وجانب الهاتف المحمول لإنشاء تصميم متوازن جيد. أنا أتعلم أشياء جديدة طوال الوقت. أنا أعتمد على السمة Air Theme كنقطة انطلاق رائعة.

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.