지킬 블로그에 검색 기능 추가하기

지킬 블로그에 검색 기능 추가하기

Summary:

지킬 블로그 포스팅들을 찾아볼 수 있는 검색 기능을 추가했습니다.


검색창 추가하는 방법

한량넷의 ‘지킬 블로그에 검색창 달기’ 게시글의 도움을 받았다. 순서대로 진행했다.

(추가) 코드가 마크다운에서는 제대로 나오는데 블로그 상에서는 내 블로그에 맞게 나온다.(? 무슨 말…) 그니까 내가 에디터에 쓴 코드와 블로그에서 보이는 코드가 다르게 표현된다. 아무리 재시도해도 마찬가지다. 그런 코드는 포스팅에서 지워버렸다. 한량넷에 접속하면 각 코드에 대한 링크가 있으니 그것을 복사하는 것이 낫다.


깃헙아이디.github.io 폴더에 2개 파일 추가

블로그 폴더(대부분 폴더명은 ‘깃허브아이디.github.io’일 것이다)에 아래 2개 파일을 만들어서 추가한다.

  1. 파일명: search2.json

  2. 파일명: Simple-Jekyll-Search.sublime-project

{
"folders":
[
{
"path": "."
}
]
}

dest 폴더 생성 및 파일 넣기

루트 폴더 아래 dest 폴더를 만들고 아래 2개 파일을 생성하여 추가한다.

  1. 파일명: jekyll-search.js

  2. 파일명: jekyll-search.min.js


_plugins 폴더 생성 및 파일 넣기

마찬가지로 루트 폴더 아래 _plugins 폴더를 만든 뒤 아래 1개 파일을 추가한다.

  1. 파일명: simple_search_filter.rb
module Jekyll
module CharFilter
def remove_chars(input)
input.gsub! '\\','\'
input.gsub! /\t/, ' '
input.strip_control_and_extended_characters
end
end
end

Liquid::Template.register_filter(Jekyll::CharFilter)

class String
def strip_control_and_extended_characters()
chars.each_with_object("") do |char, str|
str << char if char.ascii_only? and char.ord.between?(32,126)
end
end
end

루트 폴더에 search.html 만들기

---
layout: default
page_title: Search
permalink: /search/
---
<div id="results">
<h1><!-- `key` listing for `value` --></h1>

<ul class="results">
<!-- results lists -->
</ul>
</div>

<!— Html Elements for Search -->
<div id="search-container">
<input type="text" id="search-input" placeholder="search...">
<ul id="results-container"></ul>
</div>

<!-- Script pointing to jekyll-search.js -->
<script src="/dest/jekyll-search.js" type="text/javascript"></script>


<script type="text/javascript">
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search2.json',
searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
noResultsText: 'No results found',
limit: 10,
fuzzy: false,
exclude: ['Welcome']
})
</script>

이미지 파일을 모아둔 폴더에 검색 아이콘 저장하기

나의 경우 깃헙아이디.github.io > assets > images > icon 에 search.png를 저장했다. 검색 아이콘은 여기에서 검색 후 다운로드받았다.


_layout 폴더 안 default.html에 링크 넣기

<a href="/search/"><img src="/assets/images/icon/search.png"/></a>를 default.html 안에 원하는 자리에 추가한다. 나는 페이지 아래쪽에 추가했다.

<!-- default.html 내 <body> 일부 -->
<body>
<div class="wrapper-large">



</div>
<a href="/search/"><img src="/assets/images/icon/search.png"/></a>
</div>


</body>

변경사항 푸쉬 후 결과 확인

검색창이 제대로 달렸나 확인해본다.

pic1


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora