Simple Jekyll Search

Pencarian Jekyll Sederhana

Pustaka JavaScript untuk menambahkan fungsionalitas pencarian ke blog Jekyll mana pun.

Kasus penggunaan

Anda memiliki blog, dibuat dengan Jekyll, dan menginginkan fungsi pencarian ringan di blog Anda, murni sisi klien?

Tidak ada konfigurasi server atau database yang harus dipelihara .

Hanya 5 menit untuk memiliki blog yang dapat dicari dan berfungsi sepenuhnya .

---

Instalasi

npm

npm install simple-jekyll-search

Memulai

Buat search.json

Tempatkan kode berikut dalam file bernama search.json di root blog Jekyll Anda. (Anda juga bisa mendapatkan salinannya dari sini)

File ini akan digunakan sebagai sumber data kecil untuk melakukan pencarian di sisi klien:

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

Mempersiapkan plugin

Tambahkan elemen DOM

SimpleJekyllSearch memerlukan dua elemen DOM agar berfungsi:

• bidang masukan pencarian
• wadah hasil untuk menampilkan hasilnya

Beri aku kodenya

Berikut kode yang dapat Anda gunakan dengan konfigurasi default:

Anda perlu menempatkan kode berikut dalam tata letak tempat Anda ingin pencarian muncul. (Lihat bagian konfigurasi di bawah untuk menyesuaikannya)

Misalnya di _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 > 

Penggunaan

Sesuaikan SimpleJekyllSearch dengan meneruskan opsi konfigurasi Anda:

 var sjs = SimpleJekyllSearch ( {
  searchInput : document . getElementById ( 'search-input' ) ,
  resultsContainer : document . getElementById ( 'results-container' ) ,
  json : '/search.json'
} )

kembali { cari }

Contoh baru SimpleJekyllSearch mengembalikan objek, dengan satu-satunya properti search .

search adalah fungsi yang digunakan untuk mensimulasikan input pengguna dan menampilkan hasil yang cocok.

Misalnya:

 var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )

ini dapat digunakan untuk memfilter postingan berdasarkan tag atau kategori!

Pilihan

Berikut adalah daftar opsi yang tersedia, pertanyaan penggunaan, pemecahan masalah & panduan.

searchInput (Elemen) [wajib]

Elemen masukan tempat plugin harus mendengarkan peristiwa keyboard dan memicu pencarian dan rendering artikel.

resultContainer (Elemen) [wajib]

Elemen penampung tempat hasil pencarian harus dirender. Biasanya <ul> .

json (String|JSON) [wajib]

Anda dapat meneruskan URL ke file search.json , atau hasilnya langsung dalam bentuk JSON, untuk menghemat satu perjalanan pulang pergi untuk mendapatkan data.

searchResultTemplate (String) [opsional]

Templat dari satu hasil penelusuran yang dirender.

Sintaks templating sangat sederhana: Anda cukup mengapit properti yang ingin Anda ganti dengan kurung kurawal.

Misalnya

Templat

 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>'
} )

akan memberikan yang berikut ini

 < li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li >

Jika search.json berisi data ini

[
    {
      "title"    : " Welcome to Jekyll! " ,
      "category" : " " ,
      "tags"     : " " ,
      "url"      : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
      "date"     : " 2014-11-01 21:07:22 +0100 "
    }
]

templateMiddleware (Fungsi) [opsional]

Sebuah fungsi yang akan dipanggil setiap kali ditemukan kecocokan dalam template.

Itu akan melewati nama properti saat ini, nilai properti, dan template.

Jika fungsi mengembalikan nilai yang tidak ditentukan, fungsi tersebut akan diganti di templat.

Ini berpotensi berguna untuk memanipulasi URL, dll.

Contoh:

 SimpleJekyllSearch ( {
  ...
  templateMiddleware : function ( prop , value , template ) {
    if ( prop === 'bar' ) {
      return value . replace ( / ^/ / , '' )
    }
  }
  . . .
} )

Lihat pengujian untuk contoh kode yang mendalam

sortMiddleware (Fungsi) [opsional]

Fungsi yang akan digunakan untuk mengurutkan hasil yang difilter.

Ini dapat digunakan misalnya untuk mengelompokkan bagian-bagian menjadi satu.

Contoh:

 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 )
  }
  . . .
} )

noResultsText (String) [opsional]

HTML yang akan ditampilkan jika kueri tidak cocok dengan apa pun.

batas (Nomor) [opsional]

Anda dapat membatasi jumlah postingan yang dirender pada halaman.

kabur (Boolean) [opsional]

Aktifkan pencarian fuzzy untuk memungkinkan pencocokan yang tidak terlalu ketat.

kecualikan (Array) [opsional]

Masukkan daftar istilah yang ingin Anda kecualikan (istilah akan dicocokkan dengan ekspresi reguler, jadi URL, kata diperbolehkan).

sukses (Fungsi) [opsional]

Sebuah fungsi dipanggil setelah data dimuat.

debounceTime (Nomor) [opsional]

Batasi berapa kali fungsi pencarian dapat dijalankan selama jangka waktu tertentu. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna saat menelusuri kumpulan data yang besar (baik dengan istilah yang jarang atau karena jumlah postingan yang akan ditampilkan banyak). Jika tidak ada debounceTime (milidetik) yang disediakan, pencarian akan dipicu pada setiap penekanan tombol.

---

Jika pencarian tidak berfungsi karena JSON tidak valid

• Ada plugin filter di folder _plugins yang seharusnya menghapus sebagian besar karakter yang menyebabkan JSON tidak valid. Untuk menggunakannya, tambahkan file simple_search_filter.rb ke folder _plugins Anda, dan gunakan remove_chars sebagai filter.

Misalnya: di search.json, ganti

 "content" : " {{ page.content | strip_html | strip_newlines }} "

dengan

 "content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} "

Jika ini tidak berhasil saat menggunakan halaman Github, Anda dapat mencoba jsonify untuk memastikan kontennya kompatibel dengan json:

 "content" : { { page . content | jsonify } }

Catatan: Anda tidak perlu menggunakan tanda kutip " karena jsonify secara otomatis memasukkannya.

Mengaktifkan pencarian teks lengkap

Ganti search.json dengan kode berikut:

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

Perkembangan

• npm install
• npm test

Tes penerimaan

 cd example ; jekyll serve

# in another tab

npm run cypress -- run

Kontributor

Terima kasih kepada semua kontributor selama bertahun-tahun! Kamu yang terbaik :)

@daviddarnes @XhmikosR @PeterDaveHalo @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber dan banyak lainnya!

Pengamat bintang dari waktu ke waktu