3D拟真站长名片-侧栏模块
- ID: profile_card_3d
- 版本: 1.0.9
- 系统要求: Z-BlogPHP 1.7.5 Optimus以上
- 更新日期: 2026-06-17 11:11:01
- PHP版本: 7.4或更高
- 大小: 989KB
3D 拟真站长名片 · ProfileCard3D
Yojack出品的 Z-BlogPHP 高端炫彩侧边栏名片插件。支持 3D 浮光视差倾斜交互 与深色磨砂毛玻璃 (Glassmorphism) 质感，零改动主题模块自动悬浮注入；集成在线呼吸灯状态徽章、霓虹背光呼吸灯、一言 API 异步托底拉取；内置 6 大极简 IconFont 社交图标库，支持智能大小视觉等大对齐与悬浮品牌色平滑渐变，打造专属于独立站长最具格调的前台名片。
🚀 推荐工作流程（5 步上线）
安装激活：在 Z-Blog 应用中心下载并启用
3D拟真站长名片 (profile_card_3d)插件。基础配置：进入插件后台配置页面，填写您的名片主人昵称、角色标签以及个性签名。
绑定社交：填写您的 GitHub、微信、QQ、Bilibili、Email 等链接，并在微信项上传您的微信个人二维码图片。
前台挂载：进入 Z-Blog 后台「模块管理」页，将「3D拟真名片」拖拽到您的活动侧边栏（如 sidebar 默认侧栏）并点击保存。
清除缓存：点击后台首页右上角「清空缓存并重新编译模板」，刷新博客前台即可看到震撼视觉的 3D 卡片！
⚙️ 插件系统核心功能与细节说明
01 侧边栏模块启用 (Widget Setup)
零改造主题结构，名片模块支持全自动悬浮前台注入。
📦 自动生成模块：激活插件后系统自动生成「3D拟真名片」侧边栏模块。
🔌 主题兼容加固：在前台采用最高 specificity 权重的 CSS 及内联强制重构手段，完美剔除了各类 Z-Blog 主题给侧边栏子模块默认穿戴的边框、背景及冗余间距，实现真正的裸卡 3D 拟真卡片悬浮效果。
✨ 顶层小标题：支持自定义卡片顶部小标题（如 AUTHOR PROFILE），如果将其留空，该 HTML 节点和它所占用的 `20px` 高度将彻底不渲染，完全释放卡片空间。
02 基础资料配置与随机一言 (Saying API)
多功能个人签名设定，满足不同站长的个性化诉求。
👤 基本字段：昵称、角色标签、管理员头像关联（优先使用用户在后台上传的自定义头像，未填时自动读取管理员一号成员的头像作为托底）。
🤖 一言 API 异步对接：若开启“随机一言 (Hitokoto)”，并且将个人签名输入框留空，前台将通过原生 JS 的 Fetch API 异步、无阻塞地从接口拉取文艺金句。
⚙️ 自动容错机制：如遇网络抖动或接口请求超时，系统将自动降级托底为默认励志名言“即使起风了，也要好好的活下去！”，保障页面加载性能。
03 3D 视差倾斜与磨砂玻璃 (Visual Aesthetics)
高端、炫丽、极富科技感的前端动态美学设计。
🌀 3D 浮光视差：卡片内部的头像、昵称、签名及数据格被分割在不同的 3D Z轴深度。鼠标划过时，卡片整体会随鼠标坐标轴轻微倾斜，且高光反光层（Glare）会同步随反向轴流转，产生极度真实的亚克力物理反光质感。
🟢 2S 脉冲在线徽章：头像右下角内置一个 2 秒循环缩放波纹动画（Pulse）的绿点徽章，向外产生半透明光波，象征站长实时在线，让卡片充满生命呼吸感。
🌌 高对比磨砂毛玻璃 (Glassmorphism)：相较于常规白底毛玻璃，我们默认将遮罩层混合比例提升至 `0.82`。确保在任何刺眼的浅色或者复杂的网页背景下，白色的字体及亮蓝色的高亮元素都能获得完美的阅读对比度。
🎆 炫彩霓虹背光：内置柔和的氛围光晕（常态 0.15 透明度，悬停 0.25），向卡片四周泛出高阶紫蓝色科技背光。
04 IconFont 极简线条社交网络 (IconFont Integration)
彻底删除冗余 PNG 图片，采用轻量化、高清晰度的 IconFont 矢量图标。
🎨 视觉天秤大小调优：字体图形本身由于设计规范不同导致大小不一（如 RSS 极胖、QQ 极高，而微信 GitHub 极窄）。我们重新锁定了按钮为固定的 `28px × 28px` 中心 Flex 容器，并对其余 6 大图标进行了专属视觉字号平衡校准：微信/GitHub (`21px`)，Bilibili (`20px`)，QQ/新线条邮箱 (`19px`)，RSS 订阅 (`17px`)，达到完美的视觉等大对齐。
🌈 悬停品牌官方色彩：常态下所有图标统一过滤为高雅极简的半透明纯白（`opacity: 0.65`），鼠标悬停（Hover）时会瞬间平滑过渡为官方品牌色彩（微信绿、QQ蓝、Bilibili粉、RSS橘），让名片“常态克制、悬停惊艳”。
05 微信 6px 黄金圆角与 12px Spacing 扫码弹窗
告别一切粗糙和凌乱，精心雕琢的弹窗几何对齐设计。
📐 内外 6px 完美同心圆角：弹窗外层磨砂磨边框及内部二维码图片的圆角全部统一锁定为黄金比例 **`6px`**。
⏹️ 等宽等高剪裁（外宽-12px）：外框总宽度设为 `120px`，内边距设为 `12px`，内部二维码以 `96px × 96px` 正方形居中对齐，并使用 `object-fit: cover` 渲染。即使您上传的是长条手机截图，系统也会自动裁剪中间的二维码展示区，绝不因为宽高不等撑宽撑变形。
🫧 文字单行化：限制提示字“微信扫一扫联系我”为单行，消除冗余气泡，大框底下绝不再露出任何多余的小提示框。
📍 3D 拟真名片可配置项一览
| 配置项组 | 默认预设值 | 作用描述 |
|---|---|---|
| 基础信息 | 名片主人 / 自媒体站长 | 前台卡片的主标题及标签内容。 |
| 个性签名 | 探索科技与设计的交界处... | 个人签名，留空时可启用随机一言 API。 |
| 内边距 (Padding) | 上/右/下/左 独立微调，默认 12px | 控制卡片内部的填充留白，提升布局呼吸感。 |
| 外边距 (Margin) | 上/右/下/左 独立微调，默认 12px | 完美解决部分主题外壳失效问题，自主掌控卡片四周间距。 |
| 卡片圆角 (Radius) | 四个角均可单独设置，默认 6px | 支持对卡片四个角单独设置圆角弧度 (单位: px)。 |
| 背景模式 | 毛玻璃模式 (`glass`) | 支持在深色渐变背景与玻璃质感中自由切换。 |
| 卡片倾斜 | 已启用 (`1`) | 是否开启鼠标移动时的 3D 浮光视差物理倾斜。 |
| 数据统计 | 文章数、评论数、运行天数 | 天数自定，文章和评论数据从 Z-Blog 缓存自动生成。 |
| 社交挂载 | 留空表示关闭 | 支持 GitHub、微信、QQ、Bilibili、邮箱、RSS，启用图标后呈现在底部。 |
提示：激活插件即可自动完成所有模块注册，推荐在配合现代暗黑/透光风格的主题下预览，效果更佳。
访客您好，Z-Blog相关网站已开启实名制，请登录后绑定您的手机，再发表评论，谢谢您的支持。
ZBLOG应用中心-软件购买及使用协议
1. 您在购买应用软件前，须要先确认该应用软件是否符合您的使用需求。依据《消费者权益保护法》第二十五条规定，该软件为在线下载的数字化商品，在购买后一经下载安装不能退款。
2. 您在应用中心购买的软件，仅是该软件的许可使用权。除软件外应用中心不提供任何形式的有偿提供信息或网页制作、服务器空间租用等服务。
3. 一个软件仅可用于单一账号使用，未经本站同意，不得二次发布、赠送、转售、租让、盗版等，否则我们将永久关闭用户账号并保留继续追究相关责任的权利。
4. 本应用为通用型产品，除解决BUG外不提供个人定制和其它修改服务。
5. 您使用软件中所存在的风险，完全由用户自己承担，包括系统受损、资料丢失以及其它任何风险。
6. 用户不得利用该软件以任何方式从事违反法律法规及社会公序良俗的行为，用户须对其不当使用行为可能带来的后果负全部法律责任，本站不承担任何责任。
7. 如发现用户将软件用于黄赌毒诈等非法用途，将停止用户相关的使用权，并将用户相关违法信息上报至网络监管部门。
购买指南
1. 请先注册账号，然后登录“应用中心”。
2. 直接点击“购买应用”，跟随指引即可。
下载指南
1. 购买者在自己的Z-Blog网站登录，进入后台，在左侧菜单栏点击“应用中心”菜单。
2. 在“应用中心”的首页，使用应用中心注册账号进行登录。
3. 进入“我的应用仓库”，即可看到已购买成功的应用，点击“下载”即可下载安装。
其它注意事项
1. 如果通过自己网站后台无法正常访问应用中心，请谨慎购买，因为这将可能导致应用无法顺利下载安装。
2. 如已购买收费应用无法正常下载，请在自己网站后台检查Z-Blog及应用更新，如均已更新至最新版本仍无法下载请及时与我们联系。
3. 应用更新时有可能覆盖本地设置，请在更新前做好备份。