jekyll에 algolia기반의 검색창을 달려고한다.
뭘 먼저 보야할지 모르겠다. 일단 예제부터 찾아본다.
jekyll에 algolia 붙이는 가이드
일반적인 algolia에 대한 가이드
- 배운것
Algolia는 search API를 제공하는데, application id에 index를 만들고, 해당 index에
search하기위한 자료를 넣는다. 그리고 API를 통해 그 자료들을 검색할수있도록 해준다.
물론 configuration도 가능하다. 그리고 취미용으는 무료다.
따라하는 가이드
https://www.algolia.com/doc/onboarding/#/pick-dataset
Step#1. node app
package.json 을 만들고
npm install node-fetch –save
하고 node app.js로 실행해준다음에. algolia UI를 보면 입력되어있는 index들을 확인할수있다 대단하다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const algoliasearch = require('algoliasearch');
const fetch = require('node-fetch');
const client = algoliasearch('aaaa', '3154418511032fcd57ca68cd50b38085')
const index = client.initIndex('demo_ecommerce')
fetch('https://alg.li/doc-ecommerce.json')
.then(function(response) {
return response.json()
})
.then(function(products) {
index.addObjects(products)
})
Q. index에 item을 어떻게 추가할수있다는거지? Option#1. script를 만들어서 제목리스트로 추가? Q2. 그럼 내용검색은 어떻게하지?
algolia에서 제공하는 jekyll plugin
당연하게도 algolia에서 jekyll용 plugin을 제공하는데,
Post를 쓰고 난후 jekyll algolia를 하면 plugin을 통해 index를 업데이트 쳐주는 방식이다.
jekyll algolia;getting-started
Gemfile 을 수정하여 plugin을 추가해주고 _config.yml을수정하여 algolia세팅을 해준다.
여기까지 backend 이고, frontend는 InstanceSearch라는 library를 쓰나보다.
InstantSearch.js
- use prebuilt version of InstantSearch.js from CDN.
- In jekyll blog, it might need to be inserted to header.
Widget을 이용해서 하는것같은데..
먼저 jekyll의 모든 페이지에 InstantSearch js, css가 포함될수있도록, _include/head.html에 include해주었다.
minima theme를 쓰고있기때문에 minima 에서 쓰는 head.html을 복사해서 script 테그를 달아준다. 하는방법: https://mmistakes.github.io/minimal-mistakes/docs/overriding-theme-defaults/
https://community.algolia.com/instantsearch.js/v2/widgets/searchBox.html
