hexo+next博客添加搜索

一、爲何添加algolia搜索

第一固然是能夠方便的查找所需文章，第二點就是以前經常使用的swiftype插件再也不免費。個人我的博客是這個月初搭建完成的，這時候swiftype已經再也不免費，並且只開放企業郵箱註冊。

二、添加效果

三、開始添加

下載最新的next主題（5.1.0），由於最新版的已經集成了algolia搜索，能夠省去不少配置和修改。

個人版本：

（themes\next\_config.yml文件最下方查看）

 去algolia官網註冊帳號（我直接使用的github的帳號）

參照下圖新建index

打開API Keys頁面，裏面的信息等會須要寫到hexo的配置文件中

 

在根目錄的站點配置文件_config.yml中加入以下配置，參照上圖的各類key值

#添加搜索
algolia:
appId: 'appid'
apiKey: 'apikey'
adminApiKey: 'adminApiKey'
indexName: '本身新建的index名稱'
chunkSize: 5000
fields:
- title
- slug
- path
- content:strip

 在git bash中執行hexo algolia。以下圖

說明已經提交到了algolia。以下圖

若是沒法提交成功，先執行hexo clean便可。

在\themes\next下找到_config.yml，找到以下內容，將enable修改成true，labels修改成本身須要的

在themes\next\layout\_partials中找到header.swig，找到如下代碼並修改

<nav class="site-nav">
<!-- 添加 theme.algolia_search.enable -->
  {% set hasSearch = theme.swiftype_key || theme.algolia_search.enable || theme.tinysou_Key || config.search %}

  {% if theme.menu %}
    <ul id="menu" class="menu">
      {% for name, path in theme.menu %}
        {% set itemName = name.toLowerCase() %}
        <li class="menu-item menu-item-{{ itemName }}">
          <a href="{{ url_for(path) }}" rel="section">
            {% if theme.menu_icons.enable %}
              <i class="menu-item-icon fa fa-fw fa-{{theme.menu_icons[itemName] | default('question-circle') | lower }}"></i> <br />
            {% endif %}
            {{ __('menu.' + itemName) }}
          </a>
        </li>
      {% endfor %}

      {% if hasSearch %}
        <li class="menu-item menu-item-search">
          {% if theme.swiftype_key %}
            <a href="javascript:;" class="st-search-show-outputs">
          {% elseif config.search %}
            <a href="javascript:;" class="popup-trigger">
　　　　　　<!--增長的代碼 start-->

          {% elseif theme.algolia %}
            <a href="javascript:;" class="popup-trigger">
　　　　　　<!-- 增長的代碼 end-->


          {% endif %}
            {% if theme.menu_icons.enable %}
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            {% endif %}
            {{ __('menu.search') }}
          </a>
        </li>
      {% endif %}
    </ul>
  {% endif %}

  {% if hasSearch %}
    <div class="site-search">
      {% include 'search.swig' %}
    </div>
  {% endif %}
</nav>

這樣就完成了添加。

 

有問題能夠在下面留言，歡迎你們討論。