hugo lyra

雨果·莱拉

Hugo 是一个出色的静态站点生成器，与大多数静态站点生成器一样，它本身并不能够实现动态搜索引擎，就像我们习惯在更传统的服务器端平台上使用的那样，具有或多或少的高级查询功能。

该项目旨在通过将 Lyra 搜索引擎与 Hugo 集成来解决这个问题。

它的工作原理是将content/**/*.md文件解析为原始文本，并使用它生成 Lyra 索引，该索引将成为静态资产，您可以与 Hugo 公共发行版的其他文件一起发布。

该项目还提供了一个客户端 JavaScript 库，可以轻松使用 Hugo 网站中的索引；您可以在我的个人博客上看到它的实际实施情况，这里和这里。您可以跳转到客户端部分了解更多详细信息。

解析器只能解析 Markdown 文件，并且标准的前文元素、标签之类的数组和类别都是内爆的并以空格分隔。

架构定义：

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

客户端

您需要从 CDN 导入库：

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

或者更好地在基本模板上使用 Hugo Pipes：

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

客户端代码捆绑Lyra搜索索引代码，确保生成的索引在客户端和服务器端兼容；您不需要单独导入它。这种方法的局限性是您无法更改 Lyra 版本。

实例化后，您将在window.HugoLyra全局对象上找到一个新的全局对象，您可以使用它来实现搜索引擎。

您将如何使用它取决于您，以更好地满足您的需求；您可以在下面找到一个简单的原始 JavaScript 实现，您可以将其用作起点：

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

这段代码是我博客的一部分；你可以在这里挖掘更多。

服务器端

npm i paolomainardi/hugo-lyra

yarn add paolomainardi/hugo-lyra

用法

Hugo-Lyra使用起来很简单。

安装后，您可以将其集成到脚本部分的package.json中，如下所示：

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

默认情况下， Hugo-Lyra将读取您的content目录并将 Lyra 索引输出到public/hugo-lyra-english.msp 。

您可以通过将输入参数传递给 cli 来调整一些配置（例如输入、输出、语言、格式等）；您可以通过运行以下命令查看所有选项：

npx hugo-lyra -h

当然，您可以通过运行以下命令以编程方式重新生成索引：

npx hugo-lyra

> 提示：如果您使用DEBUG=hugo-lyra npx hugo lyra运行它，您可以获利

> 额外的调试日志。

例如，假设我们想要：

• 生成JSON格式的索引

• 将其保存到dist/search

• 解析content/posts

该命令将是： npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search

提示：如果您使用DEBUG=hugo-lyra npx hugo lyra运行它，您可以获利

如何使用hugo-lyra API

Hugo-Lyra 封装有 ES 模块、CommonJS。

在大多数情况下，导入或需要paolomainardi/hugo-lyra ，您的环境将选择最合适的构建。

有时，您可能需要导入或需要特定文件（例如类型）。 Lyra 包中包含以下版本：

您可以从 Javascript/Typescript 使用它：

打字稿

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