jekyll theme 를 이용했던 시절, 문득 많은 컨텐츠가 있으면, 검색을 어떻게 할까? 라는 생각이 들었던 시절이 있다.
tistory 나 네이버 블로그 등을 이용했을 때에는 개별적인 검색 기능이 내장되어 있어서 큰 고민을 하진 않았는데,
jekyll theme 를 이용해서 git hub page 를 사용했을 때 고민이 되기 시작했었다.
그래서 찾아보았더니 TipueSearch 라는 jQuery plugin 이 있었는데,
TipueSearch 를 적용하는 방법에 대해서 알아보고, 실제로 적용 시켜보자.
Step 1) jekyll-tipue-search git에서 해당 소스를 내려받는다.
Step 2) search.html 파일을 자신의 블로그 프로젝트의 최상위 디렉토리로 복사한다.
eottabom.github.io
├── _includes
├── _layouts
...
├── `search.html`
...
Step 3) search.html 파일을 수정한다.
$(document).ready(function() {
$('#tipue_search_input').tipuesearch({
'wholeWords': false,
'showTime': false,
'minimumLength': 1
});
});
옵션 중에서 본인이 원하는 것을 찾아서 적용 해주면 된다.
- contextBuffer: true
- 컨텍스트에서 검색어 앞에 표시 되는 문자수(기본 값 60)
- contextLength: true
- 최소 문자수(기본 값 60)
- contextStart: true
- 검색어 앞에 설명 텍스트의 시작 위치가 컨텍스로 표시(기본 값 90)
- debug: true
- 검색 결과 표시(기본 값 false)
- descriptiveWords
- 검색에서 설명 텍스트에 표시되는 단어 수(기본 값 25)
- footerPages
- 페이지 바닥 글에 표시 되는 최대 페이지 선택 수(기본 값 3)
- highlightTerms: true
- 검색어가 강조 표시(기본 값 true)
- imageZoom: true
- true : 이미지 클릭시 이미지 미리보기 표시
- false : 이미지 클릭시 결과로 이동
- minimumLength
- 검색 쿼리의 최소 문자 길이(기본 값은 3)
- newWindow: true
- 검색 결과가 새 브라우저 탭에서 열림.(기본 값은 false)
- show
- 표시 되는 결과 수(기본 값은 10)
- showContext: true
- 검색어가 설명 텍스트에 컨텍스트로 표시(기본 값은 true)
- showRelated: true
- 관련 검색이 표시(기본 값은 true)
- showTime
- 검색 완료시 걸린 시간 표시(기본 값은 true)
- showTitleCount
- 문서 제목에 검색 결과 수가 표시(기본 값은 true)
- showURL: true
- 각 검색 결과에 URL이 표시(기본 값은 true)
- wholeWords: true
- 영어만 검색(기본 값은 true)
- 영어 이외의 언어를 사용하는 경우 false로 설정
Step 4) /assets/ 안에 있는 tipuesearch 폴더 역시 자신의 블로그 프로젝트의 최상위 디렉토리로 복사한다.
eottabom.github.io
├── _includes
├── _layouts
├── `assets`
└── tipuesearch
├── css
│ ├── normalize.css
│ └── tipuesearch.css
├── search.png
├── tipuesearch.min.js
├── tipuesearch_content.js
└── tipuesearch_set.js
├── search.html
...
Step 5) _config.yml 파일을 수정한다.
tipue_search:
include:
pages: false
collections: []
exclude:
files: [search.html, index.html, tags.html]
categories: []
tags: []
Step 6) head.html 에서 tipuesearch jQuery plugin 과 css를 추가해준다.
<!-- tipuesearch -->
<link rel="stylesheet" href="/assets/tipuesearch/css/tipuesearch.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/assets/tipuesearch/tipuesearch_content.js"></script>
<script src="/assets/tipuesearch/tipuesearch_set.js"></script>
<script src="/assets/tipuesearch/tipuesearch.min.js"></script>
Step 7) 적용하고 싶은 html 파일에 tags 추가
적절히 원하는 대로 커스터마이징 하면 될 것 같다.
<form action="/search">
<div class="tipue_search_left">
<img src="/assets/tipuesearch/search.png" class="tipue_search_icon">
</div>
<div class="tipue_search_right">
<input type="text" name="q" id="tipue_search_input" pattern=".{1,}" title="At least 1 characters" required></div>
<div style="clear: both;"></div>
</form>