Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Mencari Hantu

Plugin pencarian teks lengkap javascript murni, ringan & dalam browser untuk Ghost (blog)

Keterangan

SearchinGhost adalah mesin pencari ringan dan dapat diperluas yang didedikasikan untuk platform blog Ghost. Pada intinya, ia menggunakan Ghost Content API untuk memuat konten blog Anda dan perpustakaan FlexSearch yang kuat untuk mengindeks dan mengeksekusi permintaan pencarian.

Semuanya terjadi di browser klien, ini membantu kami memberikan hasil pencarian yang sangat cepat dan menampilkannya secara real-time kepada pengguna Anda (alias "search-as-you-type"). Kami juga berhati-hati dalam meminimalkan beban jaringan dengan mengandalkan localStorage browser yang hanya mengirimkan permintaan bila diperlukan.

Blog Anda menggunakan bahasa Sirilik, Cina, Korea, Yunani, India, atau bahasa non-latin lainnya? Jangan khawatir, ini didukung, lihat bagian khusus.

BONUS : jika Anda menyukai konsepnya tetapi ingin menginstalnya dengan cepat dan mudah (kurang dari 3 menit kok!), silakan kunjungi proyek SearchingGhostEasy.

Demo

Sebelum mendalami instalasi dan konfigurasi, cobalah sendiri dengan Demo Langsung ini.

Pada demo ini, konten yang dapat dicari berasal dari API demo Ghost resmi (yaitu https://demo.ghost.io). Pilihan diatur ke default sehingga setiap kata masukan dicari ke dalam judul posting, tag, kutipan dan konten utama.

Misalnya, cari kata "marmalade". Itu tidak ada dalam judul posting, kutipan atau tag apa pun tetapi digunakan satu kali dalam artikel "Down The Rabbit Hole", itulah sebabnya Anda akan mendapatkannya sebagai hasilnya.

Mulai Cepat

Pertama, perbarui file default.hbs tema Anda untuk menyertakan kolom masukan dan elemen keluaran untuk menampilkan hasil pencarian. Kemudian, tambahkan tautan ke skrip SearchingGhost dan inisialisasi dengan CONTENT_API_KEY Anda sendiri. Untuk mendapatkan kunci API konten, silakan merujuk ke dokumentasi resmi Ghost. 

 < input id =" search-bar " >
< ul id =" search-results " > </ ul >

< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/searchinghost.min.js " > </ script >
< script >
    var searchinGhost = new SearchinGhost ( {
        key : 'CONTENT_API_KEY'
    } ) ;
</ script >

Itu saja, semuanya sudah selesai! Jika Anda memerlukan konfigurasi yang lebih detail, silakan baca bagian selanjutnya.

Instalasi

Anda dapat menginstal SearchingGhost menggunakan berbagai metode, berikut kemungkinannya:

  1. Dari Jaringan Pengiriman Konten (CDN)

Ini adalah metode termudah dan pilihan untuk menginstal SearchingGhost. Tambahkan salah satu skrip ini ke tema Anda default.hbs . Kami juga merekomendasikan penggunaan jsdelivr daripada unpkg karena keandalan dan kinerjanya. 

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/searchinghost.min.js " > </ script >
<!-- OR -->
< script src =" https://unpkg.com/[email protected]/dist/searchinghost.min.js " > </ script >
  1. Dari sumber

Jika Anda ingin menyajikan SearchinGhost dari server Anda sendiri atau memasukkannya ke dalam proses pembangunan, Anda bisa mendapatkannya dari aset halaman rilis atau mengunduh file dist/searchinghost.min.js .

  1. Dari NPM

Instal SearchingGhost sebagai ketergantungan proyek. 

$ npm install searchinghost
# OR
$ yarn add searchinghost

Kemudian, muat dari file Javascript apa pun. 

 import SearchinGhost from 'searchinghost' ;
// OR
var SearchinGhost = require ( 'searchinghost' ) ;

Konfigurasi

Satu-satunya bidang konfigurasi wajib adalah key . Bidang lainnya memiliki nilai default dan menjadi opsional.

SearchingGhost telah dirancang untuk bekerja secara out of the box, konfigurasi minimal ini namun tetap kuat! Pada setiap penekanan tombol, ia akan mencari judul posting, tag, kutipan dan konten. Ini adalah perilaku default karena tampaknya ini yang paling umum. 

 // SearchinGhost minimal configuration
var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>'
} ) ;

