Gatsby 웹 사이트에 LUNR 검색을 추가하는 방법

Jamstack 아키텍처는 웹 사이트 개발에 큰 관심을 끌고 있습니다. Gatsby, Nuxt 또는 Gridsome을 탐험 했습니까? 사용 편의성과 사전 구축 된 기능은 종종 인상적입니다. 그러나 검색 기능이 항상 내장 기능이 아니며 컨텐츠가 풍부한 사이트에 대한 과제를 제시합니다. 서버 측 구성 요소없이 강력한 검색을 구현할 수 있습니까?

Jamstack에는 본질적으로 내장 검색 기능이 부족합니다. 이를 위해서는 신중한 고려와 구현이 필요합니다. Algolia의 Search-as-A-Service (무료 계획 제한 사항)와 같은 옵션이 존재하지만 WPGRAPHQL 및 APOLLO 클라이언트를 사용한 WordPress의 검색 활용과 같은 옵션이 있지만이 기사는 클라이언트 측 솔루션에 중점을 둡니다.

외부 서버 종속성없이 확장적이고 사용자 정의 가능한 검색을 제공하는 경량 JavaScript 라이브러리 인 LUNR.JS를 사용하여 검색 색인을 구축하고 검색을 Gatsby 사이트에 통합합니다. 최근 Tartanify.com에서 "Tartan 이름 검색"기능을 추가하여 영구 실시간 검색과 관련된 과제를 극복했습니다. 이 기사는 이러한 도전과 솔루션을 자세히 설명합니다.

시작하기

간단하게하기 위해 공식 개츠비 블로그 스타터를 사용하겠습니다. 이것은 정적 웹 사이트 생성의 많은 측면을 추상화합니다. 따라야 할 :

 Gatsby New Gatsby-Starter-Blog https://github.com/gatsbyjs/gatsby-starter-blog
CD 개츠비 스타터 블로그
개츠비가 개발

이것은 http://localhost:8000/ 에서 액세스 할 수있는 3 개의 게시물이있는 작은 블로그를 만듭니다. http://localhost:8000/__graphql 검사 사용 가능한 데이터가 표시됩니다.

LUNR.JS로 역 지수를 구현합니다

LUNR은 레코드 수준 역 지수를 사용합니다. 이것은 사이트의 각 단어를 해당 위치 (페이지 경로)로지도합니다. 인덱싱 키워드를 제공하는 필드 (제목, 내용, 설명 등)를 결정합니다.

블로그의 경우 제목과 콘텐츠를 색인합니다. 제목은 간단하지만 내용은 청소가 필요합니다. 마크 다운 구문으로 인해 처음에 rawMarkdownBody 사용하면 문제가 발생했습니다. html 필드와 striptags 패키지를 사용하여 HTML 태그를 제거합니다. 자세한 내용은 LUNR 문서를 참조하십시오.

LUNR 지수 생성 및 인구 스 니펫 ( gatsby-node.js 에서 나중에 사용)은 다음과 같습니다.

 const index = lunr (function () {
  this.ref ( '슬러그')
  this.field ( '제목')
  this.field ( 'content')
  for (문서의 const doc) {
    this.add (doc)
  }
})

documents 각각 slug , title 및 content 가있는 객체 배열입니다.

 {
  슬러그 : '/post-slug/',
  제목 : '게시물 제목',
  내용 : '모든 HTML 태그가 제거 된 내용을 게시하십시오.'
}

고유 한 문서 키 ( slug )와 두 개의 필드 ( title 및 content )를 정의합니다. 모든 문서가 반복적으로 추가됩니다.

gatsby-node.js 에서 인덱스 생성

먼저 필요한 라이브러리를 설치하십시오.

 원사 LUNR GraphQL-Type-JSON Striptags를 추가합니다

다음으로 gatsby-node.js 수정하십시오. 이 파일은 사이트 빌드 중에 실행되므로 인덱스 생성을 추가 할 수 있습니다. Gatsby API createResolvers 사용하여 새로운 루트 필드 인 LunrIndex 만듭니다.

