1、為什么添加algolia搜索
第一當然是可以方便的查找所需文章,第二點就是之前常用的swiftype插件不再免費。我的個人博客是這個月初搭建完成的,這時候swiftype已經不再免費,而且只開放企業郵箱注冊。
2、添加效果
3、開始添加
下載最新的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>
這樣就完成了添加。
有問題可以在下面留言,歡迎大家討論。