hexo+next博客添加搜索

1、为什么添加algolia搜索

第一当然是可以方便的查找所需文章,第二点就是之前常用的swiftype插件不再免费。我的个人博客是这个月初搭建完成的,这时候swiftype已经不再免费,而且只开放企业邮箱注册。

2、添加效果

hexo+next博客添加搜索

3、开始添加

下载最新的next主题(5.1.0),因为最新版的已经集成了algolia搜索,可以省去很多配置和修改。

我的版本:

hexo+next博客添加搜索(themes\next\_config.yml文件最下方查看)

algolia官网注册账号(我直接使用的github的账号)

hexo+next博客添加搜索

参照下图新建index

hexo+next博客添加搜索

打开API Keys页面,里面的信息等会需要写到hexo的配置文件中

hexo+next博客添加搜索

在根目录的站点配置文件_config.yml中加入如下配置,参照上图的各种key值

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

在git bash中执行hexo algolia。如下图

hexo+next博客添加搜索

说明已经提交到了algolia。如下图

hexo+next博客添加搜索

如果无法提交成功,先执行hexo clean即可。

在\themes\next下找到_config.yml,找到如下内容,将enable修改为true,labels修改为自己需要的

hexo+next博客添加搜索

在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>

这样就完成了添加。

hexo+next博客添加搜索

有问题可以在下面留言,欢迎大家讨论。

上一篇:windows ip 缓存清理


下一篇:在C#中winform程序中应用nlog日志工具