Install this theme component
This theme component is only required when sites want to support external searches. Otherwise, you may update the Search experience setting to Search field in site header to move site search to the header.
Name
Description
extra search icons
Add extra icons to the search bar (for example to trigger an external search).
svg icons
Use the extra_search_icons to show additional icons in the search bar.
This setting supports the following params:
prefix: the prefix to the search URL when clicking the respective icon
icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
target: optionally set to “_blank” to open the link in its own tab/window by default
showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
excludeFromCategories: category IDs where the given icon should not be shown
Thanks to @Johani for the search panel javascript code
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
Last edited by @lindsey 2025-02-28T14:39:07Z
Check document Perform check on document:
37 إعجابًا
لقد قمت للتو بتحديث المكون، وهذا سيؤدي إلى ظهور أيقونة البحث الافتراضية على الهاتف المحمول:
committed 03:02PM - 25 Jul 22 UTC
6 إعجابات
alanost
28 يوليو 2022، 3:40م
20
مرحباً، أولاً وقبل كل شيء، مكون سمة جيد جدًا. يعمل بشكل جيد جدًا بالنسبة لي.
4 إعجابات
alanost
23 أغسطس 2022، 9:37م
21
سأكون سعيدًا جدًا إذا تمكن شخص ما من إصلاح هذه المشكلة. أعلم أنها لا تؤثر على الكثيرين، لكني أحب مكون السمة هذا وهذه المشكلة تمنعني من استخدامه
إعجاب واحد (1)
لقد أجريت تحديثًا سيخفي شريط البحث من المستخدمين غير المسجلين عند الحاجة إلى تسجيل الدخول
main ← login-required
opened 12:55AM - 24 Aug 22 UTC
This prevents the broken search bar from appearing on the `login_required` scree… n
3 إعجابات
لقد أضفت أيضًا تحديثًا يستخدم ألوان الرأس (الرأس الأساسي وخلفية الرأس) للإدخال
main ← color-updates
opened 01:46AM - 24 Aug 22 UTC
We weren't using the header color variables here, so they would clash in some pa… lettes.
Also, the 🔎 button has no function in this context, so I disabled pointer events and improved spacing a little.
4 إعجابات
manuel
10 أكتوبر 2022، 9:05م
24
يبدو أن المكون يعطل تبديل الرأس والشريط الجانبي الجديد.
4 إعجابات
keegan
12 أكتوبر 2022، 4:46م
26
شكراً لتحديد هذا @manuel !
لقد قمت للتو بنشر إصلاح
committed 04:45PM - 12 Oct 22 UTC
6 إعجابات
manuel
27 أكتوبر 2022، 6:21م
27
هناك خلل صغير آخر صادفته: يمكنني استخدام الاختصار الافتراضي “/” لإدخال حقل البحث. لكنه لن يوسع القائمة المنسدلة التي تعرض النتائج. سأحتاج إلى النقر في حقل الإدخال يدويًا ليحدث ذلك، مما يجعل اختصار لوحة المفاتيح عديم الفائدة إلى حد ما.
إعجاب واحد (1)
manuel
20 ديسمبر 2022، 8:52م
28
يؤدي استخدام المكون إلى تعطيل تبديل الرأس والشريط الجانبي مرة أخرى. أعتقد أن السبب هو تغيير إعدادات الشريط الجانبي.
إعجابَين (2)
ozkn
31 ديسمبر 2022، 10:17م
30
@jordan.vidrine مرحبًا، هل يمكنني استخدام هذه المكونة كرأس افتراضي للجوال
إعجاب واحد (1)
لقد فكرت في هذا قبل الإصدار، ولكن لا توجد مساحة كافية في ترويسة الهاتف المحمول لكي يعمل هذا بشكل صحيح.
4 إعجابات
bquast
2 مارس 2023، 1:26م
32
شكرا لك على المكون الرائع.
هل هناك طريقة لتخصيص لون حدود مربع البحث؟
بالنسبة لي هو رمادي نوعًا ما، أود أن يكون باللون الأبيض #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)
bquast
6 مارس 2023، 5:04ص
34
شكرا @jordan.vidrine على التعليمات المفصلة.
لقد تعلمت مؤخرًا بمساعدة أشخاص جيدين آخرين في هذا المنتدى كيفية إضافة CSS مخصص.
3 إعجابات
Canapin
6 مارس 2023، 10:53ص
35
قد يكون هذا مفيدًا لبعض التعديلات الإضافية https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
4 إعجابات
هل يمكنني إزالة هذا السطر واستخدام استعلامات الوسائط لتعطيله حتى 768 بكسل دون كسر كل شيء؟
أود إزالة الزر (لأن لدينا دردشات وفيديو هناك) على الأجهزة اللوحية، وأرى أن مربع البحث يناسب بشكل جيد حقًا.
إعجاب واحد (1)
volanar
13 يوليو 2023، 4:25م
37
كل شيء على ما يرام، ولكن في الإصدار المحمول تحتاج إلى التبديل إلى البحث القياسي، لأنه يبدو فظيعًا
إعجاب واحد (1)
Note
