NexT 内部提供 Algolia 的搜索功能,要使用此功能请确保所使用的 NexT 版本在 v5.1.0
之后。需要注意的是,仅仅将 next/_config.yml
中 algolia_search
的 enable
打开并不能让你使用 Algolia 搜索,你还需要使用对应的 Hexo-Algolia 插件 才能真正在博客页面中使用 Algolia 搜索。按照下面介绍的步骤操作即可完成 Algolia 搜索的安装。
前往 Algolia 注册页面,注册一个新账户。 可以使用 GitHub 或者 Google 账户直接登录,注册后的 14 天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户 总共有 10,000 条记录,每月有 100,000 的可以操作数。注册完成后,创建一个新的 Index,这个 Index 将在后面使用。
在 API Keys
页面找到需要使用的一些配置的值,包括 Application ID
和 Search-Only API Key
。注意,Admin API Key
需要保密保存,不要外泄。
编辑 站点配置文件
,新增以下配置,除了 chunkSize
字段,替换成在 Algolia 获取到的值:
yml
algolia:
applicationID: 'Application ID'
apiKey: 'Search-Only API Key'
indexName: 'indexName'
chunkSize: 5000
在 API Keys
页面,点击 All API Keys
切换到对应的页面中。接着点击 New API Key
按钮,来编辑权限。在弹出框中找到 ACL ,输入 addObject、 deleteObject、listIndexes、deleteIndex 权限,然后点击最下方的 Create
按钮。将这个新创建的 API Key 复制到剪贴板,我们称之为 High-privilege API key
。
在 Index 和 API Key 创建完成后,此时这个 Index 里未包含任何数据。接下来需要安装 Hexo Algolia 扩展,这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装:
$ cd hexo
$ npm install hexo-algolia
当配置完成,在站点根目录下执行以下命令来更新上传 Index。请注意观察命令的输出。
``` $ export HEXO_ALGOLIA_INDEXING_KEY=High-privilege API key # 使用 Git Bash
$ hexo clean $ hexo algolia ```
更改主题配置文件
,找到 Algolia Search 配置部分,将 enable
改为 true
。同时你需要关闭其他搜索插件,如 Local Search 等。你也可以根据需要调整 labels
中的文本:
```yml
algolia_search: enable: true hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" ```
如果你需要通过 CDN 使用其它版本的 algolia-instant-search ,请根据以下步骤操作。
你需要在主题配置文件
中的 vendors 字段进行设置:
yml
vendors:
...
# Algolia Search
# algolia_search: //cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js
# instant_search: //cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js
algolia_search: //cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js
instant_search: //cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js
...
Record Too Big
的问题同样存在。source/js/algolia-search.js
中所有的 applicationID
为 appId
layout/_partials/head/head.swig
中所有的 applicationID
为 appId
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.