不少站长喜欢在侧边栏增加趣味组件，实时展示当前访客 UA 信息：操作系统、浏览器、访问设备类型。依托子比原生侧边小工具，无需插件，直接代码部署，风格和主题完美融合。

工具效果亮点

1. 自动识别：PC / 手机设备、浏览器型号、系统版本
2. 复用子比卡片样式，深浅色模式自动适配
3. 轻量化 JS，不会拖慢页面加载
4. 侧边栏小工具直接嵌入，支持自定义标题、图标
5. 可选择游客可见 / 仅登录用户可见

部署教程

1. 后台 → 外观 → 小工具
2. 添加【自定义 HTML】组件，放置到侧边栏
3. 将完整代码粘贴进 HTML 框内，保存
4. 清理全站缓存，前台刷新查看效果

可用基础代码模板

避坑提示

1. 属于前端 JS 识别，仅供展示趣味使用，**不能用于安全校验**
2. 开启页面缓存的站点，信息不会实时刷新，无痕窗口测试
3. 部分小众浏览器 UA 无法精准识别，属于正常现象
4. 不要和大量侧边美化代码堆叠，避免相互冲突

FAQ

Q：需要安装插件吗？

A：纯前端代码实现，无需任何插件，直接小工具粘贴使用。

Q：信息识别不准确怎么办？

A：UA 判断依靠简单正则，追求 100% 精准需要更复杂库，趣味展示足够使用。

Q：能不能隐藏部分信息，只显示手机 / PC？

A：可以，直接删减代码内不需要的判断与输出内容。

结语

侧边 UA 信息小工具属于趣味性装饰组件，放在博客、社区侧边栏增加互动氛围感。原生卡片样式和子比浑然一体，轻量无负担，随手就能部署。