子比主题侧边栏美化：添加动态时间问候语组件，提升博客交互感

子比（Zibll）主题凭借高颜值的界面和丰富的自定义功能，成为很多 WordPress 博主的首选。但想要让博客更具个性化和温度，侧边栏的细节优化必不可少。今天分享的这款动态时间问候语组件，专门适配子比主题侧边栏小工具，既能实时显示精准的时间和日期，还能根据时段展示暖心的问候语，让你的侧边栏不再单调，给访客带来更贴心的浏览体验。

效果预览

核心视觉效果

1. 动态时钟：数字时钟实时跳动，冒号以 1 秒为周期闪烁，视觉上更具动感；
2. 适配深色 / 浅色模式：自动识别子比主题的暗黑 / 亮色模式，样式无缝适配，不突兀；
3. 温馨问候语：默认按凌晨 / 早上 / 中午 / 下午 / 晚上展示对应问候，也可通过接口获取个性化文案，接口异常时自动降级为默认内容；
4. 交互动效：鼠标悬浮时组件轻微上移，阴影效果增强，提升视觉层次感。

代码部署

1. 登录 WordPress 后台，依次点击「外观」→「小工具」；
2. 找到侧边栏区域（如「子比 – 侧边栏通用」「首页侧边栏」等，根据自己的需求选择），点击「添加小工具」；
3. 选择「自定义 HTML」小工具；
4. 将下方完整代码复制粘贴到「自定义 HTML」的内容编辑框中，点击「保存」；
5. 刷新博客前台页面，即可在侧边栏看到效果。

自定义调整

1. 调整时钟字体大小

找到样式中的 .time-display 部分，修改 font-size 值即可（默认 2.5em）：

.time-display {
    font-size: 2em; /* 调小为2em，可根据侧边栏宽度自定义 */
    /* 其他样式不变 */
}

2. 修改主色调

默认时钟颜色为 iOS 风格的蓝色（#007AFF），如需改为子比主题主色（如粉色 #e53636），替换以下两处颜色值：

.time-display {
    color: #e53636; /* 替换此处 */
}
body.dark-theme .time-display {
    color: #e53636; /* 暗黑模式下的颜色，可同步修改 */
}

3. 自定义默认问候语和小贴士

找到 JS 代码中 catch 部分的内容，修改对应文案：

// 自定义默认问候语
if(hour<6)defaultGreeting='夜深了，注意休息～';
else if(hour<11)defaultGreeting='早安，新的一天加油！';
else if(hour<14)defaultGreeting='午安，记得吃午饭哦～';
else if(hour<18)defaultGreeting='下午好，喝杯茶放松一下吧';
else defaultGreeting='晚上好，愿你有个美好的夜晚！';

// 自定义默认小贴士
document.getElementById('tip').textContent='你的专属问候，只为温暖你～';

4. 关闭接口请求（仅用本地默认文案）

若不想调用第三方接口，可删除 fetch 相关代码，直接保留本地逻辑：

function updateGreeting(){
    const hour=new Date().getHours();
    let defaultGreeting='';
    if(hour<6)defaultGreeting='凌晨好';
    else if(hour<11)defaultGreeting='早上好';
    else if(hour<14)defaultGreeting='中午好';
    else if(hour<18)defaultGreeting='下午好';
    else defaultGreeting='晚上好';
    document.getElementById('greeting').textContent=defaultGreeting;
    document.getElementById('tip').textContent='愿你今天心情愉快！';
}

结语

这款适配子比主题侧边栏的动态时间问候语组件，无需复杂的开发能力，复制粘贴即可使用，还支持灵活的自定义调整。小小的侧边栏优化，既能提升博客的视觉体验，也能让访客感受到你的用心。