hugo博客html创建目录,Hugo博客添加搜索功能

碎碎念

由于hugo没有插件接口或者有我这小白还不知道。目前官方大部分的主题都没有搜索功能，而一些拥有搜索功能的主题大部分是使用第三方搜索，比如google站内搜索，Algolia搜索等等，google搜索服务在国内不适用，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中插入：

效果如下：

完。

举报/反馈