都2020了，带你开发hexo主题(十二)

前言

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

搜索模块

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

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

1	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="">
  <a role="button" class="popup-trigger"><i class="fa-search-btn fa fa-search fa-fw"></i><input placeholder="Searching..." type="text" class="search-input-btn"></a>
</li>

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

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

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

然后去看search.ejs：

<div class="site-search">
  <div class="popup search-popup" style="display: none;">
    <div class="search-header">
      <span class="search-icon">
        <i class="fa fa-search"></i>
      </span>
      <div class="search-input-container">
        <input autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Searching..." spellcheck="false" type="search" class="search-input">
      </div>
      <span class="popup-btn-close">
        <i class="fa fa-times-circle"></i>
      </span>
    </div>
    <div id="search-result"></div>
  </div>
  <div class="search-pop-overlay" style="display: none;"></div>
</div>
<script>
var CONFIG = {
  path: '<%= config.search.path%>',
  root: '<%= config.root%>',
  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。

最终效果：

完结撒花~~~

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

有好的文章也可以向博主投稿哦

hojun

hello ，stranger