jekyll lunr js search
1.0.0
브라우저에서 JavaScript를 사용하여 Jekyll 정적 웹사이트에 대한 간단한 전체 텍스트 검색을 제공하려면 lunr.js를 사용하세요.
Pascal Widdershoven의 Jekyll + indextank와 Michael Levin의 Sitemap.xml 생성기 플러그인에서 영감을 받았습니다.
이 Jekyll 플러그인은 lunr.js 호환 .json 인덱스 파일 생성을 처리합니다. 런타임 검색 구성은 간단한 jQuery 플러그인으로 제공됩니다.
모든 Jekyll 페이지와 게시물에 대한 전체 텍스트 검색이 가능합니다. 서버 측 처리 없이 클라이언트에 의해 실행됩니다(정적 파일 제공 외부).
Ruby Gem으로 설치하거나 미리 빌드된 플러그인 파일을 Jekyll 사이트에 복사하여 설치하도록 선택하세요.
jekyll-lunr-js-search Ruby Gem을 설치하세요.
gem install jekyll-lunr-js-search
Gem을 포함하도록 Jekyll _config.yml 파일을 수정하세요.
gems: ['jekyll-lunr-js-search']
_plugins 폴더 안에 build/jekyll_lunr_js_search.rb 넣으세요. 모든 Jekyll 게시물과 페이지의 콘텐츠는 lunr.js에서 사용할 수 있도록 js/index.json 파일로 색인화됩니다. 이는 사이트가 생성될 때마다 발생합니다.
js/jquery.lunr.search.js 에 jQuery 플러그인이 제공되어 이 플러그인에서 생성된 검색 색인 JSON 데이터로 lunr.js의 구성을 처리합니다.
jQuery 플러그인의 종속성은 다음과 같습니다.
위의 모든 종속성과 함께 연결되고 축소된 jQuery 플러그인의 사전 빌드된 버전은 build/search.min.js에서 사용할 수 있습니다.
플러그인은 축소된 JavaScript 파일 js/search.min.js 를 _site 에 자동으로 추가합니다.
이를 사용하려면 지정된 검색 페이지 하단에 스크립트 참조를 추가해야 합니다.
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
js/jquery.lunr.search.js Jekyll 사이트의 JavaScript 디렉토리에 복사하세요.
jquery.lunr.search.js 및 위에 설명된 각 종속성에 대한 지정된 검색 페이지 하단에 스크립트 참조를 추가하세요.
<script src="/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/lunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/URI.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>
gem과 동일한 버전의 lunr.js를 사용해야 합니다. Jekyll 로그 출력에는 사용된 버전이 포함됩니다.
이상적으로는 uglify/Google 클로저/등을 사용하여 이러한 6개의 .js 파일을 연결, 축소 및 최적화하여 참조할 단일 search.min.js 파일을 생성합니다(또는 위 2a에 설명된 대로 사전 구축된 스크립트를 사용).
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
<form action="/search" method="get">
<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>
3자 이상 입력하면 검색이 수행됩니다.
양식 작업을 제공하고 get 메서드를 지정하면 사용자가 Return/Enter를 눌러 검색도 제출할 수 있습니다. 필요에 따라 자신의 사이트 검색 페이지에 대한 양식의 작업 URL을 수정합니다.
<section id="search-results" style="display: none;"> </section>
플러그인이 검색할 때 요소를 표시하므로 처음에는 숨겨질 수 있습니다.
{% raw %}
<script id="search-results-template" type="text/mustache">
{{#entries}}
<article>
<h3>
{{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
<a href="{{url}}">{{title}}</a>
</h3>
{{#is_post}}
<ul>
{{#tags}}<li>{{.}} </li>{{/tags}}
</ul>
{{/is_post}}
</article>
{{/entries}}
</script>
{% endraw %}
콧수염 태그가 Jekyll에 의해 제거되지 않도록 하려면 {% raw %} 및 {% endraw %} 사용에 유의하세요.
표시할 수 있는 필드는 다음과 같습니다.
검색결과 항목 목록(필수)
게시물의 원시 게시 날짜 또는 페이지의 경우 null입니다. 템플릿에서 다음 날짜 표시를 전환하는 데 사용할 수 있습니다 {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .
html5 <time datetime="{{pubdate}}"> 요소에 사용되는 'yyyy-mm-dd' 형식의 게시물 게시 날짜입니다(게시물에만 해당).
게시물 게시 날짜('mmm dd, yyyy' 형식)(예: 2012년 10월 12일)(게시물에만 해당)
Jekyll 페이지나 게시물의 제목입니다.
하이퍼링크 <a href="{{url}}">{{title}}</a> 를 생성하는 데 사용할 수 있는 Jekyll 페이지 또는 게시물의 URL입니다.
Jekyll 페이지나 게시물의 카테고리(배열)는 {{#categories}}{{.}} {{/categories}} 루프에서 사용하여 나열할 수 있습니다.
Jekyll 페이지나 게시물의 태그(배열)는 {{#tags}}{{.}} {{/tags}} 루프에서 사용하여 나열할 수 있습니다.
부울 값, 현재 결과 요소가 게시물인 경우 true입니다. 템플릿의 특정 요소 표시를 전환하는 데 사용할 수 있습니다 {{#is_post}}is a post{{/is_post}}
<script type="text/javascript">
$(function() {
$('#search-query').lunrSearch({
indexUrl : '/js/index.json', // url for the .json file containing search index data
results : '#search-results', // selector for containing search results element
template : '#search-results-template', // selector for Mustache.js template
titleMsg : '<h1>Search results<h1>', // message attached in front of results (can be empty)
emptyMsg : '<p>Nothing found.</p>' // shown message if search returns no results
});
});
</script>
모든 페이지의 YAML 구성에 다음 exclude_from_search 설정을 추가합니다.
exclude_from_search: true
또는 사이트의 _config.yml 파일에 제외 배열(개별 정규식)을 추가합니다.
lunr_search:
excludes: [rss.xml, atom.xml]
불용어 파일과 색인 파일에 포함될 최소 단어 길이를 구성할 수도 있습니다. _config.yml 에 검색 블록을 추가하면 됩니다. 기본값은 다음과 같습니다.
lunr_search:
stopwords: "stopwords.txt"
min_length: 3
불용어 파일은 구두점 없이 소문자로 한 줄에 한 단어로 구성되어야 합니다.
다음과 같이 index.json , search.min.js 및 lunr.min.js 를 다른 디렉터리에 저장하도록 선택할 수 있습니다.
lunr_search:
js_dir: "javascript"
검색 플러그인은 10consulting.com/search에 배포됩니다. 몇 가지 검색 쿼리 예는 /search/?q=git, /search/?q=cqrs입니다.
또한 홈페이지의 검색 필드에 집중할 때 검색 플러그인 .js 를 주문형으로 로드하는 기능도 있습니다. 검색 입력을 클릭하는 브라우저 네트워크 요청을 살펴보세요.
단일 jekyll_lunr_js_search.rb 플러그인 파일을 빌드합니다.
Bundler를 설치한 후 다음을 실행하세요.
bundle install
Bower를 설치합니다.
플러그인을 빌드합니다.
rake build
그런 다음 build/jekyll_lunr_js_search.rb Jekyll 사이트의 _plugins 폴더에 복사하고 build/*.min.js 파일을 사이트의 js 폴더에 복사하세요.
.js 및 .js.map 파일을 포함하면 브라우저 개발자 콘솔이 축소되지 않은 코드에 연결됩니다.
