gridea search

Plugin tema pencarian artikel klien situs statis Gridea

Pratinjau: https://kytrun.com, atau unduh proyek ini, letakkan direktori example/ di jalur tema Gridea, dan jalankan Gridea sendiri.

Ini hanya cocok untuk pengembang tema Gridea dengan dasar pemrograman front-end; tema yang menggunakan grinda-search dapat dilihat di sini .

Fitur:

• Halaman hasil pencarian mandiri dan tautan web
• Pengembang tema dapat menggunakan kembali templat yang ada secara maksimal
• Perpanjang penggunaan API resmi, tanpa biaya pembelajaran tambahan
• Hanya muat sumber daya yang diperlukan menggunakan pencarian
• Kustomisasi gaya dukungan
• kompatibilitas yang baik

Mulai cepat:

1. Ambil template pengembangan tema resmi sebagai contoh dan tambahkan file baru berdasarkan template tersebut:

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. Ubah file berikut

(1) ./templates/api.ejs

Templat yang mengeluarkan API format JSON. Untuk mempersingkat waktu transmisi jaringan sebanyak mungkin, beberapa atribut pada awalnya diberi anotasi.

(2) ./templates/includes/header.ejs

Templat publik, tambahkan kotak pencarian di lokasi yang sesuai untuk referensi ke halaman lain:

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

Bagian yang sudah ada tidak dapat diubah, atribut lain seperti kelas atau gaya dapat ditambahkan.

(3) ./templates/search.ejs

Halaman pencarian dapat dimodifikasi berdasarkan halaman lain, dan kemudian menambahkan node rendering hasil pencarian dan skrip dependen.

• Skrip dependen <script> harus ditempatkan sebelum </body> . Jangan mengubah urutan secara sembarangan untuk mencegah kesalahan pemuatan.

(4) ./assets/media/gridea-search/result-template.ejs

Templat daftar hasil pencarian diuraikan di sisi browser dan pada dasarnya digunakan kembali ./templates/includes/post-list.ejs, tetapi konten ringkasan <%- post.abstract %> diubah menjadi <%- post.searchedPreview %> , menggunakan Pratinjau hasil pencarian yang mengandung kata kunci.

• Daftar hasil pencarian belum memiliki fungsi penomoran halaman, mohon jangan gunakan kolom pagination .

Kustomisasi gaya:

1. Tampilkan hasil pencarian dan tidak ada hasil pencarian

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >

• Pertahankan atribut yang ada seperti kelas, id, dll., dan tambahkan atribut, ikon, atau animasi baru.

2. Kotak masukan pencarian

• Pertahankan atribut yang ada, tambahkan atribut baru, dan tambahkan ikon atau animasi.

3. Penyorotan Kata Kunci

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style > 

lainnya:

• Topik menggunakan gridea-search

• Struktur direktori resmi dan deskripsi variabel halaman

• Perpustakaan pihak ketiga:

  • Pencarian fuzzy front-end - Fuse.js: https://github.com/krisk/fuse

  • Penguraian templat - EJS: https://github.com/mde/ejs

• Lisensi sumber terbuka: MIT

• Artikel terkait:

  • Tambahkan fungsi pencarian ke blog Gridea