hugo lyra
v0.4.2
Hugo は素晴らしい静的サイト ジェネレーターですが、ほとんどのサイト ジェネレーターと同様に、多かれ少なかれ高度なクエリ機能を備えた、従来のサーバーサイド プラットフォームで使用されているような動的検索エンジンをネイティブに実装することはできません。
このプロジェクトは、Lyra 検索エンジンと Hugo を統合することで、この問題を解決することを目的としています。
これはcontent/**/*.mdファイルを解析して生のテキストにし、それを使用して Lyra インデックスを生成することで機能します。これは、Hugo public dist の他のファイルと一緒に公開できる静的アセットになります。
このプロジェクトは、Hugo Web サイトのインデックスを簡単に利用できるクライアント側の JavaScript ライブラリも提供します。私の個人的なブログで実際に動作している様子をご覧いただけます。また、実装についてはこちらをご覧ください。詳細については、クライアントのセクションに移動してください。
パーサーは 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上に新しいグローバル オブジェクトが表示されます。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 は 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);
} ) ( ) ; const { cwd } = require ( "process" ) ;
const { generateIndex } = require ( "hugo-lyra" ) ;
( async ( ) => {
const res = await generateIndex ( "./content" , {
indexFilePath : process . cwd ( ) ,
} ) ;
console . log ( res ) ;
} ) ( ) ;
