Simple Jekyll Search
vements
مكتبة جافا سكريبت لإضافة وظيفة البحث إلى أي مدونة Jekyll.
هل لديك مدونة تم إنشاؤها باستخدام Jekyll، وتريد وظيفة بحث خفيفة في مدونتك، من جانب العميل فقط؟
لا توجد تكوينات خادم أو قواعد بيانات للمحافظة عليها .
5 دقائق فقط للحصول على مدونة قابلة للبحث تعمل بشكل كامل .
npm install simple-jekyll-searchsearch.json ضع الكود التالي في ملف يسمى search.json في جذر مدونة Jekyll الخاصة بك. (يمكنك أيضًا الحصول على نسخة من هنا)
سيتم استخدام هذا الملف كمصدر بيانات صغير لإجراء عمليات البحث من جانب العميل:
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] يحتاج SimpleJekyllSearch إلى عنصري DOM للعمل:
إليك الكود الذي يمكنك استخدامه مع التكوين الافتراضي:
تحتاج إلى وضع الكود التالي داخل التخطيط الذي تريد أن يظهر فيه البحث. (راجع قسم التكوين أدناه لتخصيصه)
على سبيل المثال في _layouts/default.html :
<!-- HTML elements for search -->
< input type =" text " id =" search-input " placeholder =" Search blog posts.. " >
< ul id =" results-container " > </ ul >
<!-- or without installing anything -->
< script src =" https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js " > </ script > قم بتخصيص SimpleJekyllSearch عن طريق تمرير خيارات التكوين الخاصة بك:
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) يقوم مثيل جديد لـ SimpleJekyllSearch بإرجاع كائن، مع خاصية search الوحيدة .
search هو وظيفة تستخدم لمحاكاة إدخال المستخدم وعرض النتائج المطابقة.
على سبيل المثال:
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )ويمكن استخدامه لتصفية المشاركات حسب العلامات أو الفئات!
فيما يلي قائمة بالخيارات المتاحة وأسئلة الاستخدام واستكشاف الأخطاء وإصلاحها والأدلة.
عنصر الإدخال الذي يجب أن يستمع إليه المكون الإضافي لحدث لوحة المفاتيح ويؤدي إلى البحث عن المقالات وعرضها.
عنصر الحاوية الذي يجب أن يتم عرض نتائج البحث فيه. عادةً ما يكون <ul> .
يمكنك إما تمرير عنوان URL إلى ملف search.json ، أو النتائج في شكل JSON مباشرة، لحفظ رحلة ذهابًا وإيابًا للحصول على البيانات.
قالب نتيجة بحث واحدة مقدمة.
إن بناء الجملة بسيط للغاية: ما عليك سوى تضمين الخصائص التي تريد استبدالها بأقواس متعرجة.
على سبيل المثال
القالب
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json' ,
searchResultTemplate : '<li><a href="{{ site.url }}{url}">{title}</a></li>'
} )سوف تقدم إلى ما يلي
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li > إذا كان search.json يحتوي على هذه البيانات
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]دالة سيتم استدعاؤها عند العثور على تطابق في القالب.
يتم تمرير اسم الخاصية الحالية وقيمة الخاصية والقالب.
إذا قامت الدالة بإرجاع قيمة غير محددة، فسيتم استبدالها في القالب.
قد يكون هذا مفيدًا لمعالجة عناوين URL وما إلى ذلك.
مثال:
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )راجع الاختبارات للحصول على مثال التعليمات البرمجية المتعمق
دالة سيتم استخدامها لفرز النتائج التي تمت تصفيتها.
يمكن استخدامه على سبيل المثال لتجميع الأقسام معًا.
مثال:
SimpleJekyllSearch ( {
...
sortMiddleware : function ( a , b ) {
var astr = String ( a . section ) + "-" + String ( a . caption ) ;
var bstr = String ( b . section ) + "-" + String ( b . caption ) ;
return astr . localeCompare ( bstr )
}
. . .
} )HTML الذي سيتم عرضه إذا لم يتطابق الاستعلام مع أي شيء.
يمكنك تحديد عدد المشاركات المعروضة على الصفحة.
قم بتمكين البحث الغامض للسماح بمطابقة أقل تقييدًا.
أدخل قائمة المصطلحات التي تريد استبعادها (ستتم مطابقة المصطلحات مع التعبير العادي، لذا يُسمح بعناوين URL والكلمات).
دالة يتم استدعاؤها بمجرد تحميل البيانات.
حدد عدد المرات التي يمكن فيها تنفيذ وظيفة البحث خلال النافذة الزمنية المحددة. يعد هذا مفيدًا بشكل خاص لتحسين تجربة المستخدم عند البحث في مجموعة بيانات كبيرة (إما بمصطلحات نادرة أو لأن عدد المشاركات المعروضة كبير). إذا لم يتم توفير debounceTime (ملي ثانية) فسيتم تشغيل البحث عند كل ضغطة مفتاح.
remove_chars كمرشح.على سبيل المثال: في search.json، استبدل
"content" : " {{ page.content | strip_html | strip_newlines }} "مع
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} " إذا لم ينجح هذا عند استخدام صفحات Github، فيمكنك تجربة jsonify للتأكد من أن المحتوى متوافق مع json:
"content" : { { page . content | jsonify } } ملاحظة: لا تحتاج إلى استخدام علامات الاقتباس " في هذا نظرًا لأن jsonify يقوم بإدراجها تلقائيًا.
استبدل search.json بالكود التالي:
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}",
" content " : "{{ post.content | strip_html | strip_newlines }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
,
{% for page in site.pages %}
{
{% if page.title != nil %}
" title " : "{{ page.title | escape }}",
" category " : "{{ page.category }}",
" tags " : "{{ page.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ page.url }}",
" date " : "{{ page.date }}",
" content " : "{{ page.content | strip_html | strip_newlines }}"
{% endif %}
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] npm installnpm test cd example ; jekyll serve
# in another tab
npm run cypress -- runشكرا لجميع المساهمين على مر السنين! أنت الأفضل :)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber وغيرهم الكثير!
