51工具盒子配置文件 {#配置文件}
本文用 Dayjs 来处理日期。当然，完全可以用原生 Date，但我不想把时间浪费在处理日期上面。
我使用的是 butterfly 主题。如果读者正在使用别的主题，请查阅对应官方文档寻找如何插入自定义标签与自定义页脚信息。
在主题配置文件（即_config.butterfly.yml）中引入：
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | inject: bottom: - <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js"></script> - <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/duration.min.js"></script> - <script src="/scripts/realtime.js"></script> |
在自定义页脚中加入一个 span 元素提供日期的挂载位点（hhh 最近做过 tRNA 结合位点的题，觉得这个描述还挺贴切）：
|---------------|-------------------------------------------------------------------|
| 1 2 3 | footer: custom_text: <span id="realtime_duration"></span> |
接下来主要通过 setInterval 实现这样一个实时更新的功能。
实现功能 {#实现功能}
在 source 目录下创建 scripts/realtime.js，写入以下代码：
|------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 | (() => { dayjs.extend(window.dayjs_plugin_duration) const el = document.getElementById('realtime_duration') // 改成自己的时间 const date = dayjs('2022-05-19') setInterval(() => { const dur = dayjs.duration(dayjs().diff(date)) const days = String(Math.floor(dur.asDays())) el.innerHTML = '已运行' + days + dur.format('天HH时mm分ss秒') }, 1000) })() |
现在拉到页底就能看到效果。
当然，如果是用 RSS 阅读器或者别的搬运站的话肯定就看不到了。
