hugo lyra

Hugo-Lyra

Hugo adalah generator situs statis yang luar biasa dan, seperti kebanyakan dari mereka, tidak mampu mengimplementasikan mesin pencari dinamis seperti yang biasa kita gunakan pada platform sisi server yang lebih tradisional, dengan kemampuan kueri yang lebih atau kurang canggih.

Proyek ini bertujuan untuk mengatasi masalah ini dengan mengintegrasikan mesin pencari Lyra dengan Hugo.

Ia bekerja dengan mengurai file content/**/*.md menjadi teks mentah dan menggunakannya untuk menghasilkan indeks Lyra, yang akan menjadi aset statis yang dapat Anda publikasikan bersama file lain dari dist publik Hugo.

Proyek ini juga menawarkan perpustakaan javascript sisi klien untuk dengan mudah menggunakan indeks dari situs web Hugo Anda; Anda dapat melihatnya beraksi di blog pribadi saya di sini dan di sini untuk penerapannya. Anda dapat melompat ke bagian klien untuk lebih jelasnya.

Parser hanya dapat mengurai file Markdown, dan elemen front-matter standar, array seperti tag, dan kategori diledakkan dan dipisahkan oleh spasi.

Definisi skema :

 const hugoDb = create ( {
  schema : {
    title : "string" ,
    body : "string" ,
    uri : "string" ,
    meta : {
      date : "string" ,
      description : "string" ,
      tags : "string" ,
      categories : "string" ,
      keywords : "string" ,
      summary : "string" ,
    } ,
  } ,
  defaultLanguage : "english" ,
} ) ; 

Sisi klien

Anda perlu mengimpor perpustakaan dari CDN:

 < script src = https://unpkg.com/hugo-lyra@latest/dist/browser/hugo-lyra.js > </ script >

Atau lebih baik menggunakan Hugo Pipes pada templat dasar Anda:

 { { $script : = resources . GetRemote https : //unpkg.com/hugo-lyra@latest/dist/browser/hugo-lyra.js | minify | fingerprint }}
< script src = "{{ $script.RelPermalink }}" integrity = "{{ $script.Data.Integrity }}" > < / script >

Kode klien menggabungkan kode indeks pencarian Lyra untuk memastikan bahwa indeks yang dihasilkan kompatibel di sisi klien dan server; Anda tidak perlu mengimpornya secara terpisah . Keterbatasan pendekatan ini adalah Anda tidak dapat mengubah versi Lyra.

Setelah dipakai, Anda akan menemukan objek global baru di window.HugoLyra Objek global HugoLyra dapat Anda gunakan untuk mengimplementasikan mesin pencari Anda.

Cara Anda menggunakannya terserah Anda agar lebih sesuai dengan kebutuhan Anda; Anda dapat menemukan implementasi javascript mentah langsung di bawah ini yang dapat Anda gunakan sebagai titik awal:

 ( async ( ) => {
  try {
    const params = new URLSearchParams ( window . location . search ) ;
    const query = params . get ( "q" ) ;
    if ( query ) {
      const db = await HugoLyra . fetchDb ( `/hugo-lyra-english.json` ) ;
      const res = await HugoLyra . search ( db , { term : query , properties : "*" } ) ;
      document . getElementById ( "search-input" ) . setAttribute ( "value" , res . options . term ) ;
      let resultList = "" ;
      const searchResults = document . getElementById ( "results" ) ;
      if ( res ?. search ?. count ) {
        for ( const hit of res . search . hits ) {
          const doc = hit . document ;
          resultList += "<li>" ;
          resultList += '<span class="date">' + doc . meta . date + "</span>" ;
          resultList += '<a class="title" href="' + doc . uri + '">' + doc . title + "</a>" ;
          resultList += "</li>" ;
        }
      }
      searchResults . innerHTML = resultList . length ? resultList : "No results found" ;
    }
  } catch ( e ) {
    console . error ( e ) ;
  }
} ) ( ) ;

Kode ini adalah bagian dari blog saya; Anda dapat menggalinya lebih lanjut di sini.

Sisi server

npm i paolomainardi/hugo-lyra

yarn add paolomainardi/hugo-lyra

Penggunaan

Hugo-Lyra mudah digunakan.

Setelah terinstal, Anda dapat mengintegrasikannya ke dalam package.json Anda di bagian skrip seperti ini:

 "scripts" : {
  "index" : " hugo-lyra "
}

Secara default, Hugo-Lyra akan membaca direktori content Anda dan menampilkan indeks Lyra ke public/hugo-lyra-english.msp .

Anda dapat mengubah beberapa konfigurasi (seperti input, output, bahasa, format, dll.) dengan meneruskan argumen input ke cli; Anda dapat melihat semua opsi dengan menjalankan:

npx hugo-lyra -h

Tentu saja, Anda dapat membuat ulang indeks secara terprogram hanya dengan menjalankan:

npx hugo-lyra

> TIP: Jika Anda menjalankannya dengan DEBUG=hugo-lyra npx hugo lyra , Anda bisa mendapat untung

> log debug tambahan.

Misalnya, dengan asumsi kita ingin:

• Hasilkan indeks dalam format JSON

• Simpan di dist/search

• Parsing content/posts

Perintahnya adalah: npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search

TIPS: Jika Anda menjalankannya dengan DEBUG=hugo-lyra npx hugo lyra , Anda bisa mendapat untung

Cara menggunakan API Hugo-lyra

Hugo-Lyra dikemas dengan modul ES, CommonJS.

Dalam kebanyakan kasus, impor atau require paolomainardi/hugo-lyra , dan lingkungan Anda akan memilih build yang paling sesuai.

Terkadang, Anda mungkin perlu mengimpor atau memerlukan file tertentu (seperti tipe). Build berikut disertakan dalam paket Lyra:

Anda dapat menggunakannya dari Javascript/TypeScript:

naskah ketikan

 import { cwd } from "process" ;
import { generateIndex } from "hugo-lyra" ;
import { LyraOptions } from "hugo-lyra/dist/esm/types" ;

( async ( ) => {
  const res = await generateIndex ( "./content" , < LyraOptions > {
  indexFilePath : cwd ( ) ,
} );

console.log(res);

} ) ( ) ;

skrip java

 const { cwd } = require ( "process" ) ;
const { generateIndex } = require ( "hugo-lyra" ) ;

( async ( ) => {
  const res = await generateIndex ( "./content" , {
    indexFilePath : process . cwd ( ) ,
  } ) ;
  console . log ( res ) ;
} ) ( ) ;