hexo-next-algolia-search全文搜索

注:本文已发布超过一年,请注意您所使用工具的相关版本是否适用

在 hexo 中通过 algolia 实现全文搜索

问题

The latest version of the Hexo-Algolia plugin removes the content indexing feature, given Algolia’s free account limitation.

通过主题官方的文档我们发现,全文索引的功能已经被移除了,原因是因为会出现Record Too Big的报错,查阅 algolia 的文档我们可以发现免费账号,单条索引的上限为10kB, 商业版用户的索引上限为20KB

解决

请先按照上文提到的主题配置说明配置之后进行如下操作

  1. 替换插件

    package.json中替换下面这一行

    1
    "hexo-algolia": "https://github.com/mohuishou/hexo-algolia"
  2. 修改主题文件themes\next\source\js\algolia-search.js

    instantsearch.widgets.hits方法中, item 对应的返回值替换为以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    return (
    '<a href="' +
    link +
    '" class="algolia-hit-item-link">' +
    '<div class="algolia-hit-item-title">' +
    data._highlightResult.title.value +
    "</div>" +
    '<div class="algolia-hit-item-content">' +
    data._snippetResult.raw.value +
    "</div>" +
    "</a>"
    );

    这两步做完其实就已经完成的了全文索引,但是搜索结果会把所有内容返回,我们其实只需要匹配关键词附近的结果

  3. 开启 Attributes to snippet 特性

    如下图所示点击索引->配置, 然后再到左侧列表中选中Snippeting

    然后如图所示添加字段raw, 右侧为显示的字符数,可以根据需求修改

    到这里就大功告成了,但是关键词还不够突出,可以再做一些美化

  4. 美化搜索结果

    source/_data中新增styles.styl文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    em {
    color: red;
    font-style: normal;
    }

    .algolia-hit-item-title {
    font-weight: bold;
    }

    .algolia-hit-item-content {
    font-size: 0.8em;
    color: #555;
    }

    修改_config.yml

    1
    2
    3
    theme_config:
    custom_file_path:
    styles: source/_data/styles.styl

    ok! 大功告成

效果

  1. 优化前:

    随意找了一个博客的截图,显示只有标题,没有的高亮以及详情

  2. 优化后:

原理

原理其实很简单,获取文章原始markdown内容,判断大小如果超过指定大小(默认 8K)就进行截断

1
2
3
4
5
6
7
8
9
10
11
// 获取原始内容
var rawBuf = new Buffer(data.raw);
// 获取大小限制
var rowSize = options.maxRawSize * 1024;
if (rawBuf.length > rowSize) {
// 超出限制,进行截断
storedPost.raw = rawBuf.toString("utf8", 0, rowSize);
// 去除最后一个字符
// 由于截断是按照字节截断的,但是一个中文字符不止一个字节,可能会导致最后一个字符乱码
storedPost.raw = storedPost.raw.substring(0, storedPost.raw.length - 1);
}

详情可以查看 PR: Feature/add raw max len

关注我获取更新

wechat
知乎
github

猜你喜欢


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议,转载请注明出处,禁止全文转载