hugo lyra

ฮิวโก้-ไลรา

Hugo เป็นเครื่องมือสร้างไซต์แบบคงที่ที่ยอดเยี่ยม และเช่นเดียวกับส่วนใหญ่ ไม่สามารถใช้งานเครื่องมือค้นหาแบบไดนามิกเหมือนกับที่เราคุ้นเคยบนแพลตฟอร์มฝั่งเซิร์ฟเวอร์แบบเดิมๆ โดยมีความสามารถในการสืบค้นขั้นสูงไม่มากก็น้อย

โครงการนี้มีจุดมุ่งหมายเพื่อแก้ไขปัญหานี้โดยการรวมเครื่องมือค้นหาของ Lyra เข้ากับ Hugo

ทำงานโดยการแยกวิเคราะห์ไฟล์ content/**/*.md ให้เป็นข้อความดิบ และใช้เพื่อสร้างดัชนี Lyra ซึ่งจะกลายเป็นสินทรัพย์คงที่ที่คุณสามารถเผยแพร่ควบคู่ไปกับไฟล์อื่นๆ ของ Hugo public dist

โปรเจ็กต์นี้ยังนำเสนอไลบรารีจาวาสคริปต์ฝั่งไคลเอ็นต์เพื่อให้ใช้ดัชนีจากเว็บไซต์ 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 อ็อบเจ็กต์ส่วนกลาง 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

> เคล็ดลับ: หากคุณรันด้วย 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);

} ) ( ) ;

จาวาสคริปต์

 const { cwd } = require ( "process" ) ;
const { generateIndex } = require ( "hugo-lyra" ) ;

( async ( ) => {
  const res = await generateIndex ( "./content" , {
    indexFilePath : process . cwd ( ) ,
  } ) ;
  console . log ( res ) ;
} ) ( ) ;