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

在 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

猜你喜欢