最近给静态博客添加了搜索功能。

前提:本文实现的方式基于elasticsearch,所以需要你有一台服务器。(或者任意可以响应外网访问的设备)

当然如果有了服务器,实现搜索的方式就太多了。

基于hexo的博客已经有很多主题集成了静态搜索。我的博客基于hugo,官方推荐了几款免费的方案,我选择了hugo-elasticsearch,因为我有服务器,闲着也是闲着,折腾起来。

这个方案就如官网上描述的那样,先通过hugo-elasticsearch生成es的索引,然后导入es,最后再通过es的restful api就行检索就行了。

软件的安装就不描述了,都比较简单。

生成索引文件

第一步先生成es的索引文件:

cd blogpath # 切换到博客的目录下

hugo-elasticsearch --input "content/posts/**" --output "/tmp/elasticsearch.json" -l yaml  --index-name "es"

这个命令生成的是json文件,其中es的索引名为“es”。

导入es

导入es之前先配置ik分词,毕竟博客中文为主,分词还是有必要的,执行下面的命令进行设置:

curl -X PUT "localhost:9200/es?pretty" -H 'Content-Type: application/json' -d'
{
  "mappings": {
    "properties": {
      "title": { "type": "text", "analyzer":"ik_max_word", "search_analyzer":"ik_max_word" },
      "content": { "type": "text", "analyzer":"ik_max_word", "search_analyzer":"ik_max_word" }
    }
  }
}'

导入之前生成的索引文件:

curl -H "Content-Type: application/json" -XPOST "localhost:9200/es/_bulk?pretty&refresh" --data-binary "@/tmp/elasticsearch.json"

如果成功了会看到一系列的输出。

博客集成搜索

就像给静态博客添加图片放大功能一样,搜索也是在页面里引入相关的js就行了。

如果你看到这里相信你已经试过本站的搜索功能,代码在这里,注意依赖了layer

同时查询也按我的想法做了一点配置,如下这段,意思是优先匹配title:

query : { 
    dis_max : { 
        queries : [
            {
                match : {
                    title : { 
                        query : '', 
                        boost : 4,
                    }
                } 
            },
            {
                match : {
                    content : { 
                        query : '', 
                        boost : 2,
                    }
                } 
            },
        ]	
    }
},

最后

实现这个功能很简单,只需要能把索引导入到es,写点简单的js就行了。

至于为什么用这种方案,其实主要是想看看es,作为后端工程师,elasticsearch都快成了面试必考题了,需要熟悉一下。

最后es很复杂,我现在只是查了查文档,实现了功能,要真正做到完美还需要深入学习。

(完)