目录

Hugo系列(5) - 添加搜索功能

背景

由于本人使用的是LoveIt主题,该主题自带的搜索插件是lunralgolia,这两个的使用都比较麻烦,后者甚至还想要去注册账号,虽然可以免费使用搜索服务,但是抓取收录时间好像是一小时一次,并且还有每月使用量的限制,太不便利了。

之前在Hexo那边用的是自带的搜索插件,是每次部署时自动为所有文章生成索引到一个文件里,然后直接搜索该文件来实现本地搜索功能。这个还是比较方便个人站点使用的,于是在网上找到了类似的一个Hugo专用的搜索插件hugo-search-fuse-js

安装搜索插件hugo-search-fuse-js到本地

hugo-search-fuse-js并不是一个单独的主题,而是Hugo主题的一个组件:

  1. 下载hugo-search-fuse-js到站点的主题目录/themes/hugo-search-fuse-js下,注意,目录名必须是hugo-search-fuse-js
  2. 把该主题组件名字添加到站点配置文件里,注意,搜索组件名字要在最前面,后面跟着的是你的主题的文件夹名字
1
theme = ["hugo-search-fuse-js", "my-theme"]
  1. 新建一个content/search.md文件,内容如下:
1
2
3
4
5
6
7
+++
title = "Search"
layout = "search"
outputs = ["html", "json"]
[sitemap]
  priority = 0.1
+++

修改页面模板文件baseof.html

  1. 把主题目录下的\themes\even\layouts\_default\baseof.html拷贝到站点根目录下的\layouts\_default\baseof.html
  2. 在拷贝后的baseof.html的适当位置插入两段代码:{{ block "main" . }}{{ end }}{{ block "footer" . }}{{ end }},下面是一个修改后的样例:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="wrapper">
    {{- partial "header.html" . -}}
    <main class="main">
        <div class="container">
			{{ block "main" . }}{{ end }}
            {{- block "content" . }}{{ end -}}
        </div>
    </main>
    {{- partial "footer.html" . -}}
	{{ block "footer" . }}{{ end }}
</div>

添加搜索按钮

在站点配置文件里添加一个新的按钮给搜索功能使用,如下:

1
2
3
4
5
6
7
[menu]
  [[menu.main]]
    pre = "<i class='fas fa-fw fa-search'></i>"
    name = "搜索"
    weight = 7
    identifier = "search"
    url = "/search/"

如果你的配置文件里的菜单属性是多语言的,样例如下:

1
2
3
4
5
6
7
8
9
[languages]
  [languages.en]
    [languages.en.menu]
      [[languages.en.menu.main]]
	    pre = "<i class='fas fa-fw fa-search'></i>"
	    name = "Search"
	    weight = 7
	    identifier = "search"
	    url = "/search/"

关闭LoveIt主题默认的搜索插件

在站点配置文件里把默认的搜索插件关闭,如下:

1
2
3
4
[params]
  [params.app]
    [params.search]
      enable = false

如果你使用的是多语言的配置,则应该把每个语言的搜索插件都关闭,如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
[languages]
  [languages.en]
    [languages.en.params]
      [languages.en.params.search]
        enable = false

  [languages.zh-cn]
    [languages.zh-cn.params]
      [languages.zh-cn.params.search]
        enable = false

修改搜索页面的样式

如果对该插件生成的搜索页面样式不满意,可以自行修改,下面是我的样式代码:

 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
/* 搜索页面 */
.search {
    position: relative;
    padding-top: 3.5rem;
    padding-bottom: 1rem;
    max-width: 800px;
    width: 60%;
    margin: 0 auto;
    background: white;
    opacity: .95;
}

[theme=dark] .search header,
.search header {
    background-color: #f8f8f8;
}

[theme=dark] .search header:hover,
.search header:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.search header h1 {
    padding-left: 1rem;
    background: white;
    opacity: .95;
}

[theme=dark] .search input,
.search input {
	height: initial;
    width: initial;
    color: initial;
	background-color: white;
	margin: 0 0 0 1rem;
	border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.search #search-results {
    padding-left: 1rem;
    padding-right: 1rem;
}

[theme=dark] a:active, [theme=dark] a:hover {
    color: #2d96bd;
}

.search hr {
    margin-left: 1rem;
    margin-right: 1rem;
}

参考链接