jekyll lunr js search

Jekyll + lunr.js = เว็บไซต์แบบคงที่พร้อมการค้นหาข้อความแบบเต็มที่มีประสิทธิภาพโดยใช้ JavaScript

ใช้ lunr.js เพื่อให้การค้นหาข้อความแบบเต็มอย่างง่ายๆ โดยใช้ JavaScript ในเบราว์เซอร์ของคุณสำหรับเว็บไซต์ Jekyll static ของคุณ

แรงบันดาลใจจาก Jekyll + indextank ของ Pascal Widdershoven และปลั๊กอิน Sitemap.xml Generator ของ Michael Levin

ปลั๊กอิน Jekyll นี้จัดการการสร้างไฟล์ดัชนี .json ที่เข้ากันได้กับ lunr.js การกำหนดค่าการค้นหารันไทม์มีให้โดยปลั๊กอิน jQuery แบบธรรมดา

ช่วยให้สามารถค้นหาข้อความแบบเต็มของหน้าและโพสต์ Jekyll ทั้งหมดของคุณ ดำเนินการโดยไคลเอนต์โดยไม่มีการประมวลผลฝั่งเซิร์ฟเวอร์ (นอกการให้บริการไฟล์คงที่)

วิธีใช้

1. ติดตั้งปลั๊กอิน

เลือกที่จะติดตั้งเป็น Ruby Gem หรือโดยการคัดลอกไฟล์ปลั๊กอินที่สร้างไว้ล่วงหน้าไปยังไซต์ Jekyll ของคุณ

1ก. ติดตั้งเป็น Ruby Gem

1. ติดตั้ง jekyll-lunr-js-search Ruby Gem

    gem install jekyll-lunr-js-search
   

2. แก้ไขไฟล์ Jekyll _config.yml ของคุณเพื่อรวม Gem

    gems: ['jekyll-lunr-js-search']
   

1ข. ติดตั้งโดยการคัดลอกปลั๊กอินไปยังไซต์ Jekyll ของคุณ

1. วาง build/jekyll_lunr_js_search.rb ไว้ในโฟลเดอร์ _plugins ในรูทของไซต์ Jekyll ของคุณ

เนื้อหาจากโพสต์และเพจของ Jekyll ทั้งหมดจะถูกจัดทำดัชนีเป็นไฟล์ js/index.json ที่พร้อมสำหรับ lunr.js ในการใช้งาน สิ่งนี้จะเกิดขึ้นทุกครั้งที่มีการสร้างไซต์

ปลั๊กอิน jQuery มีให้ใน js/jquery.lunr.search.js เพื่อจัดการการกำหนดค่า lunr.js ด้วยข้อมูลดัชนีการค้นหา JSON ที่สร้างโดยปลั๊กอินนี้

การพึ่งพาปลั๊กอิน jQuery มีดังนี้

• jQuery
• lunr.js
• Moustache.js
• วันที่.format.js
• URI.js

เวอร์ชันที่สร้างไว้ล่วงหน้าของปลั๊กอิน jQuery พร้อมด้วยการขึ้นต่อกันทั้งหมดข้างต้น ที่ต่อกันและย่อให้เล็กลงนั้นมีให้ที่ build/search.min.js

2. คัดลอกปลั๊กอิน jQuery และเพิ่มการอ้างอิงสคริปต์

2ก. การใช้ปลั๊กอินย่อขนาดที่สร้างไว้ล่วงหน้าจากอัญมณี

ปลั๊กอินจะเพิ่มไฟล์ JavaScript ที่ย่อขนาด js/search.min.js ลงใน _site ของคุณโดยอัตโนมัติ

หากต้องการใช้งาน คุณต้องเพิ่มการอ้างอิงสคริปต์ที่ด้านล่างของหน้าการค้นหาที่ได้รับการเสนอชื่อ

    <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

2b. การใช้ปลั๊กอิน jQuery และจัดการการขึ้นต่อกันด้วยตัวเอง

1. คัดลอก js/jquery.lunr.search.js ไปยังไดเรกทอรี JavaScript ของไซต์ Jekyll ของคุณ