Namun demikian, sedikit konfigurasi tambahan mungkin bermanfaat untuk memenuhi kebutuhan Anda. Katakanlah Anda hanya ingin mencari title dan menampilkan kolom title published_at untuk setiap posting yang ditemukan. Anda dapat menggunakan konfigurasi ini: 

 var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>' ,
    postsFields : [ 'title' , 'url' , 'published_at' ] ,
    postsExtraFields : [ ] ,
    postsFormats : [ ] ,
    indexedFields : [ 'title' ] ,
    template : function ( post ) {
        return `<a href=" ${ post . url } "> ${ post . published_at } - ${ post . title } </a>`
    }
} ) ;

SearchingGhost mudah disesuaikan dan diperluas melalui konfigurasinya, luangkan waktu Anda untuk melihat setiap opsi dari bagian berikutnya.

Pilihan

Konfigurasi default lengkap 

 {
    key : '' ,
    url : window . location . origin ,
    version : 'v3' ,
    loadOn : 'focus' ,
    searchOn : 'keyup' ,
    limit : 10 ,
    inputId : [ 'search-bar' ] ,
    outputId : [ 'search-results' ] ,
    outputChildsType : 'li' ,
    postsFields : [ 'title' , 'url' , 'excerpt' , 'custom_excerpt' , 'published_at' , 'feature_image' ] ,
    postsExtraFields : [ 'tags' ] ,
    postsFormats : [ 'plaintext' ] ,
    indexedFields : [ 'title' , 'string_tags' , 'excerpt' , 'plaintext' ] ,
    template : function ( post ) {
        var o = `<a href=" ${ post . url } ">`
        if ( post . feature_image ) o += `<img src=" ${ post . feature_image } ">`
        o += '<section>'
        if ( post . tags . length > 0 ) {
            o += `<header>
                    <span class="head-tags"> ${ post . tags [ 0 ] . name } </span>
                    <span class="head-date"> ${ post . published_at } </span>
                  </header>`
        } else {
            o += `<header>
                    <span class="head-tags">UNKNOWN</span>
                    <span class="head-date"> ${ post . published_at } </span>
                  </header>`
        }
        o += `<h2> ${ post . title } </h2>`
        o += `</section></a>`
        return o ;
    } ,
    emptyTemplate : function ( ) { } ,
    customProcessing : function ( post ) {
        if ( post . tags ) post . string_tags = post . tags . map ( o => o . name ) . join ( ' ' ) . toLowerCase ( ) ;
        return post ;
    } ,
    date : {
        locale : document . documentElement . lang || "en-US" ,
        options : { year : 'numeric' , month : 'short' , day : 'numeric' }
    } ,
    cacheMaxAge : 1800 ,
    onFetchStart : function ( ) { } ,
    onFetchEnd : function ( posts ) { } ,
    onIndexBuildStart : function ( ) { } ,
    onIndexBuildEnd : function ( index ) { } ,
    onSearchStart : function ( ) { } ,
    onSearchEnd : function ( posts ) { } ,
    indexOptions : { } ,
    searchOptions : { } ,
    debug : false
} ) ;

Semua opsi yang tersedia

  • kunci (string, wajib)

Kunci API konten publik untuk mendapatkan akses ke data blog.

contoh: '22444f78447824223cefc48062'

  • url (string)

Nama domain lengkap dari Ghost API.

contoh: 'https://demo.ghost.io'

default: window.location.origin

  • versi (string)

Setel versi Ghost API. Bekerja dengan 'v2' dan 'v3' .

bawaan: 'v3'

  • memuatPada (string)

Tetapkan strategi pemuatan perpustakaan. Hal ini dapat dipicu ketika halaman HTML telah dimuat, sesuai permintaan ketika pengguna mengklik pada bilah pencarian atau tidak sama sekali.

