前言
duangduangduang,终于到了十二更了。准备在这一章把这一系列教程结束掉。因为说真的很多story主题已经完善的差不多了。侧边栏里的友链页、关于页以及标签归档页都和归档页类似。分类列表页和标签列表页又雷同。所以准备今天再讲一个模块就可以完结了。
搜索模块
对了,就是搜索模块。至今为止都没有讲过相关的。这次就不用之前常用的那个insightSearch了,换下next的hexo-generator-searchdb试试,首先声明这俩都是本地搜索,所以不怕第三方停止服务啥的。所以做模块还是自力更生好233333~。
首先来到其github仓库:
输入命令安装它:(有些怀疑文档的安装命令,所以加上了–save,用cnpm安装比较好)
1
| cnpm install hexo-generator-searchdb --save
|
然后在根目录的config中加入:(注意是在主题外面那个)
1 2 3 4 5
| 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用来与用户交互:
1 2 3 4
| <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,核心代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| ...... <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <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。
最终效果:
完结撒花~
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