之前的文章給jekyll添加炫酷簡潔的搜索中介紹了怎么給jekyll添加全局搜索功能，為了能夠更快的加入搜索功能臀脏，現(xiàn)在已經(jīng)將搜索功能提取出來，做成一個(gè)單獨(dú)的組件，放在了https://github.com/androiddevelop/jekyll-search.
截圖
jekyll-search.jpg
進(jìn)入codeboy.me查看效果
操作
- 點(diǎn)擊右下角圖標(biāo)進(jìn)行搜索
- 雙擊ctrl鍵進(jìn)行搜索或關(guān)閉
- 搜索頁面點(diǎn)擊右上角關(guān)閉按鈕關(guān)閉搜索試圖
加入步驟
-
將search目錄放至于博客根目錄下逼友，其中search目錄結(jié)構(gòu)如下:
search ├── cb-footer-add.html ├── cb-search.json ├── css │ └── cb-search.css ├── img │ ├── cb-close.png │ └── cb-search.png └── js ├── bootstrap3-typeahead.min.js └── cb-search.js 在
_include/footer.html中的</footer>前加入cb-footer-add.html中的內(nèi)容即可。
注意事項(xiàng)
1.需要事先引入jquery與bootstrap3(js與css文件)框架秤涩，如果沒有的話帜乞，操作如下:
在_include/head.html 中引入以下代碼:
<link rel="stylesheet" >
在_include/footer.html 中引入以下代碼:
<!-- jQuery -->
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
2.默認(rèn)聯(lián)想8個(gè)，如果需要更多的話筐眷，請檢索 bootstrap3-typeahead.min.js 中的items:8, 將8替換成自己需要的數(shù)值黎烈。