Untuk memicu inisialisasi bilah pencarian sendiri, setel nilai ini ke false (boolean). Dengan cara ini, Anda dapat memanggil searchinGhost.loadData() ketika kode Anda yang lain sudah siap.

nilai yang diharapkan: 'page' , 'focus' atau false

bawaan: 'focus'

  • pencarianPada (string)

Pilih kapan permintaan pencarian harus dijalankan. Untuk mencari di setiap ketukan tombol pengguna dan pengiriman formulir, gunakan 'keyup' . Untuk mencari hanya ketika pengguna mengirimkan formulir melalui tombol atau memasukkan tombol 'enter', gunakan 'submit' . Jika Anda ingin memiliki kontrol penuh atas kode javascript Anda sendiri, gunakan false (boolean) dan jalankan pencarian sendiri menggunakan searchinGhost.search("...") .

nilai yang diharapkan: 'keyup' , 'submit' atau false

bawaan: 'keyup'

  • batas (angka)

Tetapkan jumlah maksimum postingan yang dikembalikan oleh permintaan pencarian. Nilai apa pun antara 1 dan 50 akan sangat cepat dan nilai yang lebih rendah dari 1000 tidak akan menurunkan kinerja terlalu banyak. Tapi ingat, ketika mesin pencari mencapai batas ini, mesin pencari berhenti menggali dan mengembalikan hasilnya: semakin rendah, semakin baik.

Meskipun sangat tidak disarankan, tetapkan nilai ini menjadi 0 untuk menampilkan semua hasil yang tersedia.

bawaan: 10

  • inputId (array string)

[Tidak digunakan lagi] Sebelum v1.6.0 , bidang ini adalah string , perilaku ini tidak digunakan lagi.

Situs web Anda mungkin memiliki satu atau beberapa bilah pencarian, yang masing-masing harus memiliki atribut id HTML yang unik. Masukkan setiap id bilah pencarian ke dalam array ini. Jangan sertakan '#' pada nama.

Jika Anda tidak memerlukan kolom input apa pun, setel nilainya ke [] (array kosong) dan setel juga searchOn ke false (boolean). Kemudian, jalankan pencarian menggunakan searchinGhost.search("<your query>") .

default: ['search-bar']

  • outputId (array string)

[Tidak digunakan lagi] Sebelum v1.6.0 , bidang ini adalah string , perilaku ini tidak digunakan lagi.

Situs web Anda dapat menggunakan satu atau lebih elemen HTML untuk menampilkan hasil pencarian. Array ini mereferensikan semua atribut id elemen keluaran ini. Jika salah satu elemen ini sudah memiliki konten, maka akan ditimpa oleh hasil pencarian.

Jika Anda menggunakan kerangka JS untuk menampilkan hasil pencarian, setel nilai ini ke [] (array kosong). Anda akan mendapatkan postingan yang ditemukan sebagai nilai yang dikembalikan oleh fungsi searchinGhost.search("<your query>") .

default: ['search-results']

  • keluaranChildsType (string)

[Tidak digunakan lagi] Sebelum v1.6.0 , bidang ini adalah string . ini sudah tidak digunakan lagi.

Setiap hasil pencarian dibungkus di dalam elemen anak sebelum ditambahkan ke elemen induk outputId . Tipe defaultnya adalah li tetapi Anda dapat menyetelnya ke elemen HTML apa pun yang valid (lihat dokumen MDN).

Jika Anda tidak ingin menggunakan elemen pembungkus untuk langsung menambahkan hasil template dan emptyTemplate ke elemen keluaran, setel nilainya ke false (boolean).

bawaan: 'li'

  • postsFields (array string)

Serangkaian semua bidang posting yang diinginkan. Semua kolom ini akan tersedia di fungsi template untuk menampilkan informasi postingan yang berguna.

Lihat dokumentasi resmi "bidang".

Catatan: jika Anda menggunakan 'custom_excerpt' , kontennya akan otomatis dimasukkan ke dalam 'excerpt' untuk mempermudah pembuatan template.

bawaan: ['title', 'url', 'excerpt', 'custom_excerpt', 'published_at', 'feature_image']

  • postsExtraFields (array string)

