【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog 【Ubuntu】【Hugo】搭建私人博客：搜索功能（八） 分析了 onkeydown 的剩余 key 键功能，并分析了 activeToggle 里的整体目标和功能，下面继续
搭建私人博客
OK，下面最后讲讲 activeToggle 这里框起来的部分
如果没传 ae 参数，也就是 ae === undefined 或 null，
else {
document.activeElement.parentElement.classList.add("focus")
}
这里会获取真正获得焦点的元素，给其父元素 <li> 加上 focus 类，用于恢复或同步视觉状态，这里有点风险，当 document.activeElement 不是搜索结果中的 <a href ….> 的话，可能会给错误元素加上 focus 类，不过目前的 fastsearch.js 中不存在传 null 或 defined 的行为，属于潜在风险点
OK，接下来看 PaperMod 给搜索功能设置的一套默认样式，其路径位于 assets/css/common/search.css，主要用于美化搜索框（#searchbox）和搜索结果列表（#searchResults）
首先是搜索输入框样式
可以看到，这里设置了搜索框的基本外观：
- padding：设置上下内边距，让文字不贴边
- width：100%，占满父容器宽度
- color：文字颜色使用 CSS 自定义属性 var(–primary)
- font-weight：默认 bold 加粗文字
- border-radius：圆角，半径由 var(–radius) 控制
还有，当搜索输入框获得焦点时的外观：
- border-color：当用户点击或键盘导航到搜索输入框时，边框颜色变成 var(–secondary)（高亮颜色），用来提示用户当前正在输入
这套样式属于典型的现代 UI 设计，使用 CSS 变量统一主题色和圆角风格，符合 PaperMod 极简主义主题
OK，接下来是搜索结果 <li> 的基础样式
- list-style：对于 HTML 列表，无论是无序列表 <ul> 还是有序列表 <ol>，浏览器在渲染时都会在前面加上小黑点 • 或者数字 1. 2. 等，这种渲染在搜索结果里面如果也有的话就很丑，因为搜索结果不是传统列表，而是一个个独立的卡片条目，这些前缀渲染会显得很杂乱，不美观，现代 UI 在设计中，列表常被用作布局容器，不需要语义符号，所以这里设置成 none，表示去掉前面渲染的小黑点 •，这样搜索结果就很干净
- padding：设置内边距，让内容有呼吸感
- margin：上下间距，分隔各结果
- position：这里 relative 很关键，可以为内部的 absolute 元素提供定位上下文（后面详细分析）
- font-weight：500，属于中等加粗
每个搜索结果都是一个列表项 <li>，这样设置的话，搜索结果看起来就像一个卡片，比较美观
然后是搜索结果容器 <ul> 的整体样式，负责整个结果列表的 margin 外边距和 width 宽度
OK，接下来是点击反馈，按下时会缩小焦点项
其整体效果表现为，当用户鼠标按下（还没松开）某个搜索结果时，元素轻微缩小到 98%（scale(0.98)），动画持续 0.1 秒，提供按下去的触感反馈，一种常见的微交互设计，增强操作感
注意，这里的 :active 伪类主要是鼠标（或触控）交互触发的，和键盘导航无关，这个样式只会在如下场景中生效：
- 用户用鼠标按下 <li>（或其内部元素）时
- 在触摸屏上按住该区域时
- 松开鼠标或手指后，:active 状态立即消失
:active 表示当前正在被激活（按下中）的状态
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
