Simple-Jekyll-Search

Build Status

A JavaScript library to add search functionality to any Jekyll blog.

Find it on npmjs.com.

Browser support should be about IE6+ with this addEventListener shim.

Installation

npm

npm install simple-jekyll-search

bower

bower install --save simple-jekyll-search

Getting started

Create search.json

Place the following code in a file called search.json in the root of your Jekyll blog.

This file will be used as a small data source to perform the searches on the client side:

---
---
[
  
    {
      "title"    : "JOIN: INNER JOIN",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/11/09/hansj.html",
      "date"     : "2018-11-09 13:33:53 +0000"
    } ,
  
    {
      "title"    : "JQuery 프로젝트에 VUE를 점진적으로 도입하기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/10/23/chunbs.html",
      "date"     : "2018-10-23 13:50:25 +0000"
    } ,
  
    {
      "title"    : "jekyll 문서를 PDF로 배포하기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/09/07/chunbs.html",
      "date"     : "2018-09-07 09:57:01 +0000"
    } ,
  
    {
      "title"    : "테이블을 내 마음대로! 컬럼 추가와 삭제, 테이블 분리",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/29/hansj.html",
      "date"     : "2018-08-29 12:54:42 +0000"
    } ,
  
    {
      "title"    : "트렐로를 이용한 브랜디 통합관리",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/24/moonkm.html",
      "date"     : "2018-08-24 10:56:36 +0000"
    } ,
  
    {
      "title"    : "AWS Rekognition + PHP를 이용한 이미지 분석 예제 (1/2)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/13/kimwk.html",
      "date"     : "2018-08-13 16:48:16 +0000"
    } ,
  
    {
      "title"    : "Code without Limits",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/12/kimjh.html",
      "date"     : "2018-08-12 16:48:16 +0000"
    } ,
  
    {
      "title"    : "QA 끝! ADB 설치부터 사용까지",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/10/kimcy.html",
      "date"     : "2018-08-10 16:35:13 +0000"
    } ,
  
    {
      "title"    : "PHP Codeigniter 환경에서 VUE 사용해보기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/07/kangww.html",
      "date"     : "2018-08-07 16:29:02 +0000"
    } ,
  
    {
      "title"    : "주니어 개발자가 외칩니다, "Hello, System Architecture!"",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/08/03/ohyj.html",
      "date"     : "2018-08-03 16:29:02 +0000"
    } ,
  
    {
      "title"    : "AWS Lambda + API Gateway로 API 만들어보자",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/31/kwakjs.html",
      "date"     : "2018-07-31 16:29:02 +0000"
    } ,
  
    {
      "title"    : "포스트맨 200% 활용하기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/27/chunbs.html",
      "date"     : "2018-07-27 10:40:39 +0000"
    } ,
  
    {
      "title"    : "AWS X-Ray를 이용한 분산 애플리케이션 분석",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/20/leesg.html",
      "date"     : "2018-07-20 11:00:21 +0000"
    } ,
  
    {
      "title"    : "안드로이드에서 딥링크 만들기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/18/kimby.html",
      "date"     : "2018-07-18 16:01:50 +0000"
    } ,
  
    {
      "title"    : "안드로이드 개발자의 고민: Fragment",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/17/gojs.html",
      "date"     : "2018-07-17 16:01:50 +0000"
    } ,
  
    {
      "title"    : "iOS Graphic Interface 살펴보기 (1/2)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/16/leejh.html",
      "date"     : "2018-07-16 13:56:10 +0000"
    } ,
  
    {
      "title"    : "원하는 대로 뭉치는 GROUP BY",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/11/hansj.html",
      "date"     : "2018-07-11 16:23:56 +0000"
    } ,
  
    {
      "title"    : "JIRA하고 자빠졌네!?",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/09/kimcy.html",
      "date"     : "2018-07-09 16:23:56 +0000"
    } ,
  
    {
      "title"    : "[체크셔츠데이 소개]강남에서 가장 재미있는 개발자 모임",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/04/janggw.html",
      "date"     : "2018-07-04 16:05:22 +0000"
    } ,
  
    {
      "title"    : "[체크셔츠데이 발표1]jekyll을 활용한 기술블로그 구축",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/03/chunbs.html",
      "date"     : "2018-07-03 16:05:22 +0000"
    } ,
  
    {
      "title"    : "[체크셔츠데이 발표2]Bring the Func!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/02/kimjh.html",
      "date"     : "2018-07-02 16:05:22 +0000"
    } ,
  
    {
      "title"    : "[체크셔츠데이 발표3]iOS 개발을 위한 11가지 노하우",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/07/01/leejh.html",
      "date"     : "2018-07-01 16:05:22 +0000"
    } ,
  
    {
      "title"    : "[Notice] 6월 28일, 체크셔츠데이가 열립니다.",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/06/28/janggw.html",
      "date"     : "2018-06-28 14:39:30 +0000"
    } ,
  
    {
      "title"    : "안드로이드 디버깅 방법",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/06/14/kimby.html",
      "date"     : "2018-06-14 14:04:43 +0000"
    } ,
  
    {
      "title"    : "개발자를 위한 공감세미나 16th 강연 후기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/06/11/kimwk.html",
      "date"     : "2018-06-11 14:39:30 +0000"
    } ,
  
    {
      "title"    : "덕질도 신박하게! R을 활용한 텍스트 마이닝 도전기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/06/10/kimwk.html",
      "date"     : "2018-06-10 14:39:30 +0000"
    } ,
  
    {
      "title"    : "TDD(파이썬) : 테스트 잘하고 계신가요?",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/06/07/kwakjs.html",
      "date"     : "2018-06-07 13:46:42 +0000"
    } ,
  
    {
      "title"    : "순서대로 척척, ORDER BY",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/06/01/hansj.html",
      "date"     : "2018-06-01 15:42:38 +0000"
    } ,
  
    {
      "title"    : "오토 레이아웃(Auto Layout), 넌 누구냐!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/30/kimjh.html",
      "date"     : "2018-05-30 13:35:08 +0000"
    } ,
  
    {
      "title"    : "Docker, NodeJS, Nginx! 너로 정했다!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/25/kangww.html",
      "date"     : "2018-05-25 15:49:07 +0000"
    } ,
  
    {
      "title"    : "PM, 대충하면 큰일납니다 (2/2)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/24/moonkm.html",
      "date"     : "2018-05-24 15:32:52 +0000"
    } ,
  
    {
      "title"    : "AWS Batch 사용하기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/23/yunsh.html",
      "date"     : "2018-05-23 15:14:42 +0000"
    } ,
  
    {
      "title"    : "Amazon SageMaker는 처음이지?",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/17/ohyj.html",
      "date"     : "2018-05-17 15:16:42 +0000"
    } ,
  
    {
      "title"    : "jekyll을 이용한 Github 블로그 만들기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/14/chunbs.html",
      "date"     : "2018-05-14 15:21:14 +0000"
    } ,
  
    {
      "title"    : "Vue, 어디까지 설치해봤니?",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/03/kwakjs.html",
      "date"     : "2018-05-03 11:06:19 +0000"
    } ,
  
    {
      "title"    : "TableView vs CollectionView (ENG)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/03/kimjh.html",
      "date"     : "2018-05-03 11:01:37 +0000"
    } ,
  
    {
      "title"    : "테이블이냐, 컬렉션이냐, 그것이 문제로다!(KOR)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/05/02/kimjh.html",
      "date"     : "2018-05-02 10:35:36 +0000"
    } ,
  
    {
      "title"    : "Event-Driven Programming",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/04/23/leesg.html",
      "date"     : "2018-04-23 16:43:27 +0000"
    } ,
  
    {
      "title"    : "쉬어가기: 1분기, 랩스의 셀럽은 누구?!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/04/04/janggw.html",
      "date"     : "2018-04-04 11:44:43 +0000"
    } ,
  
    {
      "title"    : "CodeStar + Lambda + SAM으로 테스트 환경 구축하기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/04/03/chunbs.html",
      "date"     : "2018-04-03 17:36:22 +0000"
    } ,
  
    {
      "title"    : "단일 TABLE을 SELECT하자!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/27/hansj.html",
      "date"     : "2018-03-27 17:36:22 +0000"
    } ,
  
    {
      "title"    : "어제의 실수는 오늘의 노하우!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/20/kimwk.html",
      "date"     : "2018-03-20 15:25:14 +0000"
    } ,
  
    {
      "title"    : "Let’s use open source library, CocoaPods! (ENG)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/19/kimjh.html",
      "date"     : "2018-03-19 10:06:37 +0000"
    } ,
  
    {
      "title"    : "오픈소스 라이브러리를 사용해보자, CocoaPods! (KOR)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/16/kimjh.html",
      "date"     : "2018-03-16 00:00:00 +0000"
    } ,
  
    {
      "title"    : "Rxjava를 이용한 안드로이드 개발",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/09/gojs.html",
      "date"     : "2018-03-09 16:53:35 +0000"
    } ,
  
    {
      "title"    : "콘텐츠와 미디어에 대한 3분 고찰",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/07/janggw.html",
      "date"     : "2018-03-07 11:19:41 +0000"
    } ,
  
    {
      "title"    : "신입 개발자를 위한 코드의 정석",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/03/02/kimwk.html",
      "date"     : "2018-03-02 17:27:11 +0000"
    } ,
  
    {
      "title"    : "OLTP에 대하여",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/28/hansj.html",
      "date"     : "2018-02-28 17:27:11 +0000"
    } ,
  
    {
      "title"    : "깃발 올려, Git Effect!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/26/ohyj.html",
      "date"     : "2018-02-26 17:05:16 +0000"
    } ,
  
    {
      "title"    : "iOS 아키텍처 패턴(MVC, MVVM, VIPER)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/21/kimjh.html",
      "date"     : "2018-02-21 15:25:01 +0000"
    } ,
  
    {
      "title"    : "SQS + Lambda",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/16/leesg.html",
      "date"     : "2018-02-16 10:20:09 +0000"
    } ,
  
    {
      "title"    : "조건문을 긍정적으로!",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/13/chunbs.html",
      "date"     : "2018-02-13 13:56:05 +0000"
    } ,
  
    {
      "title"    : "애플리케이션 개발부터 배포까지, AWS CodeStar",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/09/yunsh.html",
      "date"     : "2018-02-09 11:08:06 +0000"
    } ,
  
    {
      "title"    : "독자의 시선을 예상하라 (2/2)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/07/janggw.html",
      "date"     : "2018-02-07 13:44:50 +0000"
    } ,
  
    {
      "title"    : "네이버 메인에서 보는 브랜디 랩스",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/02/01/janggw.html",
      "date"     : "2018-02-01 14:41:40 +0000"
    } ,
  
    {
      "title"    : "Database를 왜 사용할까요?",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/31/hansj.html",
      "date"     : "2018-01-31 00:00:00 +0000"
    } ,
  
    {
      "title"    : "독자의 시선을 예상하라 (1/2)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/30/janggw.html",
      "date"     : "2018-01-30 14:07:08 +0000"
    } ,
  
    {
      "title"    : "Mac을 처음 쓰는 개발자에게",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/23/kwakjs.html",
      "date"     : "2018-01-23 13:51:17 +0000"
    } ,
  
    {
      "title"    : "좋은 콘텐츠가 뭐냐고 물으신다면",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/19/janggw.html",
      "date"     : "2018-01-19 17:35:40 +0000"
    } ,
  
    {
      "title"    : "PM, 대충하면 큰일납니다 (1/2)",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/18/moonkm.html",
      "date"     : "2018-01-18 11:07:39 +0000"
    } ,
  
    {
      "title"    : "imagick PHP Extension 설치 가이드",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/15/kangww.html",
      "date"     : "2018-01-15 13:36:33 +0000"
    } ,
  
    {
      "title"    : "iOS 개발을 위한 11가지 노하우",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/08/leejh.html",
      "date"     : "2018-01-08 17:24:25 +0000"
    } ,
  
    {
      "title"    : "개발자의 시간 벌기",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/03/easydebug.html",
      "date"     : "2018-01-03 00:00:00 +0000"
    } ,
  
    {
      "title"    : "브랜디 22차 QA를 진행하며",
      "category" : "",
      "tags"     : "",
      "url"      : "/2018/01/02/kimcy.html",
      "date"     : "2018-01-02 00:00:00 +0000"
    } 
  
]

