لافتة البحث المتقدم

[Discourse]

هذا المكوّن الثيماتي مُهمَل ولم يعد يُستخدم. تم نقل ميزاته إلى نواة Discourse — انظر وثائقنا لمزيد من التفاصيل حول إعداد لافتة ترحيب:

→ Creating a banner to display at the top of your site

	الملخص	يضع Advanced Search Banner شريط بحث مع عنوان فرعي وخاطفة اختيارية في لافتة أعلى شريط تنقل قائمة المواضيع الرئيسية.
	معاينة	معاينة على منشئ ثيمات Discourse
	رابط المستودع	https://github.com/discourse/discourse-search-banner
	جديد على ثيمات Discourse؟	دليل المبتدئين لاستخدام ثيمات Discourse

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

بما أن هذا مكوّن ثيماتي رسمي تحافظ عليه فريق Discourse، يمكن تقديم طلبات #دعم، #مساعدة:أخطاء، #مساعدة:تجربة_مستخدم، و #مساعدة:ميزات في الفئات المعنية هنا على Meta، مع وسمها بالوسم المناسب للمكوّن الثيماتي. انقر على أحد الروابط أدناه لبدء طلب.

الدعم الأخطاء تجربة المستخدم الميزات

الميزات

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

الإعدادات

الاسم	الوصف
إظهار على	يحدد الصفحات التي تظهر عليها اللافتة
منفذ الإضافة	المكان الذي ستظهر فيه اللافتة على الصفحة
صورة الخلفية (الوضع الفاتح)	صورة الخلفية للافتة في السِمات الفاتحة
صورة الخلفية (الوضع الداكن)	صورة الخلفية للافتة في السِمات الداكنة
تكرار صورة الخلفية	كرر صورة الخلفية
إظهار لـ	من يمكنه رؤية لافتة البحث (مسجل الدخول، غير مسجل الدخول، أو كلاهما)
نمط خاص	اختلافات اختيارية تغير مظهر لافتة البحث

الترجمة	الافتراضي
search_banner.headline	مرحباً بكم في مجتمعنا
search_banner.subhead	يسعدنا وجودكم هنا. إذا كنتم بحاجة إلى مساعدة، يرجى البحث قبل النشر.
search_banner.search_button_text

لتخطي عرض أي منها، اترك الحقل فارغاً.

التنسيق المخصص

يُمنح عنصر HTML فئة تسمى .display-search-banner في كل مكان تظهر فيه هذه اللافتة، وتُلف اللافتة نفسها بفئة .custom-search-banner، لذا مع بعض تنسيقات CSS يجب أن تتمكن من تخصيص مظهر هذه اللافتة كما ترون مناسباً.

التحسينات المستقبلية

• إضافة خيار لتمكين اللافتة في فئات محددة

الشكر

يستعير هذا بشكل كبير من Pavilion Header Search Theme Component الخاص بـ @angus

مُستضاف من قبلنا؟ متاحة للمكوّنات الثيماتيّة للاستخدام في خططنا القياسية، والأعمال، والمؤسساتية.

[awesomerobot (Kris)]

لقد قمت بتحديث مكون السمة لإضافة بعض الإعدادات الجديدة:

show on — يحدد هذا الخيار مكان ظهور اللافتة ويتضمن الخيارات التالية:

• top_menu (الأحدث/التصنيفات/الأعلى/الجديد/غير المقروء)
• homepage
• all (جميع الصفحات باستثناء صفحة البحث الافتراضية وصفحات المسؤول)

show for — يحدد هذا الخيار من يرى اللافتة:

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

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

يمكن تمكين هذا عن طريق إعداد جديد “نمط خاص”. كل ما يفعله هذا هو تمكين بعض CSS الإضافية.

قد أضيف بعض الخيارات الأخرى هنا في المستقبل أيضًا!

[AndyBr (Andy)]

كيف يمكنني تغيير لون نص الترحيب في هذه الإضافة؟

[Arkshine]

لا يوجد إعداد لذلك. ومع ذلك، يمكنك إضافته باستخدام بعض CSS:

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

.search-banner > .custom-search-banner {
    /* title */
    h1 {
        color: #286989;
    }

    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

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

[RBoy]

هل هناك طريقة لإخفاء أيقونة البحث (باستخدام CSS أو غير ذلك)؟ أواجه مشكلة حيث تتكرر أيقونة البحث عند استخدامها مع هذا المكون: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

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

أوصي باستخدام أحدهما أو الآخر فقط.

[RBoy]

شكرًا! مفيد جدًا

@isaac

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

هل يمكنك توضيح ما هي الآثار الجانبية لتجربة المستخدم؟

[isaac (Isaac Janzen)]

يُظهر الفيديو الذي أشرت إليه أعلاه بعض المشكلات

• قوائم البحث المنسدلة المتداخلة
• حالات فتح وإغلاق غريبة لقوائم البحث المنسدلة
• أيقونة البحث هي رابط للبحث المتقدم في مربع إدخال بحث واحد وليست في الآخر
• إلخ

[RBoy]

حسناً. طالما أنهما ليسا معاً في نفس الصفحة، فلا ينبغي أن تكون هناك مشكلة.

[مباركمبارك (مبارك)]

هل يمكن لأحد مساعدتي؟ لقد قمت بتثبيت هذا القالب على منصة Discourse الخاصة بي ولكن الصورة مقطوعة من الجانب الأيمن، لكي تتناسب الصورة بالكامل يجب عليّ ضبط خط الموقع على “أصغر” لديّ تثبيتان مختلفان لـ Discourse وفي إحداهما عملت الصورة بشكل طبيعي، في الأخرى لماذا الصورة مقطوعة؟

[awesomerobot (Kris)]

هل يمكنك تضمين لقطة شاشة؟ سيؤدي ذلك إلى تسهيل فهم المشكلة بشكل كبير

[ecki (Bernd)]

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

[مباركمبارك (مبارك)]

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

[Surbhi_Pal1 (Surbhi)]

مرحباً،

هل هناك طريقة لإزالة المسافة بين شريط البحث والرأس؟

[Arkshine]

مرحباً، يمكنك استخدام CSS هذا في مكون سمة جديد:

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

عمل بشكل مثالي، شكرا!

[PT_LB (Paul)]

يبدو أن Discourse لديه نفس المشكلة التي أواجهها في مجتمعي، يستغرق التراكب بعض الوقت لتغطية أي شيء تحت طبقة البحث (Discover):

وهو أكثر وضوحًا في مجتمعي:

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