hexo[Matery] 升级为Algolia搜索

〇、前言

Matery 主题本来自带的搜索功能实现逻辑是将文章所有内容全部统计存储为 xml 文件，然后通过算法匹配搜索关键字来实现的。

这种实现方式有个致命弱点，就是当文章数量过多、字数膨胀时，xml 文件的体积会越来越大。这在网络资源传输过程中是个非常头疼的问题，会严重影响网页的加载速度。所以，为了避免这类问题的出现，我决定使用 Algolia 替换原来的搜索功能逻辑。

一、Algolia 准备

首先，你需要在 Algolia 需要注册一个账号。然后，创建一个 Application，并在该 Application 下创建一个 Index。大概就类似于下图：

注意：在创建 Application 的时候会让你选择数据服务器存放的位置，其中类似于“香港”之类的地方是需要一些其他步骤的（这里不赘述，大家可以自行研究）。（这里我选择的是“欧洲东部”的服务器，具体可见上图。）

二、插件及配置准备

2.1 安装插件

在前面的内容都准备完毕后，你需要安装插件：

1	`npm install --save hexo-algolia`

2.2 配置插件

接着，你需要在网站根目录下的 _config.yml 文件中添加以下信息（更多内容请看 hexo-algolia 文档）：

# Algolia 搜索
algolia:
  applicationID: YOUR_APPLICATION_ID
  apiKey: YOUR_SEARCH_ONLY_API_KEY
  indexName: NAME_OF_ALGOLIA_INDEX

最后，你需要在系统中添加一个名为 HEXO_ALGOLIA_INDEXING_KEY 的环境变量，其值为你的 Write API Key。

2.3 代码配置

打开 head.ejs 文件，在合适的位置插入以下代码：

1
2
3

<!-- Algolia 搜索 -->
<%- algolia_search() %>
<%- algolia_search_config() %>

然后，你需要打开 search.ejs 文件，将原来的 <script/> 代码全部替换成以下代码：

<script type="text/javascript">
    // 初始化Algolia搜索客户端
    const searchClient = algoliasearch('<%- config.algolia.applicationID _%>', '<%- config.algolia.apiKey %>');
    const index = searchClient.initIndex('<%- config.algolia.indexName %>');

    // 搜索函数
    const searchFunc = function(search_id, content_id) {
        const $input = document.getElementById(search_id);
        const $resultContent = document.getElementById(content_id);
        $input.addEventListener('input', function() {
            const query = this.value.trim();
            $resultContent.innerHTML = "";

            if (query.length > 0) {
                index.search(query).then(({ hits }) => {
                    let str = '<ul class="search-result-list">';
                    hits.forEach(hit => {
                        str += `<li>
                            <a href="${hit.permalink}" class="search-result-title">${hit.title}</a>
                        </li>`;
                    });
                    str += '</ul>';
                    $resultContent.innerHTML = str;
                }).catch(err => {
                    console.error(err);
                });
            }
        });
    };

    // 调用搜索函数
    searchFunc('searchInput', 'searchResult');

    // 初始化modal
    $(document).ready(function(){
        $('.modal-trigger').leanModal();
    });
</script>