114、【Ubuntu】【Hugo】搭建私人博客：搜索样式（二）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

上篇 blog
【Ubuntu】【Hugo】搭建私人博客：搜索样式（一）

分析了 fastsearch.js 里最后的 activeToggle 功能，以及 CSS 样式 search.css 的部分内容，下面继续

搭建私人博客

上篇 blog 提到了 :active 伪类主要是鼠标（或触控）交互触发的，和键盘导航无关，下面再详细说下这里的点

首先，键盘导航不会触发 :active，当用方向键 ↑↓ 选中某一项时，JS 会给 <li> 搜索结果列表项添加一个 class，比如 .focus，触发自定义的 CSS 样式，比如

javascript 复制代码

#searchResults .focus {
    transform: scale(0.98);
    border: 2px solid var(--tertiary);
}

但不会触发 :active，因为没有鼠标或者触控那种按下的动作，只是单纯的键盘导航

所以总结一下

:active：给鼠标或者触控用户用的点击反馈
.focus：给键盘用户用的高亮状态

另外，再对比下常用的三种交互方式

操作方式	CSS 状态	视觉效果
鼠标点击（按住不松开）	`:active`（自动赋予状态）	缩小 98%（瞬间反馈）
键盘选中（方向键）	`.focus`（要用 JS 手动添加）	缩小 + 边框（持续高亮）
鼠标悬停	`:hover`（自动赋予状态）	可以赋予 CSS 样式，比如变色

这是现代 Web 开发中区分不同交互模式的典型做法，是无障碍（Accessibility）和用户体验的最佳实践，比如鼠标用户看到按下时缩小的动效，就知道点击生效了，而键盘用户看到边框高亮，就知道当前选中的是哪一项，这些交互体验不同，但都清晰，可操作

OK，既然对比到了 .focus 属性，就顺便先说下这部分

这里是键盘导航的高亮样式，当某个搜索结果项被键盘选中（通过方向键）时，之前介绍的 fastsearch.js 会给这个 <li> 列表项加上 class="focus"，这个样式的视觉效果：

同样缩小到 98%，和 :active 一致
加上 --teritary 颜色的边框，明确只是当前选中项

OK，下面看最后一个样式，也是最关键的，透明全屏点击层 <a href ...>

这个 <a> 在之前 fastsearch.js 介绍过，是空的，透明的，但是能覆盖整个 <li> 列表项区域

其关键点就在于这里的 position: absolute，这个配置项会让 <a> 覆盖整个父容器，但父容器是哪一个元素？这就涉及到上篇 blog 提到的 position: relative 配置了

在 CSS 中，一个 position: absolute 的元素，会相当于最近的，非 static 定位的祖先元素进行定位，而默认情况下，所有元素的 position 都是 static 静态定位的，不能作为 absolute 的定位参考

如果 <li> 没有 position: relative 的话，结构像这样

html 复制代码

<li>               <!-- 默认 position: static -->
  <header>标题</header>
  <a href="..."></a> <!-- position: absolute -->
</li>

那么 <a href...> 会一直往上找，直到找到 <body>，<html>，或者某个元素有 position: relative/absolute/fixed 属性的，结果就是 <a> 可能覆盖整个页面，或者定位错乱

而现在 <li> 有 position: relative 属性，那么 <a href...> 的 top: 0，left: 0，width: 100%，height: 100% 就是相对这个 <li> 列表项的，<a> 会完美地覆盖当前这一项，不多也不少，也就是说，这个 <a> 是空的，透明的，但也能覆盖整个 <li> 区域，所以效果就是下面这样

此时用户点击 <li> 的任何位置都能触发跳转（因为 <a> 是可点击的），这是一种常见技巧，可以让整个卡片可点击，而不仅限于于文字

另外，#searchResult 中的属性 outline: none 表示移除默认焦点轮廓（配合 fastsearch.js 用 .focus 类做自定义高亮）

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：搜索功能配置