Hugo静态博客搜索功能开发-下集
文章目录
上集:介绍使用的技术和程序设计内容 https://www.7benshu.com/post/2020/08/05-1/
中集:具体的部署过程和踩过的坑 https://www.7benshu.com/post/2020/08/06-1/
下集:开源此内容的所有代码以及发布
项目目录
两个模块可以单独打开,也可以根目录同时打开,开发工具推荐GoLand
-
searchIndex
- 主要用于博客内容的索引创建
- 程序使用Golang语言开发
- 索引使用的是sonic的搜索引擎
- 交互使用的是go-sonic组件
-
search
- 主要用于博客内容的搜索
- 交互使用的是go-sonic组件
- 基于Go语言开发的Gin Web框架来对外开放搜索API
项目案例
這里介于演示内容博客的搜索功能添加过程,作为参考
此博客使用的是hugo静态工具生成的博客,主题是使用的 https://github.com/olOwOlo/hugo-theme-even
-
首先在content/post 文件下创建一个search.html的页面
-
在config.toml配置文件中,配置菜单项,增加一项,配置如下:
1 2 3 4 5
[[menu.main]] name = "搜索" weight = 8 identifier = "search" url = "/search/"
-
配置一些静态资源,方便search.html页面的功能开发
1 2 3 4 5 6
# Link custom CSS and JS assets # (relative to /static/css and /static/js respectively) customCSS = ["index.css"] customJS = ["vue.js","index.js","axios.min.js"]
这里的customCSS 就是你需要的自定义样式文件
這里的customJS就是你需要的自定义的脚本文件
演示的博客使用的是ElementUI和Vue组合来使用。所以引入一些必要的地址,大家也可以直接使用官方开发的地址,那么這里就不用配置了
-
增加静态的样式文件和脚本文件
在themes/even/static文件下增加css和js文件夹,并且把对应的文件放进去,這里提供的是此次演示的一些地址:
样式地址:https://unpkg.com/element-ui/lib/theme-chalk/index.css
脚本地址:https://unpkg.com/vue/dist/vue.js
脚本地址:https://unpkg.com/element-ui/lib/index.js
如果需要的话可以下载保存起来,然后放到刚才新建的目录下使用。
-
开始写search.html的页面代码,作为参考:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
--- title: "搜索" date: 2019-10-09T16:17:39+08:00 draft: false --- <link rel="stylesheet" href="/css/index.css"> <style> .el-autocomplete .el-input { width: 100%; } .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } [v-cloak] { display: none; } #app a, a:link, a:visited, a:hover, a:active { text-decoration: none !important; color: black !important; border: none; } </style> <div id="app" v-cloak> <el-card class="box-card"> <div slot="header" class="clearfix"> <el-input placeholder="请输入关键字" @keyup.enter.native="search" v-model="searchKey" class="input-with-select"> <el-button v-on:click="search" slot="append" icon="el-icon-search"></el-button> </el-input> </div> <div v-if=" status !== '1' " class="text item"> {{ message }} </div> <div v-else v-for="item in list" :key="item.Name" class="text item"> <el-link v-bind:href="item.Path" target="_blank"> {{ item.Name }}</el-link> </div> </el-card> </div> <!-- import Vue before Element --> <script src="/js/vue.js"></script> <!-- import JavaScript --> <script src="/js/index.js"></script> <script src="/js/axios.min.js"></script> <script type="module"> new Vue({ el: '#app', data() { return { searchKey: '', list: [], message: '', status: '0' }; }, methods: { search: function () { let that = this // Make a request for a user with a given ID axios.get('https://sh.7benshu.com/search?key=' + this.searchKey) .then(function (response) { // handle success that.status = response.data.status if (response.data.status == "1") { that.list = response.data.message if (response.data.message == null) { that.message = '博主太懒了,没有记录此类文章,请重新输入关键字!' that.status = '0' } } else { that.message = response.data.message } }) .catch(function (error) { that.message = '系统开小差了!' that.status = '0' }) .then(function () { // always executed }); } } }) </script>
以上代码在Even主题下是测试通过的。如果是其他的主题,大家需要自己测试了
总结
具体的代码和内容请传送门 https://github.com/tangfei-china/hugo-search-fast
文章作者 拉斐
永久链接 https://www.7benshu.com/post/2020/08/06-2/
版权声明
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
上次更新 2020-08-06
7本书-公众号