碎碎念

hugo没有插件接口,或者因为有我的sdmt,所以还不知道。 目前,官方大多数主题都没有搜索功能。 具有搜索功能的主题大部分使用第三方搜索,如谷歌网站内搜索、Algolia搜索等。 谷歌搜索服务在国内不适用。 Algolia的配置很麻烦,每次更新文章都需要上传。 虽然很强大,但是像个人博客这样的小网站的结尾,需要用一些牛刀。 而且最重要的是三方免费服务的不稳定性,还是想采用本地搜索功能。 幸运的是,hugo官方也为官方文档提供了一些解决方案,考虑到用户的搜索需求(谷歌翻译)。

Hugo Workflow的GitHub要点。 此点包含一个用于为静态站点创建搜索索引的简单工作流。 使用简单的Grunt脚本对所有内容文件和lunr.js进行索引并提供搜索结果。 hugo-elasticsearch。 解决前端问题并为Hugo静态站点生成Elasticsearch索引。 Hugo-Elasticsearch生成以换行符分隔的JSON(ndjson )文件。 可以使用任何可用的客户端将此文件批量上传到Elasticsearch。 hugo-lunr。 使用lunr.js将站点搜索添加到静态Hugo站点的简单方法。 Hugo-lunr会在Hugo项目中为任何html和markdown文档创建索引文件。 hugo-lunr-zh。 与Hugo-lunr相似,但Hugo-lunr-zh有助于区分中文关键词。 Github Gist for Fuse.js集成。 本要点说明如何利用Hugo现有的构建时间处理来生成客户端Fuse.js使用的可搜索JSON索引。 此点使用Fuse.js进行模糊匹配,但所有可以读取JSON索引的客户端搜索工具都可以正常工作。 除了Hugo以外,不需要npm、grunt或其他构建时工具! hugo-search-index。 预生成的浏览器脚本,实现包含Gulp任务的库和搜索。 Gulp根据项目降价文件生成搜索索引。 第一个选择的是hugo-lunr-zh。 因为hugo-lunr不支持中文口语。 然后,在使用过程中发现他生成的所有json文件都是断开的,并且在搜索和显示时看起来不好看。 更换hugo-lunr后,发现搜索api功能很少,也没有样式。 于是,我想到了迄今为止使用的InsightSearch插件。 所有json格式都相同,因此可以仅通过lunr.js生成json,并在InsightSearch中进行搜索。

踩坑的过程在这里忽略,直接说结果的变更。 希望能为大家提供参考。

使用lunr生成用于搜索的json文件

首先是生成json。 我建议你直接用npm先下载我做的插件hugo-lunr-diaspora。 要根据hugo博客运行命令,请执行以下步骤:

npm i hugo-lunr-diaspora

安装后,可以在根目录下的node_modules文件夹下找到hugo-lunr-diaspora目录。 在

在lib/index.js中可以看到以下代码:

核心代码是上面的部分。 我必须赶紧理解。 如果其他主题将output更改为相应的位置。 下载插件后,必须在博客根目录下创建新的package.json,以添加以下内容:

cmd可以在博客根目录下运行npm run index以生成lunr.json文件。 注意更新文章后,需要更新lunr.json文件。

使用InsightSearch插件

生成json文件后,可以使用InsightSearch行进行搜索。 由于需要将搜索节添加到主题代码中,因此此过程需要了解主题或html。 以Diaspora的主题为例。

在layouts/partials文件下创建新的search.html。 内容如下。

同时在head.html中加入css; 在footer.html中加入js:

页面完成了。 我需要看看插入哪个页面比较合适。 在此,我们决定插入header.html :

效果如下。

结束了。

通报/反馈