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

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

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>
 

변경사항 푸쉬 후 결과 확인

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


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