PaperMod：配置搜索页
PaperMod 已集成 Fuse.js 实现搜索功能。 PaperMod 官方文档: Search Page 搜索页面 新建 search.md 文件，内容参考如下： 1 2 3 4 5 6 7 --- title: "🔍 搜索" layout: "search" url: "/search/" hideTags: true placeholder: "请输入关键词..." --- 在 config/_default/menus.yaml 添加下面内容： 1 2 3 4 5 6 7 --- main: - identifier: search name: 🔍 搜索 url: /search weight: 4 --- 在 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 添加标签云 修改逻辑控制 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> 修改样式 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 配置标签云到搜索页 修改 search.md 文件，内容参考如下： 1 2 3 4 5 6 7 8 --- title: "🔍 搜索" layout: "search" url: "/search/" hideTags: false tagsTitle: 🎯 标签 placeholder: "请输入关键词..." --- 修改 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 */}} <!-- 在最后一行前加入上面的代码 -->