2. เพิ่มการอ้างอิงสคริปต์ที่ด้านล่างของหน้าการค้นหาที่คุณเสนอชื่อสำหรับ jquery.lunr.search.js และการขึ้นต่อกันแต่ละรายการที่สรุปไว้ด้านบน

    <script src="/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/lunr.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/URI.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>
   

ตรวจสอบให้แน่ใจว่าคุณใช้ lunr.js เวอร์ชันเดียวกันกับอัญมณี เอาต์พุตบันทึกของ Jekyll จะรวมเวอร์ชันที่ใช้ด้วย

ตามหลักการแล้ว คุณควรเชื่อม ลดขนาด และเพิ่มประสิทธิภาพไฟล์ .js ทั้งหกไฟล์นี้โดยใช้ uglify/Google closure/etc เพื่อสร้างไฟล์ search.min.js ไฟล์เดียวเพื่อใช้อ้างอิง (หรือใช้สคริปต์ที่สร้างไว้ล่วงหน้าตามที่อธิบายไว้ใน 2a ข้างต้น)

 <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

4. เพิ่มแบบฟอร์มการค้นหาพร้อมอินพุตแบบสอบถามตามที่แสดง

 <form action="/search" method="get">
  <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>

การค้นหาจะเกิดขึ้นในขณะที่คุณพิมพ์ เมื่อป้อนอักขระอย่างน้อยสามตัวแล้ว

การระบุการกระทำของแบบฟอร์มและการระบุวิธีการรับทำให้ผู้ใช้สามารถกด return/enter เพื่อส่งการค้นหาได้เช่นกัน แก้ไข URL การดำเนินการของแบบฟอร์มตามที่จำเป็นสำหรับหน้าการค้นหาบนเว็บไซต์ของคุณเอง

5. เพิ่มองค์ประกอบเพื่อให้มีรายการผลลัพธ์การค้นหา

 <section id="search-results" style="display: none;"> </section>

สิ่งนี้อาจถูกซ่อนไว้ในตอนแรกเนื่องจากปลั๊กอินจะแสดงองค์ประกอบเมื่อทำการค้นหา

6. สร้างเทมเพลตหนวดเพื่อแสดงผลการค้นหา

 {% raw %}
