打造博客温馨角落:动态时钟与问候语组件教程

在经营你的博客时,一个充满温度的小细节往往能拉近与读者的距离。今天,我将分享一个实用又美观的动态时钟和问候语提醒功能,不仅为博客增添人情味,还能与子比主题的深色模式完美兼容!赶快来看看如何操作吧!

功能亮点

  1. 简单易用:无需插件,只需通过WordPress后台自定义HTML小工具即可添加。
  2. 实时动态时钟:时分秒精准跳动,日期显示一目了然。
  3. 温馨问候语:根据时间段智能显示问候词,偶尔还能显示趣味小贴士。
  4. 深色模式适配:子比主题用户无需额外调整即可使用,支持深色模式切换。

代码分享

将以下代码复制到 WordPress 后台外观 -> 小工具 -> 自定义HTML 模块中,并将其拖放到你想展示的区域,例如侧边栏或页脚。

为了加快速度,我将CSS和JS进行了压缩,如果需要修改,格式化回来即可!

适配说明

  • 子比主题深色模式:自动兼容,无需修改代码。
  • 其他主题:若不支持深色模式,请手动调整CSS样式或联系主题开发者。

功能效果预览

  1. 页面自动显示当前时间,支持时分秒跳动和完整日期。
  2. 问候语根据访问时间段智能切换,例如:
    • 凌晨:凌晨好
    • 上午:早上好
    • 中午:中午好
    • 下午:下午好
    • 晚上:晚上好
  3. 问候语API支持个性化内容获取,如果API不可用,将显示默认问候语和祝福语。
  4. API接口我开源在博客文章内容。有兴趣也可以自己搭建一个

最后

通过这个动态时钟和问候语功能,博客变得更加生动有趣。不管是清晨打开网页,还是深夜浏览文章,动态问候都会成为读者记忆中的温暖一角。

快动手试试吧!如果你有其他有趣的想法,也可以留言与我分享!

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 共2条

请登录后发表评论