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