Gatsby의 데이터 스토어 및 쿼리 기능은 GraphQL 필드 리졸버를 통해 노출됩니다. getAllNodes 지정된 유형의 노드를 검색합니다.

 / * gatsby-node.js */
// ... (가져 오기)

Exports.CreaterSolvers = ({캐시, 크리터 졸버}) => {
  Createresolvers ({
    쿼리 : {
      lunrindex : {
        유형 : GraphQljsonObject,
        해결 : (소스, args, 컨텍스트, 정보) => {
          const blognodes = context.nodemodel.getAllNodes ({type :`markDownRemark`});
          const type = info.schema.getType ( 'MarkdownRemark');
          return createIndex (blognodes, type, cache);
        },
      },
    },
  });
};

// ... (CreateIndex 기능)

createIndex 기능은 LUNR 스 니펫을 사용합니다.

 / * gatsby-node.js */
// ... (가져 오기)

const createIndex = async (blognodes, type, cache) => {
  // ... (캐싱을 포함하여 데이터를 가져 오기위한 구현)
};

(데이터 가져 오기, 처리 및 캐싱을 포함한 완전한 createIndex 기능은 간결하게 생략되지만 기능 구현에는 중요합니다. 원래 응답은이 세부 사항을 제공합니다.) 이렇게하면 필요한 경우에만 인덱스가 재건되도록합니다.

검색 양식 구성 요소 추가

검색 양식 구성 요소 작성 ( src/components/search-form.js ) :

 // ... (검색 양식 구성 요소 구현)

(완전한 구성 요소 구현은 간결성에 대해 생략되지만 원래 응답에 자세히 설명되어 있습니다.)이 구성 요소는 쿼리 매개 변수를 탐색 /search 양식 제출 및 입력 변경을 처리합니다.

검색 결과 페이지 생성

검색 결과 페이지 생성 페이지 ( src/pages/search.js ) :

 // ... (검색 결과 페이지 구현)

(전체 페이지 구현은 간결하게 생략되지만 원래 응답에 자세히 설명되어 있습니다.)이 페이지는 LunrIndex 데이터를 사용하여 검색 결과를 표시합니다.

영구 검색 위젯 (tartanify.com 예제)

tartanify.com 예제는 지속적인 인스턴트 검색 위젯을 보여줍니다. 인덱스 생성은 블로그 예제와 비슷하지만 간단합니다.

 // ... (tartanify.com의 색인 생성)

(완전한 구현은 간결성에 대해 생략되었지만 원래 응답에 자세히 설명되어 있습니다.) 주요 차이점은 양식 제출이 아닌 입력 변경에 의해 트리거 된 즉각적인 검색 기능입니다. useStaticQuery hook은 데이터 가져 오기에 사용됩니다.

위젯을 지속적으로 만듭니다

페이지 변경에 대한 검색 위젯을 유지하기 위해 Gatsby의 wrapPageElement API를 사용합니다.

 // Gatsby-Browser.js
// ... (WaprageElement 구현)

(완전한 구현은 원래 응답에 자세히 설명되어 있습니다.) 이것은 검색 위젯으로 페이지 내용을 감싸서 지속성을 보장합니다.

사용자 정의 검색 쿼리 향상

원래 응답은 LUNR의 query 메소드를 사용하여 검색 쿼리의 개선을 위해 퍼지 매치, 와일드 카드 및 부울 로직을 더 나은 검색 결과를 처리합니다. 이 섹션에서는 검색 경험을 크게 향상시킵니다.

결론

Jamstack 웹 사이트에서 검색 기능을 구현할 수 있으며 사용자 경험을 크게 향상시킬 수 있습니다. Jamstack의 무국적 특성과 상충되는 것처럼 보이지만 Lunr.JS와 같은 클라이언트 측 솔루션은 강력하고 유연한 대안을 제공합니다. 이 기사에 자세히 설명 된 신중한 고려 사항과 구현은 사려 깊은 설계 및 개발을 통해 우수한 사용자 경험을 창출 할 수있는 잠재력을 강조합니다.

위 내용은 Gatsby 웹 사이트에 LUNR 검색을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!