子比主题美化 – 顶部多功能组件下添加时间样式美化教程

今天给大家分享一款专为子比主题顶部多功能组件设计的时间样式，不仅能实时更新时分秒，还能完整显示年、月、日、星期，搭配精致的悬停动画效果，让你的站点顶部更具科技感与实用性，话不多说，喜欢的站长可自行部署！

效果预览

代码部署

添加时间样式代码

1. 在 “页面 & 显示 – 顶部多功能组件” 设置页面中，找到 “组件【下方】添加额外内容” 的输入框
2. 将下方完整代码，全部复制粘贴到该输入框中：

拉到页面底部，点击 “保存设置”，部署完成。

自定义修改指南

1. 修改时间 / 日期颜色

代码中时间和日期的颜色默认被注释（/*color: #2d3436;*/），若需修改：

• 时间颜色：取消 .time-display 中 color 的注释，将 #2d3436 替换为你想要的颜色代码
• 日期颜色：取消 .date-display 中 color 的注释，将 #636e72 替换为你想要的颜色代码

2. 修改装饰条颜色

找到 .time-display::before 中的 background: linear-gradient(90deg, transparent, #0984e3, transparent);，将 #0984e3 替换为你网站的主色调，实现与站点视觉统一。

3. 修改日期显示语言

若想将日期显示为中文（如 “星期五，十一月 21, 2025”），只需修改 JavaScript 中的一行代码：

将 const formattedDate = now.toLocaleDateString('en-US', options); 中的 'en-US' 改为 'zh-CN'，即：

const formattedDate = now.toLocaleDateString('zh-CN', options);

4. 修改字体大小

• 电脑端时间大小：修改 .time-display 中的 font-size: 5rem;
• 电脑端日期大小：修改 .date-display 中的 font-size: 1.3rem;
• 手机端时间大小：修改 @media (max-width: 600px) 内 .time-display 的 font-size: 3.5rem;
• 手机端日期大小：修改 @media (max-width: 600px) 内 .date-display 的 font-size: 1rem;

结语

这款子比主题顶部多功能组件时间样式，在保留主题原生功能的基础上，添加了实时动态的时间日期展示，既提升了站点的实用性，也通过精致的动画细节增强了视觉质感。无需复杂的代码修改，只需在后台可视化配置区域粘贴代码，就能快速上线一个兼具科技感与实用性的顶部时间组件，是子比主题站长优化站点头部展示的高性价比方案。