hugo lyra

Hugo Lyra

Hugo é um fantástico gerador de sites estáticos e, como a maioria deles, não é nativamente capaz de implementar um motor de busca dinâmico como estamos habituados a usar em plataformas server-side mais tradicionais, com capacidades de consulta mais ou menos avançadas.

Este projeto visa resolver este problema integrando o motor de busca Lyra com o Hugo.

Ele funciona analisando os arquivos content/**/*.md em texto bruto e usando-os para gerar um índice Lyra, que se tornará um ativo estático que você pode publicar junto com os outros arquivos do Hugo public dist.

Este projeto também oferece uma biblioteca javascript do lado do cliente para consumir facilmente o índice do seu site Hugo; você pode vê-lo em ação no meu blog pessoal aqui e aqui para a implementação. Você pode ir para a seção do cliente para obter mais detalhes.

O analisador pode analisar apenas arquivos Markdown, e elementos frontais padrão, matrizes como tags e categorias são implodidos e separados por espaço.

Definição de esquema :

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

Lado do cliente

Você precisa importar a biblioteca do CDN:

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

Ou melhor, usando Hugo Pipes no seu template 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 >

O código do cliente agrupa o código do índice de pesquisa Lyra para garantir que o índice gerado seja compatível no lado do cliente e do servidor; você não precisa importá-lo separadamente . A limitação desta abordagem é que você não pode alterar a versão do Lyra.

Uma vez instanciado, você encontrará um novo objeto global na window.HugoLyra Objeto global HugoLyra que você pode usar para implementar seu mecanismo de pesquisa.

Depende de você como você o usará para melhor atender às suas necessidades; você pode encontrar abaixo uma implementação simples de javascript bruto que pode usar como ponto de partida:

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

Este código faz parte do meu blog; você pode cavar mais aqui.

Lado do servidor

npm i paolomainardi/hugo-lyra

yarn add paolomainardi/hugo-lyra

Uso

Hugo-Lyra é simples de usar.

Depois de instalado, você pode integrá-lo ao seu package.json na seção de scripts como esta:

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

Por padrão, Hugo-Lyra lerá seu diretório content e gerará o índice Lyra para public/hugo-lyra-english.msp .

Você pode ajustar algumas configurações (como entrada, saída, idioma, formato, etc.) passando argumentos de entrada para o CLI; você pode ver todas as opções executando:

npx hugo-lyra -h

Claro, você pode gerar novamente o índice programaticamente apenas executando:

npx hugo-lyra

> DICA: Se você executá-lo com DEBUG=hugo-lyra npx hugo lyra , você pode obter lucro

> de logs de depuração extras.

Por exemplo, supondo que queremos:

• Gere o índice no formato JSON

• Salve-o em dist/search

• Analisar content/posts

O comando será: npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search

DICA: Se você executá-lo com DEBUG=hugo-lyra npx hugo lyra , você pode obter lucro

Como usar a API hugo-lyra

Hugo-Lyra vem com módulos ES, CommonJS.

Na maioria dos casos, importe ou exija paolomainardi/hugo-lyra e seu ambiente escolherá a compilação mais apropriada.

Às vezes, pode ser necessário importar ou exigir arquivos específicos (como tipos). As seguintes compilações estão incluídas no pacote Lyra:

Você pode usá-lo em Javascript/Typescript:

Texto datilografado

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