Array ini memungkinkan Anda untuk menggunakan bidang tambahan seperti tags atau authors . Saya pribadi tidak tahu mengapa mereka tidak menggunakan "bidang" lain tetapi Ghost API dirancang seperti ini...

Tetapkan nilainya ke [] (array kosong) untuk menonaktifkannya sepenuhnya.

Lihat dokumentasi resmi "sertakan".

bawaan: ['tags']

  • postsFormats (array string)

Ini sesuai dengan "format" Ghost API yang memungkinkan penggunaan untuk mengambil konten posting dengan HTML atau teks biasa.

Tetapkan nilainya ke [] (array kosong) untuk menonaktifkannya sepenuhnya.

Silakan merujuk ke dokumentasi resmi "format".

default: ['plaintext']

  • indexedFields (array string)

Daftar bidang yang diindeks. Isi dari semua bidang ini akan dapat dicari.

Semua nilai dalam daftar ini harus ditentukan dalam postingan. Jika tidak, hasil pencarian tidak akan akurat namun aplikasi tidak akan mogok! Periksa kembali nilai postsFields , postsExtraFields , dan postsFormats .

CATATAN : bidang aneh 'string_tags' ditambahkan di opsi customProcessing . Jika Anda ingin menggunakan tag, hal buruk ini diperlukan (untuk saat ini) karena FlexSearch tidak dapat menangani array dengan benar. Jika Anda tidak ingin/menyukainya, ganti customProcessing untuk hanya mengembalikan posts tanpa modifikasi tambahan. Jika Anda memutuskan untuk menggunakan tag, harap gunakan juga 'string_tags' di sini.

default: ['title', 'string_tags', 'excerpt', 'plaintext']

  • templat (fungsi)

Tentukan templat hasil Anda sendiri. Templat ini akan digunakan untuk setiap postingan yang ditemukan untuk menghasilkan hasil dan ditambahkan sebagai elemen turunan ke elemen keluaran. Tidak ada mesin templating, hanya fungsi javascript asli yang menggunakan objek post sebagai argumen.

Opsi templat ini jauh lebih canggih dari yang Anda duga. Kita juga dapat menganggapnya sebagai fungsi pemrosesan khusus yang dipanggil pada hasil pencarian. Misalnya, jika Anda ingin melakukan pemfilteran, jangan kembalikan apa pun (misalnya return; ) atau string kosong (misalnya return ""; ) untuk membuang item.

Harap perhatikan penggunaan tanda kutip terbalik (misalnya '`') daripada tanda kutip tunggal/ganda. Ini diperlukan untuk mengaktifkan interpolasi variabel javascript yang sangat berguna.

Variabel yang tersedia adalah variabel yang ditentukan dalam opsi postsFields .

contoh: 

template: function ( post ) {
   return `<a href=" ${ post . url } "># ${ post . tags } - ${ post . published_at } - ${ post . title } </a>`
}
  • Templat kosong (fungsi)

Tentukan templat hasil Anda sendiri bila tidak ada hasil yang ditemukan.

contoh: 

emptyTemplate: function ( ) {
  return '<p>Sorry, nothing found...</p>'
}
  • Pemrosesan khusus (fungsi)

Anda perlu melakukan modifikasi tambahan pada data postingan yang diambil dari Ghost? Gunakan fungsi ini untuk melakukan apa pun yang Anda perlukan. Fungsi ini dipanggil pada setiap postingan, dijalankan setelah onFetchEnd() dan sebelum onIndexBuildStart() .

Jika Anda ingin membuang postingan, kembalikan nilai JS apa pun yang salah (misalnya null , undefined , false , "" , ...).

Untuk men-debug input/output Anda dengan mudah, gunakan onFetchEnd() dan onIndexBuildEnd() untuk menampilkan hasilnya dengan console.log() . Jika Anda adalah pengguna yang lebih mahir, pilihan terbaik adalah tetap menggunakan debugger. Juga, jangan lupa untuk membersihkan cache lokal Anda saat pengujian!

note : secara default, opsi ini sudah diisi dengan fungsi pembantu untuk memudahkan penggunaan field "tag" pada postingan. Lihat opsi indexedFields .

contoh: 

customProcessing: function ( post ) {
  post . extra_field = "hello" ;
  return post ;
}
  • tanggal (objek)

