jekyll lunr js search Unduh - jekyll lunr js search Unduh kode sumber

jekyll lunr js search

Kode sumber lainnya

1.0.0

Unduh

Jekyll + lunr.js = Situs web statis dengan pencarian teks lengkap yang canggih menggunakan JavaScript

Gunakan lunr.js untuk menyediakan pencarian teks lengkap sederhana, menggunakan JavaScript di browser Anda, untuk situs web statis Jekyll Anda.

Terinspirasi oleh Jekyll+ Indextank dari Pascal Widdershoven dan plugin Sitemap.xml Generator dari Michael Levin.

Plugin Jekyll ini menangani pembuatan file indeks .json yang kompatibel dengan lunr.js. Konfigurasi pencarian runtime disediakan oleh plugin jQuery sederhana.

Ini memungkinkan pencarian teks lengkap dari semua halaman dan postingan Jekyll Anda. Dieksekusi oleh klien tanpa pemrosesan sisi server (di luar menyajikan file statis).

Cara menggunakan

1. Instal pluginnya

Pilih untuk menginstal sebagai Permata Ruby, atau dengan menyalin file plugin yang sudah dibuat sebelumnya ke situs Jekyll Anda.

1a. Instal sebagai Permata Ruby

Instal Permata Ruby jekyll-lunr-js-search.
```
 gem install jekyll-lunr-js-search
```
Ubah file Jekyll _config.yml Anda untuk menyertakan Permata.
```
 gems: ['jekyll-lunr-js-search']
```

1b. Instal dengan menyalin plugin ke situs Jekyll Anda.

Tempatkan build/jekyll_lunr_js_search.rb di dalam folder _plugins di root situs Jekyll Anda.

Konten dari semua postingan dan halaman Jekyll akan diindeks ke file js/index.json yang siap digunakan oleh lunr.js. Hal ini terjadi setiap kali situs dibuat.

Plugin jQuery disediakan di js/jquery.lunr.search.js untuk menangani konfigurasi lunr.js dengan data JSON indeks pencarian yang dihasilkan oleh plugin ini.

Dependensi untuk plugin jQuery adalah sebagai berikut.

jQuery
lunr.js
Kumis.js
tanggal.format.js
URI.js

Versi plugin jQuery yang telah dibuat sebelumnya, bersama dengan semua dependensi di atas, digabungkan dan diperkecil tersedia di build/search.min.js.

2. Salin plugin jQuery dan tambahkan referensi skrip.

2a. Menggunakan plugin yang sudah dibuat sebelumnya dan diperkecil dari permata.

Plugin akan secara otomatis menambahkan file JavaScript yang diperkecil js/search.min.js ke _site Anda.

Untuk menggunakannya, Anda harus menambahkan referensi skrip ke bagian bawah halaman pencarian yang Anda nominasikan.

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

2b. Menggunakan plugin jQuery dan mengelola sendiri dependensinya.

Salin js/jquery.lunr.search.js ke direktori JavaScript situs Jekyll Anda.

Tambahkan referensi skrip ke bagian bawah halaman pencarian nominasi Anda untuk jquery.lunr.search.js dan masing-masing dependensi yang diuraikan di atas.

 <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>

Pastikan Anda menggunakan versi lunr.js yang sama dengan permatanya. Output log Jekyll menyertakan versi yang digunakan.

Idealnya Anda menggabungkan, memperkecil, dan mengoptimalkan enam file .js ini menggunakan uglify/Google penutupan/etc untuk menghasilkan satu file search.min.js sebagai referensi (atau menggunakan skrip yang sudah dibuat sebelumnya seperti dijelaskan pada 2a di atas).

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

4. Tambahkan formulir pencarian dengan input kueri seperti yang ditunjukkan.

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

Pencarian terjadi saat Anda mengetik, setelah setidaknya tiga karakter dimasukkan.

Memberikan tindakan formulir dan menentukan metode get memungkinkan pengguna menekan return/enter untuk juga mengirimkan pencarian. Ubah URL tindakan formulir seperlunya untuk halaman pencarian di situs Anda sendiri.

5. Tambahkan elemen untuk memuat daftar entri hasil pencarian.

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

Ini mungkin awalnya disembunyikan karena plugin akan menampilkan elemen tersebut saat mencari.

6. Buat template Kumis untuk menampilkan hasil pencarian.

 {% 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 %}

Perhatikan penggunaan {% raw %} dan {% endraw %} untuk memastikan tag Moustache tidak dihapus oleh Jekyll.

Bidang yang tersedia untuk ditampilkan adalah sebagai berikut.

entri

Daftar entri hasil pencarian (wajib).

tanggal

Tanggal penerbitan mentah untuk postingan, atau nol untuk halaman. Dapat digunakan untuk mengganti tampilan tanggal berikut di template {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .

mempublikasikan

Tanggal publikasi postingan, diformat sebagai 'yyyy-mm-dd', untuk digunakan dalam elemen <time datetime="{{pubdate}}"> html5 (khusus postingan).

tanggal tampilan

Tanggal publikasi postingan, dengan format 'mmm dd, yyyy', misalnya 12 Okt 2012 (khusus postingan)

judul

Judul halaman atau postingan Jekyll.

url

URL halaman atau postingan Jekyll yang dapat digunakan untuk membuat hyperlink <a href="{{url}}">{{title}}</a> .

kategori

Kategori (array) halaman atau postingan Jekyll, dapat digunakan dalam loop {{#categories}}{{.}} {{/categories}} untuk mencantumkannya.

tag

Tag (array) halaman atau postingan Jekyll, dapat digunakan dalam loop {{#tags}}{{.}} {{/tags}} untuk mencantumkannya.

is_post

Nilai Booelan, benar jika elemen hasil saat ini adalah sebuah postingan. Dapat digunakan untuk mengganti tampilan elemen tertentu dalam template {{#is_post}}is a post{{/is_post}}

7. Konfigurasikan plugin jQuery untuk kolom input pencarian.

 <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. Untuk mengecualikan halaman dari indeks pencarian.

Tambahkan pengaturan exclude_from_search berikut ke konfigurasi YAML laman mana pun.

 exclude_from_search: true

Atau tambahkan serangkaian pengecualian (sebagai ekspresi reguler individual) ke file _config.yml situs.

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

9. Hentikan Kata-kata

Anda juga dapat mengonfigurasi file stopwords, dan panjang minimum kata untuk disertakan dalam file indeks. Hal ini dapat dilakukan dengan menambahkan blok pencarian ke _config.yml . Nilai defaultnya adalah:

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

File stopwords harus terdiri dari satu kata per baris, dalam huruf kecil, tanpa tanda baca.

10. Direktori data alternatif

Anda dapat memilih untuk menyimpan index.json , search.min.js dan lunr.min.js di direktori berbeda seperti ini:

 lunr_search:
  js_dir: "javascript"

Demo

Plugin pencarian diterapkan ke 10consulting.com/search. Beberapa contoh kueri penelusuran adalah /search/?q=git, /search/?q=cqrs.

Ia juga menampilkan pemuatan plugin pencarian .js sesuai permintaan saat memfokuskan ke bidang pencarian di beranda. Lihatlah permintaan jaringan browser dengan mengklik input pencarian.