hugo lyra

Hugo-Lyra

Hugo est un fantastique générateur de sites statiques et, comme la plupart d’entre eux, n’est pas capable d’implémenter nativement un moteur de recherche dynamique comme nous avons l’habitude d’utiliser sur les plateformes côté serveur plus traditionnelles, avec des capacités de requêtes plus ou moins avancées.

Ce projet vise à résoudre ce problème en intégrant le moteur de recherche Lyra à Hugo.

Il fonctionne en analysant les fichiers content/**/*.md en texte brut et en les utilisant pour générer un index Lyra, qui deviendra un actif statique que vous pourrez publier avec les autres fichiers de la distribution publique Hugo.

Ce projet propose également une bibliothèque javascript côté client pour consommer facilement l'index de votre site Web Hugo ; vous pouvez le voir en action sur mon blog personnel ici et ici pour la mise en œuvre. Vous pouvez accéder à la section client pour plus de détails.

L'analyseur peut analyser uniquement les fichiers Markdown, et les éléments de présentation standard, les tableaux tels que les balises et les catégories sont implosés et séparés par des espaces.

Définition du schéma :

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

Côté client

Vous devez importer la bibliothèque depuis le CDN :

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

Ou mieux en utilisant Hugo Pipes sur votre modèle de base :

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

Le code client regroupe le code de l'index de recherche Lyra pour garantir que l'index généré est compatible côté client et côté serveur ; vous n'avez pas besoin de l'importer séparément . La limitation de cette approche est que vous ne pouvez pas modifier la version de Lyra.

Une fois instancié, vous trouverez un nouvel objet global sur la window.HugoLyra Objet global HugoLyra que vous pourrez utiliser pour implémenter votre moteur de recherche.

Comment vous l'utiliserez, c'est à vous de mieux répondre à vos besoins ; vous pouvez trouver ci-dessous une implémentation javascript brute simple que vous pouvez utiliser comme point de départ :

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

Ce code fait partie de mon blog ; vous pouvez le creuser davantage ici.

Côté serveur

npm i paolomainardi/hugo-lyra

yarn add paolomainardi/hugo-lyra

Usage

Hugo-Lyra est simple à utiliser.

Une fois installé, vous pouvez l'intégrer dans votre package.json dans la section scripts comme ceci :

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

Par défaut, Hugo-Lyra lira votre répertoire content et affichera l'index Lyra dans public/hugo-lyra-english.msp .

Vous pouvez modifier certaines configurations (comme l'entrée, la sortie, la langue, le format, etc.) en passant des arguments d'entrée au cli ; vous pouvez voir toutes les options en exécutant :

npx hugo-lyra -h

Bien sûr, vous pouvez régénérer l'index par programme simplement en exécutant :

npx hugo-lyra

> CONSEIL : Si vous l'exécutez avec DEBUG=hugo-lyra npx hugo lyra , vous pouvez réaliser des bénéfices

> de journaux de débogage supplémentaires.

Par exemple, en supposant que nous souhaitions :

• Générer l'index au format JSON

• Enregistrez-le sur dist/search

• Analyser content/posts

La commande sera : npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search

CONSEIL : Si vous l'exécutez avec DEBUG=hugo-lyra npx hugo lyra , vous pouvez réaliser des bénéfices

Comment utiliser l'API Hugo-lyra

Hugo-Lyra est fourni avec les modules ES, CommonJS.

Dans la plupart des cas, importez ou exigez paolomainardi/hugo-lyra , et votre environnement choisira la version la plus appropriée.

Parfois, vous devrez peut-être importer ou exiger des fichiers spécifiques (tels que des types). Les versions suivantes sont incluses dans le package Lyra :

Vous pouvez l'utiliser depuis Javascript/Typescript :

Manuscrit

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