PaperMod 已集成 Fuse.js 实现搜索功能。

PaperMod 官方文档: Search Page

搜索页面

  1. 新建 search.md 文件，内容参考如下：
1
2
3
4
5
6
7

---
title: "🔍 搜索"
layout: "search"
url: "/search/"
hideTags: true
placeholder: "请输入关键词..."
---
  1. 在 config/_default/menus.yaml 添加下面内容：
1
2
3
4
5
6
7

---
main:
  - identifier: search
    name: 🔍 搜索
    url: /search
    weight: 4
---
  1. 在 config\_default\params.yaml 添加下面内容：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 添加搜索参数，参考 https://fusejs.io/api/options.html
fuseOpts: # 搜索配置
    isCaseSensitive: false # 是否大小写敏感
    includeMatches: true # 是否包含匹配项
    shouldSort: true # 是否排序
    location: 0
    distance: 1000
    threshold: 0.0 # 完全匹配。PaperMod 默认为 0.4
    minMatchCharLength: 0
    # limit: 10
    keys: ["title", "permalink", "summary", "content"]
参考教程
hugo-papermodx-add-search

添加标签云

  1. 修改逻辑控制 layouts/_default/terms.html，把之前的 terms-tags 标签控制代码注释掉，替换：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with $.Site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        {{ $largestFontSize := 1.5 }}
        {{ $smallestFontSize := 1 }}
        {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
        {{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
        {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
        {{ $spread := sub $max $min }}
        {{ $fontStep := div $fontSpread $spread }}
        {{ $weigth := div (sub (math.Log $count) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
        {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weigth)) }}
        <a href="{{ .Permalink }}" style="font-size: {{ $currentFontSize }}rem; font-weight: {{ mul $currentFontSize 200 }};">
            {{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup>
        </a>
    </li>
    {{- end }}
    {{- end }}
</ul>
  1. 修改样式 assets/css/common/terms.css，替换：
 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

.terms-tags {
    text-align: center;
}

.terms-tags li {
    display: inline-block;
    margin: 5px;
    font-weight: 500;
}

.terms-tags li:hover {
    transform: scale(1.1);
}

.terms-tags a {
    background: none;
    border-radius: 30px;
    transition: transform 0.5s;
}

.terms-tags a:hover {
    background: none;
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.3);
}

.dark .terms-tags a {
    background: none;
}

.dark .terms-tags a:hover {
    background: none;
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.3);
}

.terms-tags a:active {
    background: var(--tertiary);
    transform: scale(0.96);
}
参考教程
tag-cloud

配置标签云到搜索页

  1. 修改 search.md 文件，内容参考如下：
1
2
3
4
5
6
7
8

---
title: "🔍 搜索"
layout: "search"
url: "/search/"
hideTags: false
tagsTitle: 🎯 标签
placeholder: "请输入关键词..."
---
  1. 修改 layouts/_default/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

{{- if not (.Param "hideTags") }}
{{- $taxonomies := .Site.Taxonomies.tags }}
{{- if gt (len $taxonomies) 0 }}
<h2 style="margin-top: 32px">{{- (.Param "tagsTitle") | default "tags" }}</h2>
<ul class="terms-tags">
    {{- range $name, $value := $taxonomies }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/tags/%s" $name) }}
    <li>
        {{ $largestFontSize := 1.5 }}
        {{ $smallestFontSize := 1 }}
        {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
        {{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
        {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
        {{ $spread := sub $max $min }}
        {{ $fontStep := div $fontSpread $spread }}
        {{ $weigth := div (sub (math.Log $count) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
        {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weigth)) }}
        <a href="{{ .Permalink }}" style="font-size: {{ $currentFontSize }}rem; font-weight: {{ mul $currentFontSize 200 }};">
            {{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup>
        </a>
    </li>
    {{- end }}
    {{- end }}
</ul>
{{- end }}
{{- end }}

{{- end }}{{/* end main */}} <!-- 在最后一行前加入上面的代码 -->