为git page博客添加搜索功能
很多程序员朋友是在github上搞的自己的博客网站，省心省力。但毕竟github pages支持的是静态网站，很多动态功能都不太好支持。
这里我们找到了一种为博客添加搜索功能的方法。
依赖的是开源组件Simple-jekyll-search
- 这里我们首先把这个组件下载下来
git clone https://github.com/christian-fei/Simple-Jekyll-Search.git
- 我们需要的文件包括：
- search.json
- example/js/simple-jekyll-search.js
- example/js/simple-jekyll-search.min.js
- example/_plugins/simple_search_filter.rb
- example/_plugins/simple_search_filter_cn.r
- 我们分别为这些文件找一个存储的地方
以我的博客为里，我的博客地址是blurty.github.io/blog/
那我把simple.json放在blurty.github.io/blog/simple.json
把simple-jekyll-search.js和simple-jekyll-search.min.js放在blurty.github.io/blog/assert/themes/twitter/js下
把simple_search_filter.rb和simple_search_filter_cn.r放在blurty.github.io/blog/plugins
- 添加搜索子页面
这里就要根据所使用的框架来定义了。
首先是导航栏，一般我们会把搜索放在导航栏里。我使用的框架不需要单独指定导航栏有哪些东西，使用的是根目录下每个html文件里抬头标签里的group: navigation来指定的。
所以我需要在根目录下创建一个search.html文件，抬头内容是:
---
layout: page
title: 搜索
header: Search Posts
group: navigation
---
然后是搜索框的页面配置了，这部分内容可以在刚才下载下来的开源组件example/_layouts/default.html里找到，我们添加在search.html下边:
<!-- HTML elements for search -->
<input type="text" id="search-input" placeholder="搜索博客 - 输入标题/相关内容/日期/Tags.." style="width:380px;"/>
<ul id="results-container"></ul>
<!-- script pointing to jekyll-search.js -->
<script src="/blog/assets/themes/twitter/js/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/blog/search.json',
searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
noResultsText: '没有搜索到文章',
limit: 20,
fuzzy: false
})
</script>
- 需要注意的点
脚本中的路径跟我们在#3放置那几个静态文件的地方息息相关，配错了，搜索功能就无法生效。
举个例子，比如我的search.json是放在根目录下的，我的根目录又是blurty.github.io/blog，那我的search.json的路径就是
/blog/search.json
- 我们还可以为搜索框加一些好看的样式
找到你的style.css文件，在你的style.css文件里添加如下代码：
#search-input {
width: 90%;
height: 35px;
color: #333;
background-color: rgba(227,231,236,.2);
line-height: 35px;
padding:0px 16px;
border: 1px solid #c0c0c0;
font-size: 16px;
font-weight: bold;
border-radius: 17px;
outline: none;
box-sizing: border-box;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
#search-input:focus {
outline: none;
border-color: rgb(102, 175, 233);
background-color: #fff;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #007fff;
}
大功告成，提交之后，过一会儿你就可以看到你的网站上有搜索功能了。
为博客添加评论功能
采用gittalk插件能力