Using the plugin

You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)

For example in _layouts/default.html:

<!-- 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="/simple-jekyll-search.min.js"></script>

Configuration

Customize SimpleJekyllSearch by passing in your configuration options:

SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json'
})

searchInput (Element) [required]

The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.

resultsContainer (Element) [required]

The container element in which the search results should be rendered in. Typically an <ul>.

json (String|JSON) [required]

You can either pass in an URL to the search.json file, or the results in form of JSON directly, to save one round trip to get the data.

searchResultTemplate (String) [optional]

The template of a single rendered search result.

The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.

E.g.

The template

<li><a href="{url}">{title}</a></li>

will render to the following

<li><a href="/jekyll/update/2014/11/01/welcome-to-jekyll.html">Welcome to Jekyll!</a></li>

If the search.json contains this data

[
    {
      "title"    : "Welcome to Jekyll!",
      "category" : "",
      "tags"     : "",
      "url"      : "/jekyll/update/2014/11/01/welcome-to-jekyll.html",
      "date"     : "2014-11-01 21:07:22 +0100"
    }
]

templateMiddleware (Function) [optional]

A function that will be called whenever a match in the template is found.

It gets passed the current property name, property value, and the template.

If the function returns a non-undefined value, it gets replaced in the template.

This can be potentially useful for manipulating URLs etc.

Example:

SimpleJekyllSearch({
  ...
  templateMiddleware: function(prop, value, template) {
    if (prop === 'bar') {
      return value.replace(/^\//, '')
    }
  }
  ...
})

See the tests for an in-depth code example

noResultsText (String) [optional]

The HTML that will be shown if the query didn’t match anything.

limit (Number) [optional]

You can limit the number of posts rendered on the page.

fuzzy (Boolean) [optional]

Enable fuzzy search to allow less restrictive matching.

exclude (Array) [optional]

Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).

Wiki

Check out the wiki!

Development

  • npm install
  • npm test

Contributors

Thanks to all contributors over the years! You are the best :)

@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber and many others!