前言

duangduangduang，终于到了十二更了。准备在这一章把这一系列教程结束掉。因为说真的很多story主题已经完善的差不多了。侧边栏里的友链页、关于页以及标签归档页都和归档页类似。分类列表页和标签列表页又雷同。所以准备今天再讲一个模块就可以完结了。

搜索模块

对了，就是搜索模块。至今为止都没有讲过相关的。这次就不用之前常用的那个insightSearch了，换下next的hexo-generator-searchdb试试，首先声明这俩都是本地搜索，所以不怕第三方停止服务啥的。所以做模块还是自力更生好233333~。 首先来到其github仓库：

输入命令安装它：(有些怀疑文档的安装命令，所以加上了–save，用cnpm安装比较好)

cnpm install hexo-generator-searchdb --save

然后在根目录的config中加入：（注意是在主题外面那个）、

search:  path: search.xml  field: post  content: true  format: html

然后有的参考（没学会这技能可能是因为学生时期作业都是自己做的）:(会丁丁英语也能看懂吧，就怕你根本不去看)

在_partial目录下新建search.ejs，把参考的代码打进去。在source/js下新建search.js把参考的js代码打进去。在footer.ejs中引入该js，接下来在哪里引入我们的搜索模块呢？决定就加在侧边栏中好了。

233333折腾半天突然觉得选择next就是个错误，各种坑多的不行。不过还是给一个一个解决了，解决过程就是一部辛酸史，总之已经搞好了。有需要的可以直接到story主题中copy，保证代码齐全，paste能用！有受虐侵向的可以参考去next。

代码解释

稍微捋捋代码来点干货，首先在侧边栏加个input用来与用户交互：

<!-- 搜索 --> <li class="&#​34;>  <a role="button&#​34; class="popup-trigger&#​34;><i class="fa-search-btn fa fa-search fa-fw"></i><input placeholder="Searching...&#​34; type="text&#​34; class="search-input-btn&#​34;></a> </li>

就是这个样子：（当然是加了css后）：

然后引入之前建的search.ejs，核心代码如下：

......  <ul class="nav-links&#​34;>    <!-- 搜索 -->    <li class="&#​34;>      <a role="button&#​34; class="popup-trigger&#​34;><i class="fa-search-btn fa fa-search fa-fw"></i><input placeholder="Searching...&#​34; type="text&#​34; class="search-input-btn&#​34;></a>    </li>    <% var sidebar = theme.sidebar %>    <% for (item in sidebar) {%>      <li class="link&#​34;>        <% if (!sidebar[item].submenus) {%>          <a href="<%- url_for(sidebar[item].path) %>"><i class=&#​34;<%= sidebar[item].fa %>"></i><%- item %></a>        <% } else { %>          <a href="<%- url_for(sidebar[item].path) %>" style=&#​34;pointer-events: none;"><i class=&#​34;<%= sidebar[item].fa %>"></i><%- item %></a>          <ol>            <% for (submenu in sidebar[item].submenus) {%>              <li><a href="<%- url_for(sidebar[item].submenus[submenu].path) %>"><%- submenu %></a></li>            <% } %>          </ol>        <% } %>      </li>    <% } %>  </ul> </nav> <%- partial('_partial/search&#​39;) %>

然后去看search.ejs：

<div class="site-search&#​34;>  <div class="popup search-popup&#​34; style="display: none;&#​34;>    <div class="search-header&#​34;>      <span class="search-icon&#​34;>        <i class="fa fa-search&#​34;></i>      </span>      <div class="search-input-container&#​34;>        <input autocomplete="off&#​34; autocorrect="off&#​34; autocapitalize="off&#​34; placeholder="Searching...&#​34; spellcheck="false&#​34; type="search&#​34; class="search-input&#​34;>      </div>      <span class="popup-btn-close&#​34;>        <i class="fa fa-times-circle&#​34;></i>      </span>    </div>    <div id="search-result&#​34;></div>  </div>  <div class="search-pop-overlay&#​34; style="display: none;&#​34;></div> </div> <script> var CONFIG = {  path: '<%= config.search.path%>',  root: '<%= config.root%>&#​39;,  localsearch:{    top_n_per_article: '<%= config.local_search.top_n_per_article%>',    trigger: '<%= config.local_search.trigger%>'  } } </script>

是这样的，和hexo-generator-searchdb仓库给的代码不是一样的，next那个小妖精又偷偷加了其他东西。没啥好看的，就是点击侧边栏会弹出这个页面这个样子。为啥会弹呢，是js中添加的点击事件触发它的。顺带一提，上面代码的js中的CONFIG就是为search.js准备的。search.js太多就不看了哈，能用就行233333。

最终效果：

完结撒花~

希望这篇文章能给你带来知识和乐趣，喜欢博主的文章可以加博主好友哦