目录

Hugo 静态网站增加搜索功能

hugo网站文章网检索原理

其实就是在编译打包时生成一个index.json文件,里面包含了你写的所有文章:标题、内容等。 然后在页面中请求该json文件,在输入时进行文章匹配。

在hugo配置文件里设置输出字段

在hugo.yaml中或其他的配置文件里增加outputs配置

outputs:
  home:
    - "HTML"
    - "RSS"
    - "JSON"
  page:
    - "HTML"
    - "RSS"

重新运行本地服务器,尝试打开http://localhost:1313/index.json,如果能看到json数据则证明配置成功。

完善检索功能

有了数据,有能力的人(对于前端工程师轻而易举)可以自己实现增加界面元素<input type="text"/>,然后监听输入事件,之后进行数据匹配,将匹配到的数绘制到界面中,让用户得以选择阅读就行了。

当然,也可以选择一些现成的插件:Search tools里提供了好多现成可用的插件方案。