Cara Menambah Carian Lunr ke Laman Web Gatsby Anda

Senibina Jamstack mendapat daya tarikan yang signifikan untuk pembangunan laman web. Adakah anda telah meneroka Gatsby, Nuxt, atau Gridsome? Kemudahan penggunaan dan ciri-ciri pra-bina mereka sering mengagumkan. Walau bagaimanapun, fungsi carian tidak semestinya merupakan ciri terbina dalam, menyampaikan cabaran untuk tapak kaya kandungan. Bolehkah kita melaksanakan carian yang mantap tanpa komponen sisi pelayan?

Jamstack sememangnya tidak mempunyai keupayaan carian terbina dalam. Ini memerlukan pertimbangan dan pelaksanaan yang teliti. Walaupun ada pilihan, seperti Search-As-A-Service Algolia (dengan batasan pada rancangan percuma) atau memanfaatkan carian WordPress dengan klien WPGraphQL dan Apollo, artikel ini memberi tumpuan kepada penyelesaian sampingan klien.

Kami akan membina indeks carian dan mengintegrasikan carian ke tapak Gatsby menggunakan lunr.js, perpustakaan JavaScript yang ringan yang menawarkan carian yang boleh dilanjutkan dan disesuaikan tanpa kebergantungan pelayan luaran. Kami baru-baru ini menggunakannya di tartanify.com untuk menambah ciri "Carian dengan nama Tartan", mengatasi cabaran yang berkaitan dengan carian berterusan, masa nyata. Artikel ini akan memperincikan cabaran dan penyelesaian tersebut.

Bermula

Untuk kesederhanaan, kami akan menggunakan starter blog Gatsby rasmi. Ini abstrak banyak aspek penciptaan laman web statik. Untuk mengikuti:

 Gatsby New Gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
CD Gatsby-Starter-Blog
Gatsby berkembang

Ini mewujudkan blog kecil dengan tiga jawatan, boleh diakses di http://localhost:8000/ . Memeriksa http://localhost:8000/__graphql mendedahkan data yang ada.

Melaksanakan indeks terbalik dengan lunr.js

Lunr menggunakan indeks terbalik peringkat rekod. Peta ini setiap perkataan di laman web ini ke lokasinya (laluan halaman). Kami menentukan medan mana (tajuk, kandungan, keterangan, dan lain -lain) Menyediakan kata kunci pengindeksan.

Untuk blog kami, kami akan mengindeks tajuk dan kandungan. Judul adalah mudah, tetapi kandungan memerlukan pembersihan. Pada mulanya menggunakan rawMarkdownBody terbukti bermasalah kerana sintaks Markdown. Kami akan menggunakan medan html dan pakej striptags untuk mengeluarkan tag HTML. Rujuk dokumentasi Lunr untuk butirannya.

Inilah penciptaan indeks Lunr dan coretan penduduk (digunakan kemudian di gatsby-node.js ):

 const index = lunr (fungsi () {
  this.ref ('slug')
  this.field ('Tajuk')
  this.field ('kandungan')
  untuk (dokumen dokumen) {
    this.add (doc)
  }
})

documents adalah pelbagai objek, masing -masing dengan slug , title , dan content :

 {
  slug: '/post-slug/',
  Tajuk: 'Tajuk Pos',
  Kandungan: 'Kandungan pos dengan semua tag HTML dilucutkan.'
}

Kami menentukan kunci dokumen unik ( slug ) dan dua bidang ( title dan content ). Semua dokumen ditambah secara berulang.

Membuat Indeks di gatsby-node.js

Pertama, pasang perpustakaan yang diperlukan:

 Benang Tambah Lunr Graphql-Type-Json Striptags

Seterusnya, ubah suai gatsby-node.js . Fail ini dijalankan semasa membina tapak, membolehkan kami menambah penciptaan indeks. Kami akan menggunakan Gatsby API createResolvers untuk membuat medan akar baru, LunrIndex .

