gridea search

Gridea 정적 사이트 클라이언트-기사 검색 테마 플러그인

미리보기: https://kytrun.com 또는 이 프로젝트를 다운로드하고, Gridea의 테마 경로에 example/ 디렉터리를 배치하고, Gridea를 직접 실행하세요.

프론트 엔드 프로그래밍에 기초를 둔 Gridea 테마 개발자에게만 적합합니다. grinda-search를 사용하는 테마는 여기에서 볼 수 있습니다 .

특징:

• 독립형 검색결과 페이지 및 웹 링크
• 테마 개발자는 기존 템플릿을 높은 수준으로 재사용할 수 있습니다.
• 공식 API 사용 확장, 추가 학습 비용 없음
• 검색을 사용하여 필요한 리소스만 로드
• 지원 스타일 사용자 정의
• 좋은 호환성

빠른 시작:

1. 공식 테마 개발 템플릿을 예로 들어 이를 기반으로 새 파일을 추가합니다.

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. 다음 파일을 수정하세요

(1) ./templates/api.ejs

JSON 형식의 API를 출력하는 템플릿입니다. 네트워크 전송 시간을 최대한 단축하기 위해 일부 속성에는 필요에 따라 해당 주석을 취소할 수 있습니다.

(2) ./templates/includes/header.ejs

공개 템플릿, 다른 페이지에서 참조할 수 있도록 적절한 위치에 검색창을 추가하세요.

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

기존 부품은 수정할 수 없으며 클래스, 스타일 등 다른 속성을 추가할 수 있습니다.

(3) ./templates/search.ejs

검색 페이지는 다른 페이지를 기반으로 수정된 다음 검색 결과 렌더링 노드 및 종속 스크립트를 추가할 수 있습니다.

• 종속 스크립트 <script> 는 </body> 앞에 배치되어야 합니다. 로드 오류를 방지하려면 순서를 임의로 변경하지 마십시오.

(4) ./assets/media/gridea-search/result-template.ejs

검색 결과 목록 템플릿은 브라우저 측에서 파싱되어 기본적으로 ./templates/includes/post-list.ejs를 재사용하지만, 요약 내용 <%- post.abstract %> 는 <%- post.searchedPreview %> 로 수정됩니다. 키워드가 포함된 검색결과 미리보기를 사용합니다.

• 검색결과 목록에는 아직 페이지 매김 기능이 없습니다. pagination 필드를 사용하지 마세요.

스타일 사용자 정의:

1. 검색 결과를 표시하고 검색 결과를 표시하지 않음

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >

• 클래스, ID 등과 같은 기존 속성을 유지하고 새 속성, 아이콘 또는 애니메이션을 추가합니다.

2. 검색 입력창

• 기존 속성을 유지하고, 새 속성을 추가하고, 아이콘이나 애니메이션을 추가하세요.

3. 키워드 강조

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style > 

다른:

• Gridea-search를 사용한 주제

• 공식 디렉토리 구조 및 페이지 변수 설명

• 타사 라이브러리:

  • 프런트엔드 퍼지 검색 - Fuse.js: https://github.com/krisk/fuse

  • 템플릿 구문 분석 - EJS: https://github.com/mde/ejs

• 오픈소스 라이선스: MIT

• 관련 기사:

  • Gridea 블로그에 검색 기능 추가