<script id="search-results-template" type="text/mustache">
  {{#entries}}
    <article>
      <h3>
        {{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
        <a href="{{url}}">{{title}}</a>
      </h3>
      {{#is_post}}
      <ul>
        {{#tags}}<li>{{.}} </li>{{/tags}}
      </ul>
      {{/is_post}}
    </article>
  {{/entries}}
</script>
{% endraw %}

โปรดสังเกตการใช้ {% raw %} และ {% endraw %} เพื่อให้แน่ใจว่า Jekyll จะไม่ลบแท็ก Moustache ออก

ฟิลด์ที่สามารถแสดงได้มีดังนี้

รายการ

รายการผลการค้นหา (บังคับ)

วันที่

วันที่เผยแพร่แบบดิบสำหรับโพสต์ หรือเป็นโมฆะสำหรับเพจ สามารถใช้เพื่อสลับการแสดงวันที่ต่อไปนี้ในเทมเพลต {{#date}}has a date{{/date}} {{#!date}}no date{{/date}}

เผยแพร่

วันที่เผยแพร่โพสต์ ซึ่งอยู่ในรูปแบบ 'yyyy-mm-dd' เพื่อใช้ในองค์ประกอบ html5 <time datetime="{{pubdate}}"> (โพสต์เท่านั้น)

วันที่แสดง

วันที่เผยแพร่โพสต์ จัดรูปแบบเป็น 'mmm dd, yyyy' เช่น 12 ต.ค. 2012 (เฉพาะโพสต์)

ชื่อ

ชื่อเพจหรือโพสต์ของ Jekyll

URL

URL ของเพจหรือโพสต์ของ Jekyll ที่สามารถใช้ในการสร้างไฮเปอร์ลิงก์ <a href="{{url}}">{{title}}</a>

หมวดหมู่

หมวดหมู่ (อาร์เรย์) ของหน้าหรือโพสต์ Jekyll สามารถใช้ในวง {{#categories}}{{.}} {{/categories}} เพื่อแสดงรายการได้

แท็ก

แท็ก (อาร์เรย์) ของเพจหรือโพสต์ Jekyll สามารถใช้ในวงวน {{#tags}}{{.}} {{/tags}} เพื่อแสดงรายการ

is_post

ค่า Booelan เป็นจริงหากองค์ประกอบผลลัพธ์ปัจจุบันคือการโพสต์ สามารถใช้เพื่อสลับการแสดงองค์ประกอบเฉพาะในเทมเพลต {{#is_post}}is a post{{/is_post}}

7. กำหนดค่าปลั๊กอิน jQuery สำหรับช่องป้อนข้อมูลการค้นหา

 <script type="text/javascript">
  $(function() {
    $('#search-query').lunrSearch({
      indexUrl  : '/js/index.json',           // url for the .json file containing search index data
      results   : '#search-results',          // selector for containing search results element
      template  : '#search-results-template', // selector for Mustache.js template
      titleMsg  : '<h1>Search results<h1>',   // message attached in front of results (can be empty)
      emptyMsg  : '<p>Nothing found.</p>'     // shown message if search returns no results
    });
  });
</script>

8. เพื่อแยกหน้าออกจากดัชนีการค้นหา

เพิ่มการตั้ง exclude_from_search ต่อไปนี้ในการกำหนดค่า YAML ของหน้าใดก็ได้

 exclude_from_search: true

หรือเพิ่มอาร์เรย์ของการยกเว้น (เป็นนิพจน์ทั่วไปแต่ละรายการ) ให้กับไฟล์ _config.yml ของไซต์

 lunr_search:
  excludes: [rss.xml, atom.xml]

9. หยุดคำพูด

คุณยังสามารถกำหนดค่าไฟล์คำหยุด และความยาวขั้นต่ำของคำที่จะรวมไว้ในไฟล์ดัชนีได้ ซึ่งสามารถทำได้โดยการเพิ่มบล็อกการค้นหาใน _config.yml ค่าเริ่มต้นคือ:

 lunr_search:
  stopwords: "stopwords.txt"
  min_length: 3

ไฟล์คำหยุดต้องประกอบด้วยหนึ่งคำต่อบรรทัด เป็นตัวพิมพ์เล็ก โดยไม่มีเครื่องหมายวรรคตอน

10. ไดเร็กทอรีข้อมูลสำรอง

คุณสามารถเลือกจัดเก็บ index.json , search.min.js และ lunr.min.js ในไดเร็กทอรีอื่นได้ดังนี้:

 lunr_search:
  js_dir: "javascript"

สาธิต

ปลั๊กอินการค้นหาถูกนำไปใช้กับ 10consulting.com/search ตัวอย่างคำค้นหาคือ /search/?q=git, /search/?q=cqrs

นอกจากนี้ยังมีการโหลดปลั๊กอินการค้นหา .js ตามความต้องการเมื่อเน้นไปที่ช่องค้นหาในหน้าแรก ดูคำขอเครือข่ายเบราว์เซอร์โดยคลิกเข้าไปในช่องค้นหา

อาคาร

เพื่อสร้างไฟล์ปลั๊กอิน jekyll_lunr_js_search.rb ไฟล์เดียว

ความต้องการ

ติดตั้ง Bundler จากนั้นเรียกใช้สิ่งต่อไปนี้

 bundle install

ติดตั้งโบเวอร์

เพื่อสร้างปลั๊กอิน

 rake build

จากนั้นคัดลอก build/jekyll_lunr_js_search.rb ไปยังโฟลเดอร์ _plugins ของไซต์ Jekyll ของคุณและไฟล์ build/*.min.js ไปยังโฟลเดอร์ js ของไซต์ของคุณ

หากคุณรวมไฟล์ .js และ .js.map คอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์จะลิงก์ไปยังโค้ดที่ไม่มีการย่อขนาด