2018-02-16

hexo

Hexo博客landscape-plus移值next主题的站内搜索功能

由于landscape-plus主题使用的外部百度搜索，搜索到在进入目标文章。外部搜索没有站内搜素方便，其实next主题就有一个看上去不错的站内搜索，但是next主题又不是我喜欢的风格，所以查找很多博客文章最后看到可以移值next主题的搜索，所以有点兴趣，然后开始了next 主题搜索的移值功能。

参考了NexT本地搜索引擎的移植这篇文章，感谢这位小哥！期间也遇到很多小的问题这儿总结说一下。

search的安装和配置

打开博客所在目录，然后运行安装 npm install hexo-generator-searchdb --save,然后在博客的主要配置文件中_config.yml里面加上

search:
  path: search.xml
  field: post
  format: html
  limit: 1000

然后打开landscape-plus主题下的_config.yml

# search 
local_search:
  enable: true 
  trigger: auto  ## 表示搜索结果会不会打字时自动显示
  top_n_per_article: -1 ## 表示每篇文章最多显示几条结果（-1为不限数字）

Next主题中的搜索文件后缀是.swig,而landscape-plus主题中是.ejs, 在next中localsearch.swig、localsearch.styl、另一个localsearch.swig、header.swig代码拷贝然后重新定义图标。

具体操作步骤

定义三个图标，由于Next主题图标使用的是FontAwesome 图标。如localsearch.swig <i class = "fa ...> </i>在landscape 却不支持这样子所以要修改一下，打开~/themes/landscape-plus/source/css/_partial/header.styl文件，加入三个图标。

#icon-close:before {
  font-family: FontAwesome;
  content: "\f146";/*关闭搜索框的图标 移植时用<span id="icon-close"></span>*/
  font-size: x-large
}
#icon-search:before {
  font-family: FontAwesome;
  content: "\f002";/*搜索框的图标 移植时用<span id="icon-search"></span>*/
  font-size: x-large
}
#icon-frown:before {
  font-family: FontAwesome;
  content: "\f119";/*搜索无结果时的图标 移植时用<span id="icon-frown"></span>*/
  font-size: x-large
}

在你的landscape-plus主题~/themes/landscape-plus/layout/_partial/header.ejs打开，header.ejs文件的25行修改替换，就换成了local_search.enable 来控制搜索功能了。打开本地搜索，会启动class="popup-trigger"就打开了本地搜索引擎。

<a id="nav-search-btn" class="nav-icon" title="Search"></a>

"换成"

<% if(!theme.local_search.enable) { %><a id="nav-search-btn" class="nav-icon" title="<%= __('search') %>"></a><% } %>
<% if(theme.local_search.enable) { %><a href="javascript:;" class="popup-trigger nav-icon" id="nav-search-btn"></a><% } %>

还是header.ejs文件的第38行后面加上这句。就是</header>标签前面。其中指向了search.ejs,这个文件就是Next主题的另一个localsearch.swig 重命名。然后将这个重命名的search.ejs文件放到你的landscape-plus主题和header.ejs同级的目录下。

1	<% if(theme.local_search.enable) { %><div class="local-search-inner"><%- partial('search') %></div><% } %>

修改这个search.ejs文件下的适配图标，和默认的提示搜索的placeholder文本。

<div class="popup search-popup local-search-popup">
    <div class="local-search-header clearfix">
      <span class="search-icon">
        <i class="fa fa-search"></i>
      </span>
      <span class="popup-btn-close">
        <i class="fa fa-times-circle"></i>
      </span>
      <div class="local-search-input-wrapper">
        <input autocomplete="off"
               placeholder="{{ __('search.placeholder') }}" spellcheck="false"
               type="text" id="local-search-input">
      </div>
    </div>
    <div id="local-search-result"></div>
  </div>

  "修改成"

  <div class="popup search-popup local-search-popup">
    <div class="local-search-header clearfix">
      <span class="search-icon">
        <span id="icon-search"></span>
      </span>
      <span class="popup-btn-close">
        <span id="icon-close"></span>
      </span>
      <div class="local-search-input-wrapper">
        <input autocomplete="off"
               placeholder="本地搜索..." spellcheck="false"
               type="text" id="local-search-input">
      </div>
    </div>
    <div id="local-search-result"></div>
  </div>

