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>

这样就完成了添加。

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

hexo+next博客添加搜索的更多相关文章

  1. 给jekyll博客添加搜索功能

    使用SWIFTYPE为jekyll博客添加搜索引擎 步骤 1.首先去swiftype注册一个账号 2.接着添加自己想要配置的网站地址并为新设定的引擎添加一个名字(非会员只能设置一个引擎). 3.收到验 ...

  2. 给 hugo 博客添加搜索功能

    起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...

  3. Hexo+yilia博客添加背景音乐

    个人主页:https://www.yuehan.online 现在博客:www.wangyurui.top 第一步: 打开网易云音乐的官网:https://music.163.com/ 第二步: 搜索 ...

  4. hexo个人博客添加宠物/鼠标点击效果/博客管理

    1.添加宠物 博客宠物模型:https://github.com/xiazeyu/live2d-widget-models 模型对应的动画效果:https://huaji8.top/post/live ...

  5. HEXO | 给博客添加RSS

    Hexo是一个简洁.高效.易用的博客框架,同时它拥有十分丰富的主题环境,本次我们所谈到的是cards主题,但是该主题的原生环境里没有相关的rss配置,所以我们需要采用手动添加的方式,进而实现rss功能 ...

  6. Hexo next博客添加折叠块功能添加折叠代码块

    前言 有大段的东西想要放上去,但又不想占据大量的位置.折叠是最好的选择.下面在Hexo的主题上定制添加折叠功能. 本文基于Hexo Next的主题修改.其他主题应该也差不多. 在main.js中添加折 ...

  7. 如何利用腾讯云COS为静态博客添加动态相册

    前言 本文首发于个人网站Jianger's Blog,欢迎访问订阅.个人博客小站刚建站不久,想着除了主题里的功能外再添加上相册模块,于是半搜索半摸索把相册模块搞出来了,最后采用了利用腾讯云对象存储作图 ...

  8. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  9. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

随机推荐

  1. WPF自定义控件第二 - 转盘按钮控件

    继之前那个控件,又做了一个原理差不多的控件.这个控件主要模仿百度贴吧WP版帖子浏览界面左下角那个弹出的按钮盘.希望对大家有帮助. 这个控件和之前的也差不多,为了不让大家白看,文章最后发干货. 由于这个 ...

  2. Redis集群搭建与简单使用

    介绍安装环境与版本 用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-3.2.4 版本. 两台虚拟机都是 CentOS ,一台 ...

  3. 解决“Dynamic Web Module 3.0 requires Java 1.6 or newer.”错误

    一.问题描述 1.错误截图如下. 2.设计的问题 在Eclipse中新建了一个Maven工程, 然后更改JDK版本为1.6, 结果每次使用Maven > Update project的时候JDK ...

  4. MySQL笔记---视图,存储过程, 触发器的使用入门

    大二学数据库的时候,只是隐约听到老师提起过视图啊,存储过程啊,触发器啊什么的,但只是淡淡的记住了名字,后来自己做些小项目,小程序,也没有用上过,都只是简单的建表,关联表之类的,导致我对这些东西的理解只 ...

  5. Unity3D中使用委托和事件

    前言: 本来早就想写写和代码设计相关的东西了,以前做2DX的时候就有过写写观察者设计模式的想法,但是实践不多.现在转到U3D的怀抱中,倒是接触了不少委托事件的写法,那干脆就在此总结一下吧. 1.C#中 ...

  6. 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍

    一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...

  7. express路由探析(续)

    上一篇分析了express的路由机制,这次主要补充一些没有说到的东西. 之前说到,Router是中间件容器,Route是路由中间件,他们各自维护一个stack数组,里面存放layer,layer是封装 ...

  8. parseInt实例详解

    parseInt() 函数可解析一个字符串,并返回一个整数. parseInt(string, radix) 参数 描述 string 必需.要被解析的字符串. radix 可选.表示要解析的数字的基 ...

  9. 数据库进阶之路(五) - MySQL行锁深入研究

    由于业务逻辑的需要,必须对数据表的一行或多行加入行锁,举个最简单的例子,图书借阅系统:假设id=1的这本书库存为1,但是有2个人同时来借这本书,此处的逻辑为: ; --如果restnum大于0,执行u ...

  10. Git同步原始仓库到Fork仓库中

    前言 本文介绍的是Git同步原始仓库到Fork仓库示例教程,废话不多说,下面直接到实操部分. 这里以aspnetcore-doc-cn的github仓库为例,同步dev分支. 步骤 1.初始化本地仓库 ...