Tentukan format tanggal yang diambil dari postingan.

Lihat referensi MDN untuk mendapatkan informasi lebih lanjut.

contoh: 

date: {
    locale : "fr-FR" ,
    options : { weekday : 'long' , year : 'numeric' , month : 'long' , day : 'numeric' }
}
  • cacheMaxAge (angka)

Tetapkan usia maksimum cache dalam hitungan detik. Selama jangka waktu ini, jika indeks yang sudah ada ditemukan di penyimpanan lokal, indeks tersebut akan dimuat tanpa permintaan HTTP tambahan untuk mengonfirmasi validitasnya. Saat cache dibersihkan, nilainya diatur ulang.

Hal ini sangat berguna untuk menghemat broadband dan beban jaringan server Anda. Nilai defaultnya diatur ke setengah jam. Nilai ini berasal dari durasi sesi pengguna default yang digunakan oleh Google Analytics.

standar: 1800

  • onFetchStart (fungsi)

Tentukan fungsi panggilan balik sebelum kita mengambil data dari Ghost API.

Fungsi ini tidak memerlukan argumen.

contoh: 

onFetchStart: function ( ) {
  console . log ( "before data fetch" ) ;
}
  • onFetchEnd (fungsi)

Tentukan fungsi panggilan balik ketika pengambilan selesai. Meskipun modifikasi yang dilakukan pada posts tetap ada, kami merekomendasikan penggunaan fungsi customProcessing() untuk melakukannya.

Fungsi ini mengambil satu argumen: array dari semua postingan yang dikembalikan oleh Ghost itu sendiri.

contoh: 

onFetchEnd: function ( posts ) {
  console . log ( "Total posts found on Ghost:" , posts . length ) ;
}
  • onIndexBuildStart (fungsi)

Tentukan fungsi panggilan balik sebelum kita mulai membuat indeks pencarian.

Fungsi ini tidak memerlukan argumen.

contoh: 

onIndexBuildStart: function ( ) {
  console . log ( "before building the index" ) ;
}
  • onIndexBuildEnd (fungsi)

Tentukan fungsi panggilan balik ketika pembuatan indeks pencarian selesai.

Fungsi ini mengambil satu argumen: objek indeks build FlexSearch.

contoh: 

onIndexBuildEnd: function ( index ) {
  console . log ( "index built:" , index ) ;
}
  • onSearchStart (fungsi)

Tentukan fungsi panggilan balik sebelum mulai menjalankan kueri penelusuran. Misalnya, ini dapat digunakan untuk menyembunyikan elemen HTML hasil sambil menunggu penyelesaian onSearchEnd atau menambahkan efek transisi yang menarik. Namun dalam kebanyakan kasus, hal ini tidak diperlukan karena fungsi pencariannya cukup cepat sehingga enak dilihat.

Fungsi ini tidak memerlukan argumen.

contoh: 

onSearchStart: function ( ) {
  console . log ( "before executing the search query" ) ;
}
  • diSearchEnd (fungsi)

Tentukan fungsi panggilan balik ketika hasil pencarian sudah siap.

Fungsi ini membutuhkan 1 argumen: array postingan yang cocok.

contoh: 

onSearchEnd: function ( posts ) {
  console . log ( "search complete, posts found:" , posts ) ;
}
  • indexOptions (objek)

Tambahkan konfigurasi indeks pencarian tambahan atau ganti yang default. Opsi-opsi ini akan digabungkan dengan opsi yang sudah disediakan: 

 {
    doc : {
        id : "id" ,
        field : this . config . indexedFields
    } ,
    encode : "simple" ,
    tokenize : "forward" ,
    threshold : 0 ,
    resolution : 4 ,
    depth : 0
}

Gunakan juga parameter ini untuk mengaktifkan dukungan bahasa non-latin, lihat bagian ini.

bawaan: {}

  • opsi pencarian (objek)

Dibuat untuk pengguna tingkat lanjut, memungkinkan Anda menyempurnakan permintaan pencarian. Lihat dokumentasi FlexSearch ini.

