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>