文章	评论	标签
25	50	7

CommenterCard —— Typecho 评论者信息卡片插件

悬停评论区头像，弹出评论者信息卡片。展示等级称号、IP 属地、评论数、最近评论摘要及在线状态。

下载- CommenterCard

功能特性

特性	说明
悬停触发	鼠标移入头像弹出，移出自动消失
等级称号	基于评论次数的动态等级系统，后台可自定义规则
IP 属地	异步获取，显示为 "IP 广东" 格式
在线状态	检测对方博客是否可达，绿点在线 / 灰点离线
最近评论	展示最近 2 条已审核评论摘要
访问按钮	填写了网址的评论者显示直达按钮
头像适配	使用主题已处理的头像，无头像时自动生成名字首字彩色圆形头像
背景装饰	支持配置右侧半透明背景图，渐变融入不挡文字
清爽配色	蓝白清爽风格，自动适配暗色模式
零网络请求	PHP 随页面渲染注入数据，前端直接读取，不拖慢页面加载

文件结构

CommenterCard/
├── Plugin.php    # 插件主文件（数据查询 + 资源注入）
├── card.js       # 前端交互（悬停触发 + 异步检测）
├── card.css      # 卡片样式（清爽配色 + 暗色模式）
├── ip.php        # 同域代理（IP 查询 + 网站在线检测）
└── README.md     # 本文件

安装方法

将 CommenterCard 文件夹上传至 Typecho 的 usr/plugins/ 目录
登录后台 → 控制台 → 插件 → 找到 CommenterCard → 点击启用
点击设置可配置等级规则与背景装饰图（均为可选）

后台配置

等级称号规则

默认规则：

0,萌新
10,活跃
50,元老
100,话痨
200,传说

每行一条，格式为：评论数,称号。插件会取满足条件的最高等级。比如某评论者有 60 条评论，同时满足 "10,活跃" 和 "50,元老"，则显示元老。

右侧背景装饰图片 URL

填写一张图片地址，会在卡片右侧以极低透明度（6%）作为背景装饰，并通过渐变遮罩融入卡片边缘。不影响文字阅读。

使用要求

Typecho 1.0 及以上版本（兼容 1.3.0 + PHP 8）
主题评论区头像需有 avatar 类名，例如：<img class="avatar" ...>
主题已加载 jQuery（绝大多数 Typecho 主题默认都有）
服务器需开启 curl 或 allow_url_fopen，用于 IP 属地查询
仅对单篇文章页面生效（文章详情页）

工作原理

数据注入阶段（PHP）：文章页渲染时，插件查询该文章所有评论者的信息（评论数、等级、最近评论等），通过 <script>window._ccData = {...}</script> 直接注入页面
前端展示阶段（JS）：用户悬停头像时，前端从 window._ccData 直接读取数据渲染卡片，不发起任何额外数据请求
异步增强阶段（JS + ip.php）：卡片弹出后，才异步请求同域 ip.php 获取 IP 属地和网站在线状态

常见问题

Q：悬停没反应？

检查主题评论区头像是否有 class="avatar"。如果没有，可在主题的 comments.php 中给头像 <img> 加上该 class。

Q：IP 属地显示空白？

确保 ip.php 所在服务器能正常访问 ip-api.com。如果是国内服务器且无法直连，建议自行搭建 IP 库或替换为其他国内 IP API。

Q：在线检测一直离线？

在线检测本质是访问对方填写的网址并检查 HTTP 状态码。如果对方网站限制 UA、需要 HTTPS 或做了反爬，检测结果可能不准确，仅作为参考。

Q：卡片被其他元素遮挡？

卡片设置了 z-index: 99999，如果被遮挡通常是主题某些元素的层级过高，可在主题 CSS 中适当调整。

更新日志

v1.0.0 — 清爽蓝白配色；IP 属地加 "IP" 前缀；等级标签；零请求架构
历史开发版本 — 历经多轮迭代最终定型

CommenterCard 评论者信息卡片插件

Lin.