开始放入核心 javascript代码。把localsearch.swig重命名成localsearch.ejs放入~/themes/landscape-plus/layout/_partial目录下，然后在~/themes/landscape-plus/layout/layout.ejs layout.ejs 文件的最后第40行后面，就是</body>之前。

1	<%- partial('_partial/localsearch') %>

然后进入过后要修改几个地方。现在这个核心文件localsearch.ejs目录在~/themes/landscape-plus/layout/_partial, 第1行、第7行、第58行、第254行、第256行、第276行修改成。

{% if theme.local_search.enable %}
"1行处修改成"
<% if (!theme.local_search.enable){ %><% } %>
  
var search_path = "{{ config.search.path }}";
"7行处修改成"
var search_path = "<%= config.search.path %>"; 

$('.popup').detach().appendTo('.header-inner');
"58行处修改成" //这儿.header-inner是搜索框的位置
$('.popup').detach().appendTo('.local-search-inner');
                                   
'<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
"253行修改成"
'<div id="no-result"><span id="icon-search"></span></div>'
                                   
'<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
"256行修改成"
'<div id="no-result"><span id="icon-frown"></span></div>'
                                        
if('auto' === '{{ theme.local_search.trigger }}')
"276行修改成"
if ('auto' === '<%= theme.local_search.trigger %>')

放入渲染文件，可以把 localsearch.styl 放入 /source/css/_partial/
然后在主渲染文件～/themes/landscape-plus/source/css/_partial中，然后找到~/themes/landscape-plus/source/css/style.styl 这件打开加上 @import "_partial/localsearch" 就可以了，就是导入这个文件。

如果搜索引擎的阴影背景.local-search-pop-overlay 总是会出现在最上方，导致搜索框出来之后根本点不到。我直接给它设置 z-index: auto ，跳过了这个问题。

然后就是细节调试一下这个里面的样式，这儿我修改的部分，就参考和修改了三个地方。

.local-search-pop-overlay
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
  z-index: 2080
  background-color: rgba(0, 0, 0, 0.3)
  z-index: auto //解决阴影背景出现在最上方的问题

.local-search-popup
  display: none
  position: fixed
  top: 10%
  left: 50%
  margin-left: -350px
  width: 700px
  height: 80%
  padding: 0
  background: #fff
  color: #333
  z-index: 9999
  border-radius: 5px
  @media mq-mobile /*这儿在next主题中是+mobile() 这个是在手机端展示的时候执行的样式*/
    padding: 0     /*在landscape-plus定义了@media mq-mobile*/
    top: 0
    left: 0
    margin: 0
    width: 100%
    height: 100%
    border-radius: 0
    
.local-search-popup
  display: none
  position: fixed
  top: 10%
  left: 50%
  margin-left: -350px
  width: 700px
  height: 80%
  padding: 0
  background: #fff
  color: #333
  z-index: 9999
  border-radius: 5px
  @media mq-mobile
    padding: 0
    top: 0
    left: 0
    margin: 0
    width: 100%
    height: 100%
    border-radius: 0
    .search-icon, .popup-btn-close
    display: inline-block
    font-size: 18px
    color: #999
    height: 36px
    width: 18px
    padding-left: 10px
    padding-right: 10px
    padding-top: 5px //移动到输入框位置

关闭原先的搜索功能在~/themes/landscape-plus/source/js/script.js第27行到60行屏蔽掉，使用/**/。这儿在~/themes/landscape-plus/layout/_partial/localsearch.ejs第一行加入的<% if (!theme.local_search.enable){ %><% } %>已经可以动态控制开启了。
到这个重新hexo c、 hexo g就可以看到效果了。是不是很有成就感！我这儿使用的免费的图床。

结束心得：

其实开始我也是修改的不是那么顺利，特么是有些网上说的根本不一样，文件有的缺失然后又看不到。只要一个小的细节没有注意到就会出错。导致修改半天不知道哪儿的原因，但是只要你心态好有耐心，很多都是可以慢慢去学，只要你喜欢折腾，不放弃，相信自己就一定可以做到。

向🐑

一只站在树上的鸟，从来不害怕树枝突然折断，因为它相信的不是树枝，而是它自己的翅膀！

Hexo博客landscape-plus移值next主题的站内搜索功能

search的安装和配置

具体操作步骤

结束心得：