Footer Timer

Butterfly主题v3.4.0及其以后版本基本已经实现完全去jquery化，而本帖有使用到jquery，不想再次引入js的可以考虑使用站内的原生JS计时器。

页脚翻页时钟计时

1. 参考内容：jquery.flipcountdown翻页定时器倒计时插件支持时分秒倒计时时间表
2. 改动范围：添加pjax重载，修复计算时间逻辑，避免出现负数的尴尬。预览效果

​

1. 可以直接下载教程涉及的静态资源，按指示添加到相应目录。 下载runtime.zip
2. 虽然说是页脚计时器，但不一定非要放在页脚。位置取决于便签注入的位置。而且也不局限于博客，理论上任何静态页面都适用。
3. 由于本教程的页脚计时器依赖于jquery，与Metro4框架有所冲突，所以不建议在使用了这个框架的页面上（例如本人的主页，说多了都是泪）使用。

修改步骤

在[Blogroot]\_config.butterfly.yml的footer配置项添加时间栏，如果已经有在custom_text写入过内容的，可以在合适的位置插入span标签。

在[Blogroot]\themes\butterfly\source\css\目录下新建flipcountdown.css

在[Blogroot]\themes\butterfly\source\js\目录下新建flipcountdown.js和runtime.js

将下载的翻页时钟图片添加到[Blogroot]\themes\butterfly\source\img\目录下。

在[Blogroot]\_config.butterfly.yml的inject引入文件。

    inject:
      head:
+       - <link rel="stylesheet" href="/css/flipcountdown.css">
      bottom:
+       - <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
+       - <script src="/js/flipcountdown.js"></script>
+       - <script data-pjax src="/js/runtime.js"></script>