hugo lyra
v0.4.2
Hugo는 환상적인 정적 사이트 생성기이며 대부분과 마찬가지로 다소 고급 쿼리 기능을 사용하여 전통적인 서버 측 플랫폼에서 사용했던 것과 같은 동적 검색 엔진을 기본적으로 구현할 수 없습니다.
이 프로젝트는 Lyra 검색 엔진을 Hugo와 통합하여 이 문제를 해결하는 것을 목표로 합니다.
content/**/*.md 파일을 원시 텍스트로 구문 분석하고 이를 사용하여 Hugo 공개 dist의 다른 파일과 함께 게시할 수 있는 정적 자산이 되는 Lyra 인덱스를 생성하는 방식으로 작동합니다.
이 프로젝트는 또한 Hugo 웹사이트의 색인을 쉽게 사용할 수 있도록 클라이언트 측 자바스크립트 라이브러리를 제공합니다. 구현을 위해 여기 및 여기 내 개인 블로그에서 실제로 작동하는 모습을 볼 수 있습니다. 자세한 내용은 클라이언트 섹션으로 이동하세요.
파서는 마크다운 파일만 구문 분석할 수 있으며, 표준 머리말 요소, 태그와 같은 배열, 카테고리는 내포되어 공백으로 구분됩니다.
스키마 정의 :
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 전역 개체에서 새로운 전역 개체를 찾을 수 있습니다.
사용 방법은 귀하의 필요에 더 잘 맞는 것은 귀하에게 달려 있습니다. 시작점으로 사용할 수 있는 간단한 원시 자바스크립트 구현을 아래에서 찾을 수 있습니다.
( 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
> TIP: DEBUG=hugo-lyra npx hugo lyra 로 실행하면 수익을 낼 수 있습니다.
> 추가 디버깅 로그.
예를 들어, 다음을 원한다고 가정합니다.
JSON 형식으로 인덱스 생성
dist/search 에 저장하세요.
content/posts 분석
명령은 다음과 같습니다: npx --yes hugo-lyra --content content/posts --indexFormat json --indexFilePath output/search
TIP:
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 ) ;
} ) ( ) ;
