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中插入:
效果如下:
完。
举报/反馈
hugo博客html创建目录,Hugo博客添加搜索功能相关推荐
- HEXO博客系统添加搜索功能
Hexo 可以通过接入第三方搜索引擎来为博客添加搜索功能.这里给出一种基于 Algolia 搜索引擎的实现方式. 流程 Algolia 是一家搜索解决方案提供商,提供强大的搜索服务和 API 接口.在 ...
- TIA博途WINCC中给IO域添加确认功能的具体方法步骤
TIA博途WINCC中给IO域添加确认功能的具体方法步骤 在TIA博途中新建一个项目,添加一个PLC和HMI设备,这里就不再演示添加过程,在PLC默认变量表中添加一个"输出变量", ...
- Hexo博客添加搜索功能
当文件慢慢变多的时候,分类和标签已经不能快速找到所需要的文章,我们需要添加本站的搜索功能. 安装插件 在博客根目录执行命令 npm install hexo-generator-searchdb -- ...
- 《Hexo: 从零开始编写自己的主题》5. 添加本地搜索功能以及发布博客让官网接收
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
- hugo博客html创建目录,使用Hugo来生成静态博客
关于Hugo Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成 ...
- Hugo项目实战-集成评论博客添加评论功能
实践效果 Quick Start Install Hugo brew install hugo # or port install hugohugo version Create a New Site ...
- 8-【Git入门】个人博客搭建 用hugo搭建博客连github上
由于自己搭建博客 第一次踩了很多坑 下面整理所有相关坑和步骤,如果出现问题多搜搜,有足够耐心就行 自己搭建博客不如用现有平台 因为知乎 简书 掘金等平台都很好兼容makedown语法 自己搭建编辑文章 ...
- 我人生的第一个博客,真正的博客。
今天,我登入了博客园.发现我的博客建立申请通过了.很是开心. 这是我第一个博客. 建立这个博客的目的有三个: 1.能够帮我记录下我的所学: 2.让我可以更好地学到一些知识: 3.令我可以结交到一些志同 ...
- 为什么写博客?如何在博客中更好的分享?
为什么要写技术博客呢?主要是受一本书的启发,这本书叫<软技能--代码之外的生存指南>,乐于分享就是其中的一项软技能.写技术博客是对自己已有知识和经验的总结和归纳,便于日后温故而知新,也把自 ...
- 博客搬迁至网易博客 http://happyboy200032.blog.163.com
博客搬迁至网易博客 http://happyboy200032.blog.163.com 转载于:https://www.cnblogs.com/berryz2007/archive/2011/12/ ...
最新文章
- Linux下遍历指定目录的C++实现
- AS莫名报错 Error:Could not download junit.jar (junit:junit:4.12): No cached version available
- 操作系统课设——吃水果问题
- 2013 JavaB2 马虎的算式
- C++基础知识(一)—— C++程序结构
- Python数据结构与算法(六)--栈和队列
- [高精度整数] a+b [2010年华中科技大学计算机研究生机试真题]
- android获取当前显示的view,Android中ViewPager获取当前显示的Fragment
- 各种泵的图形符号_常见液压系统中液压元件图形符号
- 装机之必备软件下载合集
- Flex 学习笔记之一:Flex 简介
- outlook ios日历_如何从Outlook 2013中的日历中删除假期
- iOS逆向开发(2):获取APP的类声明 | class-dump | dumpdecrypted
- 六月开发语言排行榜出炉
- java ftp传图片_Java 图片上传方式一 : ftp 图片服务器
- VIJOS P1153 猫狗大战
- Java技术原理详解
- HTML爱心照片墙源码
- 高级IDE工具:Elipse的使用
- 写好的pygame游戏打包成exe文件