上集:介绍使用的技术和程序设计内容 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