基于博客园awescnb插件的Geek皮肤公众号卡片实现方案
功能实现
当前博客园awescnb插件与Geek皮肤未提供公众号二维码展示功能，本文通过自定义DOM注入方式实现动态公众号卡片交互效果。
视觉效果
- 公众号卡片示意图：
- 动态交互演示：
- 首页展示图：
实现方案
通过DOM操作在日历组件前插入自定义卡片元素：
// 创建微信公众号交互卡片
function insertWechatCard() {
const cardContainer = document.createElement('div');
cardContainer.innerHTML = `
<div class="custom-card wechat-card" id="wechat-card">
<div class="flip-wrapper">
<div class="flip-content">
<div class="card-face"></div>
<div class="card-back"></div>
</div>
</div>
</div>`;
document.getElementById("blog-calendar").insertBefore(cardContainer, document.getElementById("blog-calendar").firstChild);
}
insertWechatCard();
样式配置需在页面定制CSS中添加：
/* 卡片基础样式 */
.custom-card {
background: #57bd6a;
border-radius: 12px;
box-shadow: 0 8px 16px -4px #2c2d300c;
display: flex;
justify-content: center;
align-items: center;
height: 110px;
margin: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
}
/* 动态翻转效果 */
.flip-wrapper {
perspective: 1000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.flip-content {
width: 235px;
height: 110px;
transform-style: preserve-3d;
transition: transform 0.3s cubic-bezier(0,0,0,1.29);
}
.card-face {
background-image: url('https://img2024.cnblogs.com/blog/1289898/202408/1289898-20240822093316430-1716103993.png');
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
background-image: url('https://img2024.cnblogs.com/blog/1289898/202408/1289898-20240822163713759-1772776461.png');
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(180deg);
backface-visibility: hidden;
}
/* 悬停交互 */
.flip-wrapper:hover .flip-content {
transform: rotateY(180deg);
}
关键实现说明：
- 使用CSS变量管理背景资源：
:root { --wechat-bg: url(...); } - 通过transform实现3D翻转效果
- hover伪类触发状态切换
- 支持自定义图片资源替换
资源说明
所需素材包含：
- 微信图标：
- 公众号提示图：
- 二维码底图：
二维码获取路径：公众号设置 > 账号详情 > 二维码