Kami menggunakan konstruksi kueri khusus ini: index.search("your query", searchOptions) sehingga apa pun yang ditambahkan ke searchOptions akan diteruskan ke FlexSearch dengan cara ini.

Parameter ini bisa sangat berguna saat memfilter postingan berdasarkan tag. Sebagai contoh: 

searchOptions: {
    where : {
        string_tags : "getting started"
    }
}

Perhatikan juga bahwa opsi limit Searchinghost secara otomatis digabungkan ke dalam searchOptions . Dalam kasus kami, akhirnya menjadi: 

searchOptions: {
    where : {
        string_tags : "getting started"
    } ,
    limit : 10
}

bawaan: {}

  • debug (boolean)

Ketika ada sesuatu yang tidak berfungsi seperti yang diharapkan, setel ke true untuk menampilkan log aplikasi.

bawaan: false

Pengaturan bahasa

Jika blog Anda menggunakan bahasa alfabet latin (misalnya Inggris, Prancis, Spanyol) atau bahasa Eropa Utara/Timur (misalnya Jerman, Swedia, Hongaria, Slovenia, Estonia), konfigurasi default akan berfungsi dengan baik. Dalam kasus lain, temukan nilai indexOptions yang sesuai dan tambahkan ke konfigurasi SearchingGhost utama Anda.

Untuk membuat pengaturan spesifik Anda sendiri, lihat README FlexSearch dan tiga masalah ini.

Jika tidak ada yang berhasil untuk Anda atau jika perilaku yang dihasilkan tidak benar, jangan ragu untuk membuat masalah.

Arab 

indexOptions: {
    encode : false ,
    rtl : true ,
    split : / s+ /
}

Cina, Korea, Jepang 

indexOptions: {
    encode : false ,
    tokenize : function ( str ) {
        return str . replace ( / [x00-x7F] / g , "" ) . split ( "" ) ;
    }
}

Sirilik, India, Sinhala

Opsi ini dapat digunakan oleh bahasa kata apa pun yang dipisahkan spasi dan menggunakan karakter kompleks. 

indexOptions: {
    encode : false ,
    split : / s+ /
}

Jenis bahasa campuran

Jika Anda perlu menggunakan beberapa jenis bahasa (misalnya Sirilik/Inggris atau India/Spanyol), gunakan konfigurasi khusus di bawah ini. Saya tahu, ini mungkin terlihat menakutkan pada pandangan pertama tetapi cukup salin/tempel dan percayalah. 

