音符·代码·脑洞

不想当程序员的歌手不是好指挥。

0%

简单粗暴的Ghost博客搜索实现

使用Ghost博客两三年了,总体来说体验还是不错的,但是,没有搜索功能,这个就好像一匹马只有三条腿一样。

第三方工具GhostHunter等,虽然实现了搜索功能,却是通过前端获取全部博文数据,在前端生成索引,再进行搜索。并且往往不支持中文分词。相比之下,还是通过搜索引擎自定义搜索更为方便。

谷歌和必应都提供了自定义搜索,这种方式存在的问题是,国内的网站访问不了谷歌,而必应获取免费API密钥必须要在网站上绑定Visa或MasterCard信用卡,但我的卡都是银联。所以我是无法通过调用API的方式来进行搜索的。

但是,我们仍然能够实现最最基本的搜索功能。我查找资料时经常会用一个小技巧,就是通过 site:来实现网站内搜索。我就想用类似的方式来实现个人网站的搜索。输入搜索内容后,点击搜索按钮,直接跳转到搜索引擎结果页,不在网站内部专门开发一个页面用来显示搜索结果,处理搜索请求。

所以我的做法是,在博客中新建一个Search页(后台管理系统中新建页面,设置页面url为 /search/),并且在主题中新建一个 page-search.hbs处理搜索关键词和网页跳转。

<script>
    var urlSearchParams = new URLSearchParams(window.location.search);
    var params = Object.fromEntries(urlSearchParams.entries());
    window.location.href="https://cn.bing.com/search?q=site:yourdomain.com+"+params.q
</script>

上面的代码原理很简单,在页面内前端获取url参数,加上 site:yourdomain.com之后跳转到必应(或者其他的搜索引擎)。

这个可能真的是最最简单的实现站内搜索的方式。因为简单,所以也会有很多很多的问题

  1. 没有站内搜索页面,点完搜索按钮会直接跳转至站外。
  2. 由于搜索引擎爬虫不是实时抓取的,有些页面无法搜索出来,刚刚更新的文章可能搜索不到,有修改的话显示的也不是最新的(如果想要更快地被搜索到,可以去必应网站管理工具中提交Url和Sitemap,但还是会有一定延迟)。
  3. 跳转是前端处理的,所以在跳转时会先显示 /search/页面,然后再跳转,屏幕会闪一下。应该也可以通过后台配置重定向来实现跳转,但是这个正则匹配我还没研究出来,太菜了

如果忍不了这些,那还是尝试一下其他的方案……或者耐心等待Ghost推出内置的搜索API……