البحث المتقدم في الرؤوس

:discourse2: الملخص يزيل مكون Advanced Header Search أيقونة البحث من قائمة الرأس وينشئ شريط بحث يُوضع في وسط منطقة الرأس.
:eyeglasses: معاينة معاينة على منشئ مواضيع Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-header-search
:open_book: جديد على مواضيع Discourse؟ دليل المبتدئين لاستخدام مواضيع Discourse

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

:white_exclamation_mark:ملاحظة

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

الميزات

الإعدادات

الاسم الوصف
أيقونات بحث إضافية إضافة أيقونات إضافية إلى شريط البحث (على سبيل المثال، لتفعيل بحث خارجي).
أيقونات svg

عرض أيقونات البحث الخارجية بشكل اختياري

استخدم extra_search_icons لعرض أيقونات إضافية في شريط البحث.

يدعم هذا الإعداد المعاملات التالية:

  • prefix: البادئة لرابط البحث عند النقر على الأيقونة ذات الصلة
  • icon: الأيقونة المراد عرضها، من مجموعة Font Awesome (قد تحتاج إلى إضافتها إلى إعداد أيقونات svg أيضاً)
  • target: يمكن تعيينه اختيارياً إلى “_blank” لفتح الرابط في تبويب/نافذة خاصة به افتراضياً
  • showInCategories: معرفات الفئات التي يجب أن تظهر فيها الأيقونة المعطاة حصرياً (بشكل افتراضي، تظهر الأيقونة في كل مكان)
  • excludeFromCategories: معرفات الفئات التي لا يجب أن تظهر فيها الأيقونة المعطاة

الاعتمادات

شكراً لـ @Johani على كود JavaScript الخاص بلوحة البحث :+1:


:discourse2: مستضاف من قبلنا؟ مكونات الموضوعات متاحة للاستخدام على خططنا القياسية والأعمال والمؤسسية.

37 إعجابًا

لقد قمت للتو بتحديث المكون، وهذا سيؤدي إلى ظهور أيقونة البحث الافتراضية على الهاتف المحمول:

6 إعجابات

هذا يعمل بشكل جيد الآن.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

شكرا.

5 إعجابات

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

4 إعجابات

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

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

لقد أجريت تحديثًا سيخفي شريط البحث من المستخدمين غير المسجلين عند الحاجة إلى تسجيل الدخول

3 إعجابات

لقد أضفت أيضًا تحديثًا يستخدم ألوان الرأس (الرأس الأساسي وخلفية الرأس) للإدخال

4 إعجابات

يبدو أن المكون يعطل تبديل الرأس والشريط الجانبي الجديد.

4 إعجابات

شكراً لتحديد هذا @manuel!

لقد قمت للتو بنشر إصلاح :tada:

6 إعجابات

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

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

يؤدي استخدام المكون إلى تعطيل تبديل الرأس والشريط الجانبي مرة أخرى. أعتقد أن السبب هو تغيير إعدادات الشريط الجانبي.

3 إعجابات

يجب إصلاح هذا باستخدام طلب السحب الأخير هذا FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

3 إعجابات

@jordan.vidrine مرحبًا، هل يمكنني استخدام هذه المكونة كرأس افتراضي للجوال

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

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

4 إعجابات

شكرا لك على المكون الرائع.

هل هناك طريقة لتخصيص لون حدود مربع البحث؟

Screenshot from 2023-03-02 10-13-59

بالنسبة لي هو رمادي نوعًا ما، أود أن يكون باللون الأبيض #FFFFFF

إعجابَين (2)

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

إذا لم تقم بذلك، فانتقل إلى /admin/customize/themes وانقر على components، ثم install.

عند ظهور النافذة المنبثقة، حدد Create New، ثم قم بتسمية المكون الخاص بك. سيتم نقلك إلى صفحة المكون الجديدة حيث يمكنك تحديد السمة التي تريد تطبيقها عليها. ستحتاج إلى تطبيقها على السمة المثبتة.

لإضافة CSS، انقر على Edit CSS/HTML وأضف CSS إلى صفحة common واحفظ.

ستحتاج إلى القيام بشيء مثل هذا:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
إعجابَين (2)

شكرا @jordan.vidrine على التعليمات المفصلة.

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

3 إعجابات

قد يكون هذا مفيدًا لبعض التعديلات الإضافية :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
يشرح كيفية العثور على العنصر الذي يجب استهدافه باستخدام CSS.

4 إعجابات

هل يمكنني إزالة هذا السطر واستخدام استعلامات الوسائط لتعطيله حتى 768 بكسل دون كسر كل شيء؟ :slight_smile:

أود إزالة الزر (لأن لدينا دردشات وفيديو هناك) على الأجهزة اللوحية، وأرى أن مربع البحث يناسب بشكل جيد حقًا.

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

كل شيء على ما يرام، ولكن في الإصدار المحمول تحتاج إلى التبديل إلى البحث القياسي، لأنه يبدو فظيعًا
image
مقابل
image

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