yilia本地搜索功能

发布在:我的博客 a|xian

yilia并没有在网站内搜索内容的功能，只能在所有文章里搜索匹配标题，这不能满足需求。在网上搜了不少资料，但并没有针对这个修改，这对前端基本没有了解的我，自己摸索起来是真的有点困难。在这里记录下自己修改的内容，并不是完善的功能，但是能实现搜索全站内容。

参考别人基于yilia主题升级的yelee实现的本地搜索功能:
MOxfive的博客
码农半亩田的博客

1.search插件安装

本地站内搜索都是基于索引文件的，Hexo中可通过hexo-generator-search插件生成XML格式的索引文件，通过hexo-generator-json-content插件生成JSON格式的索引文件，此处选择了hexo-generator-search:
npm install --save hexo-generator-search
然后在Hexo站点根目录下的_config.yml中添加如下配置即可：

search:
  path: search.xml
  field: all

search.xml文件冗余没做，有需要再弄吧

2.搜索框添加

修改主题目录left-col.ejs文件

		</nav>
		<nav class="header-smart-menu">
    		<% for (var i in theme.smart_menu){ %>
    			<% if(theme.smart_menu[i]){ %>
    			<a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
    			<% } %>
            <%}%>
		</nav>
在上面这代码后面添加

<form id="search-form"> <!-- 搜索框相关 -->
    <input type="text" id="local-search-input" name="q" results="0" style="text-align:center" placeholder="站内搜索..." class="search form-control" autocomplete="off" autocorrect="off"/>
    <i class="fa fa-times" onclick="resetSearch()"></i> <!-- 清空/重置搜索框 -->
</form>
<div id="local-search-result"></div> <!-- 搜索结果区 -->
<p class='no-result'>没找到。。。</p> <!-- 无匹配时显示，注意请在 CSS 中设置默认隐藏 -->

3.搜索框样式修改

参考他们的样式，修改main.0cf68a.css文件，在最后添加

.search {
  width: 65%;
  height: 25px;
  margin-top: 0px;
  padding: 0;
  font-family: inherit;
  border: 2px solid transparent;
  border-bottom: 3px solid #fff;
  border-radius: 2px;
  opacity: 0.8;
  background: #708090;
}
.search:hover {
  border: 2px solid #d3d3d3;
  opacity: