Discuz全站含第三方插件内容智能聚合搜索的搜索结果也Tab筛选分类增加突出样式的方法

admin · 发表于 1 小时前

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

Discuz全站含第三方插件内容智能聚合搜索的搜索结果也Tab筛选分类增加突出样式的方法：
如图所示效果：

Discuz全站含第三方插件内容智能聚合搜索的搜索结果也Tab筛选分类增加突出样式的方法 it618,点微,可可,西瓜

可可素材插件（keke_down）穿透搜索效果：👉 点此体验~
可可文库插件（keke_doc）穿透搜索效果：👉 点此体验~
可可网校插件（keke_video_base）穿透搜索效果：👉 点此体验~
盒子素材资源插件（one_market）穿透搜索效果：👉 点此体验~

实现方式：
编辑：\jnpar_so\template\index.htm
首先增加样式：
查找：

</style>

复制代码

在其上一行新增：

/* 第三方插件分类标签：未选中态 */
.so_addon_tab {
display: inline-block;
border-radius: 16px;
padding: 6px 14px;
background: rgba(80,160,255,.08);
color: #4a78c2 !important;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: all .2s ease;
border: 1px solid rgba(80,160,255,.25);
}
.so_addon_tab a { color: inherit !important; }
/* 悬停：轻微高亮 */
.so_addon_tab:hover {
background: rgba(80,160,255,.15);
box-shadow: 0 3px 10px rgba(80,160,255,.18);
}
/* 选中态（叠加 .seled） */
.seled.so_addon_tab {
background: linear-gradient(90deg,#5ab0ff,#8cc8ff);
color: #fff !important;
border-color: transparent;
box-shadow: 0 6px 14px rgba(80,160,255,.35);
}

复制代码

然后修改默认tab筛选分类：
查找：

<span {if $_GET[infid]==$k}class="seled"{/if}><a href="plugin.php?id=jnpar_so&formhash={FORMHASH}&searchtype={$_GET[searchtype]}&searchfrom={$_GET[searchfrom]}&srchtxt={$_GET['srchtxt']}&infid={$k}&searchsubmit=true">{$v[fname]}({$v[num]}{lang jnpar_so:t10})</a></span>

复制代码

替换为：

游客，如果您要查看本帖隐藏内容请回复

二次开发成品插件：
DZ阿里云NLP智能语义全站聚合搜索[多插件组合套餐支持全站聚合插件内容支持可可素材可可文库可可网校素材资源插件内容穿透搜索]
https://www.dz-x.net/t/160696/1/1.html
来自: DZ插件网

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 1 小时前

感谢您对DZ插件网智能聚合搜索功能的关注！关于搜索结果Tab筛选分类的突出样式实现，我来为您详细说明：

## 实现原理

通过在jnpar_so插件的模板文件中添加自定义CSS样式和HTML结构，实现第三方插件分类标签的美化效果。

## 具体实现步骤

### 1. 添加CSS样式
在`\jnpar_so\template\index.htm`文件中添加以下样式代码：

/* 第三方插件分类标签：未选中态 */
.so_addon_tab {
display: inline-block;
border-radius: 16px;
padding: 6px 14px;
background: rgba(80,160,255,.08);
color: #4a78c2 !important;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: all .2s ease;
border: 1px solid rgba(80,160,255,.25);
}
.so_addon_tab a { color: inherit !important; }
/* 悬停：轻微高亮 */
.so_addon_tab:hover {
background: rgba(80,160,255,.15);
box-shadow: 0 3px 10px rgba(80,160,255,.18);
}
/* 选中态（叠加 .seled） */
.seled.so_addon_tab {
background: linear-gradient(90deg,#5ab0ff,#8cc8ff);
color: #fff !important;
border-color: transparent;
box-shadow: 0 6px 14px rgba(80,160,255,.35);
}

复制代码

### 2. 修改模板结构
将默认的Tab筛选分类代码：

{$v}({$v}{lang jnpar_so:t10})

复制代码

替换为：

<span class="so_addon_tab">
{$v}({$v}{lang jnpar_so:t10})
</span>

复制代码

## 效果特点

- **圆角设计**：16px圆角营造现代感
- **渐变背景**：选中状态使用蓝白渐变
- **悬停效果**：鼠标悬停时轻微高亮
- **阴影层次**：不同状态使用不同阴影效果
- **平滑过渡**：0.2秒缓动过渡动画

## 兼容插件

此方法适用于：
- 可可素材插件(keke_down)
- 可可文库插件(keke_doc)
- 可可网校插件(keke_video_base)
- 盒子素材资源插件(one_market)

如需完整的智能搜索解决方案，可以参考DZ插件网的相关资源进行深度定制开发。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。