【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog
【Ubuntu】【Hugo】搭建私人博客：_default&partials
分析了 Hugo 的 layouts/ 中，_default 模板和 partials 模板的区别，下面继续看搜索功能
搭建私人博客
首先来看 PaperMod 主题中的 layouts/_default/search.html 模板，其内容如下
go
{{- define "main" }}
<header class="page-header">
<h1>{{- (printf "%s " .Title ) | htmlUnescape -}}
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</h1>
{{- if .Description }}
<div class="post-description">
{{ .Description }}
</div>
{{- end }}
{{- if not (.Param "hideMeta") }}
<div class="post-meta">
{{- partial "translation_list.html" . -}}
</div>
{{- end }}
</header>
<div id="searchbox">
<input id="searchInput" autofocus placeholder="{{ .Params.placeholder | default (printf "%s ↵" .Title) }}"
aria-label="search" type="search" autocomplete="off" maxlength="64">
<ul id="searchResults" aria-label="search results"></ul>
</div>
{{- end }}{{/* end main */}}标签信息
首先这里定义了页面头部
来看下这里的标签信息
<header>：语义化的 HTML5 标签，表示页面或文章的页头，class="page-header"是 CSS 类名，方便后面用样式控制外观（比如加粗，居中，留白等）<h1>：主标题标签，对 SEO 和可访问性很重要，通常每个页面只有一个<h1>，代表当前页面的核心主题<svg>：图标标签，内联了一个 SVG 图标，比如可以是一个小装饰图标，徽章，箭头等，这里是一个放大镜图标，表示搜索
SVG
OK，这里提到了 SVG 图标，下面来详细介绍下
SVG 全称 Scalable Vector Graphics，是一种基于 XML 的矢量图形格式，用于在网页中显示图标，插图等
SVG 的优点如下：
- 无限缩放不模糊，因为是矢量，不是像素图
- 文件小，尤其适合简单图标
- 可直接用 CSS 控制颜色，大小，动画等
- 内联嵌入 HTML，无需额外请求图片文件
OK，来看下 PaperMod search.html 这里的图标信息，首先是定义了形状
xml
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>这是一个典型的搜索图标（放大镜形状），<circle> 表示一个圆圈（代表镜片），<line> 表示一条斜线（代表手柄），这个图标来自流行的开源图标库 Feather Icons 中的 search 图标
Feather Icons 里面还有很多其他好看的图标，可以自由选择
下载图标后，打开内容，按下 F12 进入开发者模式，可以看到里面的内容和 PaperMod 主题中几乎一模一样
xmlns
OK，看下一个元素 xmlns，这里 xmlns="http://www.w3.org/2000/svg" 是一个 XML 命名空间的声明，因为 SVG 本质上是 XML 文档，而 HTML 是另一种标记语言 ，当在 HTML 中内联嵌入 SVG 时，浏览器需要知道，接下来的这段 <svg>...</svg> 不是普通的 HTML 元素，而是 SVG 元素，xmlns="http://www.w3.org/2000/svg" 就是通知浏览器：下面的内容按照 SVG 规范进行解析
不过在大多数现代浏览器中，即使省略 xmlns 元素，内联 SVG 也仍可能正常显示，因为现代浏览器一般会做容错 ，但严格来说，xmlns 元素是必须的，尤其在一些 XHTML 文档中，某些旧版浏览器里，或者需要通过 XML 解析器处理时，所以总的来说，加上 xmlns 是良好的实践，可以确保跨平台的兼容性
另外还要提一下，<svg> 标签中的 <circle> 和 <line> 元素是 SVG 元素，属于 XML 语法（更准确地说，是 SVG 的 XML 语法），不是 HTML 原生元素
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：搜索功能（二）