hugo lyra

Hugo-Lyra

Hugo ist ein fantastischer statischer Site-Generator und ist, wie die meisten von ihnen, nicht von Haus aus in der Lage, eine dynamische Suchmaschine zu implementieren, wie wir es von traditionelleren serverseitigen Plattformen mit mehr oder weniger erweiterten Abfragefunktionen gewohnt sind.

Dieses Projekt zielt darauf ab, dieses Problem durch die Integration der Lyra-Suchmaschine mit Hugo zu lösen.

Es funktioniert, indem es die content/**/*.md Dateien in Rohtext analysiert und daraus einen Lyra-Index generiert, der zu einem statischen Asset wird, das Sie zusammen mit den anderen Dateien von Hugo public dist veröffentlichen können.

Dieses Projekt bietet auch eine clientseitige Javascript-Bibliothek, um den Index einfach von Ihrer Hugo-Website zu nutzen; Sie können es in meinem persönlichen Blog hier und hier in Aktion sehen, um die Umsetzung zu erfahren. Weitere Informationen finden Sie im Kundenbereich.

Der Parser kann nur Markdown-Dateien analysieren, und standardmäßige Frontmatter-Elemente, Arrays wie Tags und Kategorien werden implodiert und durch Leerzeichen getrennt.

Schemadefinition :

 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" ,
} ) ; 

Kundenseite

Sie müssen die Bibliothek aus dem CDN importieren:

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

Oder verwenden Sie besser Hugo Pipes in Ihrer Basisvorlage:

 { { $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 >

Der Client -Code bündelt den Lyra-Suchindexcode , um sicherzustellen, dass der generierte Index auf der Client- und Serverseite kompatibel ist; Sie müssen es nicht separat importieren . Die Einschränkung dieses Ansatzes besteht darin, dass Sie die Lyra-Version nicht ändern können.

Nach der Instanziierung finden Sie im window.HugoLyra ein neues globales Objekt. Das globale HugoLyra-Objekt können Sie zur Implementierung Ihrer Suchmaschine verwenden.

Wie Sie es verwenden, liegt ganz bei Ihnen, um Ihren Anforderungen besser gerecht zu werden. Nachfolgend finden Sie eine unkomplizierte Roh-Javascript-Implementierung, die Sie als Ausgangspunkt verwenden können:

 ( 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 ) ;
  }
} ) ( ) ;

Dieser Code ist Teil meines Blogs; Hier kannst du mehr darüber erfahren.

Serverseitig

npm i paolomainardi/hugo-lyra

yarn add paolomainardi/hugo-lyra

Verwendung

Hugo-Lyra ist einfach zu bedienen.

Nach der Installation können Sie es wie folgt in Ihre package.json im Abschnitt „Skripte“ integrieren:

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

Standardmäßig liest Hugo-Lyra Ihr content und gibt den Lyra-Index an public/hugo-lyra-english.msp aus.

Sie können einige Konfigurationen (wie Eingabe, Ausgabe, Sprache, Format usw.) optimieren, indem Sie Eingabeargumente an die CLI übergeben. Sie können alle Optionen sehen, indem Sie Folgendes ausführen:

npx hugo-lyra -h

Natürlich können Sie den Index auch programmgesteuert neu generieren, indem Sie einfach Folgendes ausführen:

npx hugo-lyra

> TIPP: Wenn Sie es mit DEBUG=hugo-lyra npx hugo lyra ausführen, können Sie Gewinn machen

> von zusätzlichen Debugging-Protokollen.

Nehmen wir zum Beispiel an, wir möchten:

• Generieren Sie den Index im JSON-Format

• Speichern Sie es auf dist/search

• content/posts analysieren

Der Befehl lautet: npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search

TIPP: Wenn Sie es mit DEBUG=hugo-lyra npx hugo lyra ausführen, können Sie Gewinn erzielen

So verwenden Sie die Hugo-Lyra-API

Hugo-Lyra ist mit den ES-Modulen CommonJS verpackt.

In den meisten Fällen importieren oder erfordern Sie paolomainardi/hugo-lyra , und Ihre Umgebung wählt den am besten geeigneten Build aus.

Manchmal müssen Sie möglicherweise bestimmte Dateien (z. B. Typen) importieren oder benötigen diese. Die folgenden Builds sind im Lyra-Paket enthalten:

Sie können es über Javascript/Typescript verwenden:

Typoskript

 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);

} ) ( ) ;

Javascript

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

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