gridea search

المكون الإضافي لموضوع البحث عن مقالة عميل الموقع الثابت Gridea

معاينة: https://kytrun.com، أو قم بتنزيل هذا المشروع، ثم ضع example/ في مسار سمات Gridea، وقم بتشغيل Gridea بنفسك.

إنها مناسبة فقط لمطوري سمات Gridea الذين لديهم أساس في برمجة الواجهة الأمامية؛ ويمكن الاطلاع على السمات التي تستخدم Grinda-search هنا .

سمات:

• صفحات نتائج البحث المستقلة وروابط الويب
• يمكن لمطوري السمات إعادة استخدام القوالب الموجودة بدرجة عالية
• توسيع نطاق استخدام واجهة برمجة التطبيقات (API) الرسمية، بدون تكاليف تعليمية إضافية
• قم بتحميل الموارد المطلوبة فقط باستخدام البحث
• دعم تخصيص النمط
• التوافق الجيد

بداية سريعة:

1. خذ قالب تطوير القالب الرسمي كمثال وأضف ملفات جديدة بناءً عليه:

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. قم بتعديل الملفات التالية

(1) ./templates/api.ejs

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

(2) ./templates/includes/header.ejs

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

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

لا يمكن تعديل الجزء الموجود، ويمكن إضافة سمات أخرى مثل الفئة أو النمط.

(3) ./templates/search.ejs

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

• يجب وضع البرنامج النصي التابع <script> قبل </body> ولا تقم بتغيير الترتيب بشكل تعسفي لمنع حدوث أخطاء في التحميل.

(4) ./assets/media/gridea-search/result-template.ejs

يتم تحليل قالب قائمة نتائج البحث من جانب المتصفح وإعادة استخدامه بشكل أساسي ./templates/includes/post-list.ejs، ولكن يتم تعديل محتوى الملخص <%- post.abstract %> إلى <%- post.searchedPreview %> ، استخدام معاينة نتائج البحث التي تحتوي على كلمات رئيسية.

• قائمة نتائج البحث لا تحتوي على وظيفة ترقيم الصفحات حتى الآن، يرجى عدم استخدام حقل pagination .

تخصيص النمط:

1. عرض نتائج البحث وعدم وجود نتائج بحث

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >

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

2. بحث في مربع الإدخال

• احتفظ بالسمات الموجودة وأضف سمات جديدة وأضف أيقونات أو رسوم متحركة.

3. تسليط الضوء على الكلمات الرئيسية

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style > 

آخر:

• المواضيع باستخدام Gridea-search

• هيكل الدليل الرسمي ووصف متغير الصفحة

• مكتبات الطرف الثالث:

  • البحث الغامض للواجهة الأمامية - Fuse.js: https://github.com/krisk/fuse

  • تحليل القالب - EJS: https://github.com/mde/ejs

• ترخيص مفتوح المصدر: معهد ماساتشوستس للتكنولوجيا

• مقالات ذات صلة:

  • إضافة وظيفة البحث إلى مدونة Gridea