indexOptions: {
    split : / s+ / ,
    encode : function ( str ) {
        var regexp_replacements = {
            "a" : / [àáâãäå] / g ,
            "e" : / [èéêë] / g ,
            "i" : / [ìíîï] / g ,
            "o" : / [òóôõöő] / g ,
            "u" : / [ùúûüű] / g ,
            "y" : / [ýŷÿ] / g ,
            "n" : / ñ / g ,
            "c" : / [ç] / g ,
            "s" : / ß / g ,
            " " : / [-/] / g ,
            "" : / ['!"#$%&\()*+,-./:;<=>?@[]^_`{|}~] / g ,
            " " : / s+ / g ,
        }
        str = str . toLowerCase ( ) ;
        for ( var key of Object . keys ( regexp_replacements ) ) {
            str = str . replace ( regexp_replacements [ key ] , key ) ;
        }
        return str === " " ? "" : str ;
    }
}

Tanya Jawab

Mengapa menggunakan FlexSearch sebagai mesin pencari?

Pada awalnya, kami juga mencoba solusi lain berikut: Lunr.js, minisearch, danfuse.js. Pada akhirnya, FlexSearch menawarkan hasil keseluruhan terbaik dengan hasil yang cepat dan akurat , ukuran paket yang cukup kecil dan juga mudah untuk diatur/dikonfigurasi. Itu punya segalanya untuk dipilih!

Mengapa artikel baru saya tidak muncul di hasil pencarian?

Jangan khawatir, itu normal. SearchingGhost menggunakan sistem cache untuk menyimpan data blog Anda di browser dan membatasi interaksi jaringan. Secara default, data cache yang disimpan kurang dari 30 menit yang lalu masih dianggap valid. Setelah itu, artikel baru akan tersedia untuk Anda.

Perlu diingat bahwa pengguna lain mungkin tidak perlu menunggu 30 menit tergantung kapan terakhir kali mereka melakukan riset. Jika Anda 1 jam yang lalu, cache mereka akan dibersihkan dan diperbarui sehingga artikel tersebut akan muncul.

Jika Anda ingin pengguna Anda selalu mendapatkan informasi terbaru, setel cacheMaxAge ke 0 . Saat melakukannya, Anda juga harus mengatur loadOn ke 'focus' untuk membatasi jumlah permintaan HTTP.

Bagaimana cara mengoptimalkan waktu buka gambar?

Secara default, saat Anda menggunakan variabel URL feature_image untuk menampilkan gambar di hasil pencarian, Anda akan selalu mendapatkan gambar asli/berukuran penuh dan umumnya terlalu besar (dalam ukuran dan berat) untuk kebutuhan kita, miniatur akan lebih baik bugar.

Sejak Ghost V3, mesin pengolah media ditanamkan untuk menghasilkan gambar yang responsif. Secara default, Ghost membuat ulang 6 gambar berbeda dari gambar tertentu. Ukuran yang tersedia adalah: w30 , w100 , w300 , w600 , w1000 , w2000 .

Dalam kasus kami, cara termudah memuat gambar lebih cepat adalah dengan menggunakan gambar yang lebih kecil. Pada dasarnya, kami ingin URL ini https://www.example.fr/content/images/2020/05/picture.jpg (yang default diambil dari Ghost API) menjadi https://www.example.fr/content/images/size/w600/2020/05/picture.jpg (lebar 600px).

Untuk melakukannya, perbarui konfigurasi dengan menambahkan bidang "customProcessing" dengan contoh kode berikut. Tentu saja, Anda dapat menggunakan ukuran apa pun yang tersedia yang disebutkan di atas selain w600 . 

customProcessing: function ( post ) {
    if ( post . tags ) post . string_tags = post . tags . map ( o => o . name ) . join ( ' ' ) . toLowerCase ( ) ;
    if ( post . feature_image ) post . feature_image = post . feature_image . replace ( '/images/' , '/images/size/w600/' ) ; // reduce image size to w600
    return post ;
}

Modifikasi ini tidak langsung terjadi, Anda memerlukan penyegaran cache untuk benar-benar melihat perbedaannya.

Bagaimana cara menampilkan jumlah hasil pencarian yang ditemukan?

Buat elemen HTML dengan ID "search-counter" dan manfaatkan fungsi onSearchEnd() untuk mengisinya dengan hasilnya. Berikut ini contohnya: 

 < p id =" search-counter " > </ p > 
onSearchEnd: function ( posts ) {
    var counterEl = document . getElementById ( 'search-counter' ) ;
    counterEl . textContent = ` ${ posts . length } posts found` ;
}

Bisakah saya menampilkan postingan terbaru ketika tidak ada yang ditemukan?

Ya, dengan menggunakan metode internal SearchingGhost tetapi itu mungkin. Ini mungkin terlihat seperti ilmu hitam tetapi tambahkan kode di bawah ini ke konfigurasi Anda saat ini. Di sini, searchinGhost merujuk pada instance Anda sendiri yang dibuat dengan new SearchinGhost(...) . 

emptyTemplate: function ( ) {
    var allPostsArray = Object . values ( searchinGhost . index . l ) ;
    var latestPosts = allPostsArray . slice ( 0 , 6 ) ;
    searchinGhost . display ( latestPosts ) ;
}

Bisakah saya menggunakan perpustakaan ini dengan kerangka JS?

Jika menggunakan kerangka kerja seperti React, Vue, atau Angular, Anda mungkin tidak ingin membiarkan SearchinGhost memanipulasi DOM dengan sendirinya. Karena Anda pasti perlu menyimpan pembaruan konten apa pun dalam kerangka kerja Anda, berikut adalah konfigurasi yang harus Anda gunakan: 

 var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>' ,
    inputId : false ,
    outputId : false ,
    [ ... ]
} ) ;

Sekarang, untuk menjalankan kueri penelusuran, panggil metode SearchingGhost ini: 

 var postsFound = searchinGhost . search ( "my query" ) ;

