Simple Jekyll Search
vements
ไลบรารี JavaScript เพื่อเพิ่มฟังก์ชันการค้นหาให้กับบล็อก 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 ที่จะแสดงหากข้อความค้นหาไม่ตรงกับสิ่งใดเลย
คุณสามารถจำกัดจำนวนโพสต์ที่แสดงบนเพจได้
เปิดใช้งานการค้นหาแบบคลุมเครือเพื่อให้การจับคู่มีข้อจำกัดน้อยลง
ส่งผ่านรายการคำที่คุณต้องการยกเว้น (คำจะถูกจับคู่กับ regex ดังนั้น 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 และคนอื่นๆ อีกมากมาย!
