全文约 1,023 字，读完约 3 分钟
继上一个性能卡片之后，再分享一个我自己做的小工具——「今日时光」时钟日历卡片。
很多博客侧栏都喜欢放一个时钟，告诉访客”现在几点了”。但市面上的时钟插件要么体积臃肿，要么样式难看，要么一刷新就跳秒。这个是我自己用着顺手才做出来的，干净、轻量、不折腾。
这是什么
一张挂在侧栏的时钟卡片，包含：
- 实时时钟：秒级刷新，也可以选择隐藏秒
- 日期 + 中文星期：今天几号、星期几，一目了然
- 本月进度条：本月已经过了多少天、还剩多少天，带百分比和进度条
- 底部月份信息：当前月份和当月总天数
设计细节
做这个插件的时候，我在几个小地方下了功夫：
- 无 jQuery、无外部依赖，CSS + 原生 JS 总共约 6KB，比一张图还小
- 服务端先输出一份正确时间，即使 JS 加载失败或者被浏览器拦截，首屏显示的时间也是对的，不会出现”1970年”或者空白
- 时间基准可选：可以显示站点时间（所有访客看到的时间一致），也可以显示访客本地时间
- 默认手机端不显示，只在 PC 端侧栏出现，不浪费移动端流量
深色模式
1.2.0 版本专门做了深色模式适配：
- 四种来源可选：跟随主题 / 跟随系统 / 两者都要 / 关闭，默认跟随主题
- 深色选择器可自定义，默认识别
.dark-mode和[data-theme="dark"]，覆盖大部分主题 - 没改过强调色时，深色模式会自动换成更亮的蓝色，保证可读性
怎么用
方式一：侧栏小工具
- 后台上传插件 zip，启用
- 进入「外观 → 小工具」，把「今日时光（时钟 + 月进度）」拖到侧栏
- 进入「设置 → 今日时光」调整标题、强调色、断点、是否显示秒等
方式二：短代码
不想放侧栏，也可以在文章或页面里直接插：
带参数：
常见问题
手机上为什么看不到？
默认行为，省流量。想在手机上也显示，在设置里关掉”手机端隐藏”就行。
隐藏后侧栏留了一块空白怎么办？
部分主题的侧栏容器不是小工具的直接父级。在「额外隐藏选择器」里填入该容器的 CSS 选择器即可，比如 .sidebar .widget，多个用英文逗号分隔。
深色模式颜色不对？
如果你的主题用的是 body.night 或 html.dark 这类写法，在设置里改一下深色模式选择器就行。
许可
GPLv2，完全免费，随便用、随便改。
如果你也想在博客侧栏挂一个干净的时钟卡片，欢迎拿去用。配合上一篇的「站点性能卡片」一起用，侧栏就有两个小工具了。
本文为作者原创，未经授权禁止转载。转载请保留原文链接并注明出处。
