海洋 CMS 搜索结果筛选高亮怎么设置

海洋 CMS 的搜索结果关键词高亮没有后台开关，必须在搜索模板里手写；而「筛选高亮」（分类、年份、地区等条件被选中后变色）则靠 URL 参数判断加 active 类实现。两件事分开做，互不干扰。

海洋 CMS 搜索结果高亮有后台开关吗？

结论：没有。海洋 CMS 后台提供的是采集、生成、SEO 等配置，搜索结果的「关键词标红」属于模板呈现层，需要在模板目录里改对应的搜索模板文件（具体文件名以你站点 template 目录下实际文件为准），后台找不到任何「高亮」选项。

这意味着高亮效果完全由你自己控制：标什么颜色、标标题还是标简介、要不要标正文，都取决于你在模板里写的那几行代码。建议改之前先备份模板文件，海洋 CMS 的模板改动不走数据库，删错了直接恢复文件即可。

关键词高亮怎么做？后端替换还是前端替换

结论：优先选后端 PHP 替换，前端 JS 高亮作为懒人补丁。

后端方案是在搜索结果循环里，对标题和简介字段做一次正则替换，把命中的关键词包上一层 <em>：

$kw = htmlspecialchars($searchword, ENT_QUOTES, 'UTF-8');
$html = preg_replace('/(' . preg_quote($kw, '/') . ')/iu', '<em class="hl">$1</em>', $html);

三个要点必须注意：

1. 先转义、后替换。如果先替换再 htmlspecialchars，你插入的 <em> 会被转义成文本，页面直接显示标签。
2. 一定要用 preg_quote()，否则用户搜索 (、*、. 这类字符时正则会报错或匹配错乱。
3. 加 u 修饰符，否则英文和数字没问题、中文可能乱码；i 修饰符负责忽略大小写。

前端 JS 方案不改 PHP，在搜索页底部加一段脚本，从 location.search 取出 searchword，遍历结果列表的标题和简介节点，用 textContent 替换后再写回 innerHTML。好处是不动后端，坏处是首屏会闪一下未高亮的文字（FOUC）。

高亮的 CSS 怎么写才不丑

结论：一行 CSS 就够，重点是颜色对比度和去掉默认斜体。

.hl{background:#ffe600;color:#c00;font-style:normal;padding:0 2px;border-radius:2px;}

<em> 浏览器默认是斜体，中文斜体在多数安卓机上是「伪斜体」，看着发虚，所以 font-style:normal 基本是必加的。背景色推荐 #ffe600（亮黄），文字用 #c00 深红，对比度足够；不要用纯黄配白字，几乎看不清。

筛选条件选中后怎么高亮？

结论：用 URL 参数判断，比依赖模板变量更稳。

海洋 CMS 的搜索页通常带若干筛选参数（如分类、年份、地区、字母），这些筛选链接本质是「当前 URL + 新参数」。要让用户一眼看出当前选了哪一项，最省事的做法是前端判断：

const p = new URLSearchParams(location.search);
document.querySelectorAll('[data-filter]').forEach(a => {
  const key = a.dataset.filter;          // 例如 "year"
  if (p.get(key) && a.dataset.value === p.get(key)) a.classList.add('active');
});

配合 a.active{background:#c00;color:#fff;} 即可。这么做的好处是：筛选区是静态 HTML，无论海洋 CMS 版本怎么升级、模板标签怎么变，只要参数名不变就一直有效。

最容易踩的三个坑

第一，分页丢参数。点击第 2 页后筛选条件消失，通常是因为分页链接只带了页码没带 searchword 和其它筛选参数。检查分页代码里是否把 $_SERVER['QUERY_STRING'] 的其余部分拼进去了。

第二，关键词过长导致满屏高亮。用户搜索一整个句子时，preg_replace 会把整句当成一个词去匹配，基本匹配不到；反过来搜索单个高频字（比如「的」）又会标红一大片。可以在替换前判断关键词长度，超过 20 个字符就跳过标题高亮。

第三，XSS。任何把用户输入的 searchword 拼进 innerHTML 的写法都有风险，JS 方案里务必用 textContent 取值再替换，不要直接 innerHTML += kw。

总结一下：关键词高亮在模板里用「先转义、后 preg_replace」实现，CSS 给 .hl 定背景色和 font-style:normal；筛选选中态用 URL 参数判断加 active 类，不依赖模板变量；分页记得带上完整查询串，JS 替换一律走 textContent。