Kedai data Gatsby dan keupayaan pertanyaan terdedah melalui resolver medan GraphQL. getAllNodes mengambil nod jenis yang ditentukan:

 / * gatsby-node.js */
// ... (import)

Exports.Createresolvers = ({Cache, Createresolvers}) => {
  createresolvers ({
    Pertanyaan: {
      Lunrindex: {
        Jenis: GraphqljsonObject,
        Selesaikan: (sumber, args, konteks, info) => {
          const blognodes = context.nodemodel.getAllNodes ({type: `markdownRemark`});
          const type = info.schema.getType (`markdownRemark`);
          kembali createIndex (blognodes, jenis, cache);
        },
      },
    },
  });
};

// ... (fungsi createIndex)

Fungsi createIndex menggunakan coretan Lunr:

 / * gatsby-node.js */
// ... (import)

const createIndex = async (blognodes, type, cache) => {
  // ... (pelaksanaan untuk mengambil dan memproses data, termasuk caching)
};

(Fungsi createIndex yang lengkap, termasuk pengambilan data, pemprosesan, dan caching, ditinggalkan untuk keringkasan tetapi penting untuk pelaksanaan berfungsi. Sambutan asal memberikan detail ini.) Ini memastikan indeks hanya dibina semula apabila diperlukan.

Menambah komponen borang carian

Buat Komponen Borang Carian ( src/components/search-form.js ):

 // ... (pelaksanaan komponen borang carian)

(Pelaksanaan komponen lengkap ditinggalkan untuk keringkasan tetapi terperinci dalam tindak balas asal.) Komponen ini mengendalikan penyerahan bentuk dan perubahan input, menavigasi ke /search dengan parameter pertanyaan.

Membuat halaman hasil carian

Buat halaman hasil carian ( src/pages/search.js ):

 // ... (pelaksanaan halaman hasil carian)

(Pelaksanaan halaman lengkap ditinggalkan untuk keringkasan, tetapi terperinci dalam respons asal.) Halaman ini menggunakan data LunrIndex untuk memaparkan hasil carian.

Widget carian berterusan (contoh tartanify.com)

Contoh Tartanify.com menunjukkan widget carian segera yang berterusan. Penciptaan indeks adalah serupa dengan contoh blog, tetapi lebih mudah:

 // ... (penciptaan indeks untuk tartanify.com)

(Pelaksanaan lengkap ditinggalkan untuk keringkasan tetapi terperinci dalam tindak balas asal.) Perbezaan utama adalah fungsi carian segera yang dicetuskan oleh perubahan input, bukan penyerahan bentuk. Cangkuk useStaticQuery digunakan untuk pengambilan data.

Membuat widget berterusan

Untuk mengekalkan widget carian di seluruh perubahan halaman, kami menggunakan API wrapPageElement Gatsby:

 // gatsby-browser.js
// ... (pelaksanaan WrappageElement)

(Pelaksanaan lengkap terperinci dalam tindak balas asal.) Ini membungkus kandungan halaman dengan widget carian, memastikan kegigihan.

Peningkatan pertanyaan carian tersuai

Penambahbaikan butiran respons asal kepada pertanyaan carian menggunakan kaedah query Lunr untuk mengendalikan perlawanan kabur, kad liar, dan logik Boolean untuk hasil carian yang lebih baik. Bahagian ini dengan ketara meningkatkan pengalaman carian.

Kesimpulan

Melaksanakan fungsi carian di laman web Jamstack boleh dicapai dan dapat meningkatkan pengalaman pengguna dengan ketara. Walaupun seolah-olah bertentangan dengan sifat tanpa statistik Jamstack, penyelesaian sisi klien seperti Lunr.js menawarkan alternatif yang kuat dan fleksibel. Pertimbangan dan pelaksanaan yang teliti yang terperinci dalam artikel ini menyerlahkan potensi untuk mewujudkan pengalaman pengguna yang unggul melalui reka bentuk dan pembangunan yang bijak.

Atas ialah kandungan terperinci Cara Menambah Carian Lunr ke Laman Web Gatsby Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!