// Where 'postsFound' content looks like:
[
  {
    "title" : "A Full and Comprehensive Style Test" ,
    "published_at" : "Sep 1, 2012" ,
    [ ... ]
  } ,
  {
    "title" : "Publishing options" ,
    "published_at" : "Aug 20, 2018" ,
    [ ... ]
  }
]

Dengan cara ini, tidak ada yang akan terjadi di belakang Anda dan semuanya akan tetap terkendali di shadowDom.

Peta jalan

  • Gunakan strategi logging berdasarkan debug: true
  • Siapkan proses pembangunan yang bersih menggunakan Webpack
  • Izinkan pengguna mengambil data saat halaman dimuat (tidak hanya saat fokus)
  • Tambahkan panggilan balik seperti onFetchStart() , onSearchStart() , ...
  • Gunakan perpustakaan resmi GhostContentApi untuk memberikan lebih banyak fleksibilitas konfigurasi (dan juga mendukung API v2)
  • Paparkan opsi usia maksimal cache kepada pengguna
  • Tambahkan hasil templat kosong opsional
  • Tambahkan fungsi format ulang pos khusus yang ditentukan pengguna yang dipanggil sebelum indeksasi
  • Ekspos 'searchOn' dan 'loadOn' dalam konfigurasi
  • Bersihkan kode dan komentar
  • Jadikan demonya ramah seluler, saat ini terlihat jelek di layar kecil
  • Tinjauan kode mendalam yang dibuat oleh pakar JS

Mulai sekarang, setiap modifikasi dilacak dalam file CHANGELOG.md khusus ini.

Menyumbang

Kontribusi apa pun sangat kami harapkan! Jika Anda menemukan bug atau ingin memperbaiki kodenya, silakan membuat isu atau PR.

Semua pembaruan kode harus dilakukan di bawah direktori src .

Untuk membangun proyek sendiri, jalankan: 

$ npm install
$ npm run build

Saat mengembangkan, gunakan perintah watch sebagai gantinya, ini akan membangun kembali lebih cepat pada setiap modifikasi file dan menyertakan tautan ke peta sumber yang membuat proses debug lebih mudah. 

$ npm run watch

Catatan: saat membuat proyek ini saya menggunakan Node v12.16.2 dengan NPM v6.14.4 tetapi juga harus bekerja dengan versi lama/baru

Solusi alternatif

SearchingGhost tidak sendirian di bidang plugin pencarian Ghost. Berikut adalah daftar singkat proyek terkait lainnya. Anda harus mencobanya untuk melihat apakah mereka lebih sesuai dengan kebutuhan Anda:

GhostHunter (v0.6.0 - 101 kB, 26 kB gzip)

Kelebihan:

  • Yang paling terkenal, banyak artikel dan tutorial tentangnya
  • Sistem cache yang kuat berdasarkan Penyimpanan lokal
  • Pengindeksan teks lengkap (tidak hanya judul postingan)

Kontra:

  • Mengandalkan jQuery
  • Hanya berfungsi dengan Ghost v2 API (untuk saat ini)
  • Kode sumber menjadi berantakan seiring waktu

pencarian hantu (v1.1.0 - 12 kB, 4,2 kB gzip)

Kelebihan:

  • Basis kode yang ditulis dengan baik dan mudah dibaca
  • Manfaatkan kemampuan 'fuzzy'

Kontra:

  • Browser tertinggal saat mencari kata-kata yang panjang
  • Mungkin mengirimkan terlalu banyak permintaan API
  • Tidak menggunakan sistem penilaian untuk menampilkan hasil terbaik terlebih dahulu

Pencari Hantu (v3.1.2 - 459 kB, 116 kB gzip)

Kelebihan:

  • Perpustakaan Javascript murni

Kontra:

  • Ukuran bundel akhir yang sangat besar
  • Kirim permintaan HTTP untuk setiap tombol yang ditekan!
  • Tidak menggunakan mesin pencari, hanya mencari substring pada judul postingan
  • Tidak mengindeks karakter yang diberi aksentuasi dengan benar (misalnya 'é' seharusnya ditemukan dengan 'e')
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua