为了提醒自己好好学习,简单地使用了js实现了这个效果。

因为想实现的倒计时功能为仅page可见,又不想仅仅添加在公告内容里面,所以仿照原本的公告样式增加了一个侧边栏倒计时样式。使用方法与公告一致。

主题版本为3.6.2。

创建一个js文件

首先在\themes\butterfly\source\js目录下新建一个timing.js文件,写入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let message = document.getElementsByTagName("timing")[0];
message.style.color = "red"; //设置颜色
var endtime = new Date("2021/12/25 08:30:00"); //设置目标日期
function showTime(){
var stime = new Date();
var time = endtime - stime;
if(time > 0){
var day = Math.floor(time/1000/3600/24);
var hour = Math.floor(time%(3600*24*1000)/1000/3600);
var min = Math.floor(time%(3600*24*1000)/1000%3600/60);
var sec = Math.floor(time%(3600*24*1000)/1000%3600%60);
var str ='距离2022年考研还有'+day+'天'+hour+'小时'+min+'分钟'+sec+'秒'; //设置字符串
message.innerHTML = str;
}
}
setInterval(showTime,1000);



添加配置文件

1、在Blog\themes\butterfly\layout\includes\widget目录下新增card_countdown.pug文件,写入以下代码。

1
2
3
4
5
6
7
if theme.aside.card_countdown.enable
.card-widget.card-countdown
.item-headline
i.fas.fa-hourglass-half.card-countdown-animation
span= _p('aside.card_countdown')
.countdown_content!= theme.aside.card_countdown.content
timing

2、打开Blog\themes\butterfly\layout\includes\widget\index.pug文件,按照以下修改(需注意pug文件对代码缩进很严格),如果只需要在文章页显示,则只在-post里添加;如果只需要在页面显示,则只在-page里添加(如本站)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#aside-content.aside-content
//- post
if is_post()
if showToc && theme.toc.style_simple
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
!=partial('includes/widget/card_countdown', {}, {cache: true})
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
else
//- page
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
!=partial('includes/widget/card_countdown', {}, {cache: true})
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
!=partial('includes/widget/card_newest_comment', {}, {cache: true})
!=partial('includes/widget/card_categories', {}, {cache: true})
!=partial('includes/widget/card_tags', {}, {cache: true})
!=partial('includes/widget/card_archives', {}, {cache: true})
!=partial('includes/widget/card_webinfo', {}, {cache: true})
!=partial('includes/widget/card_self', {}, {cache: true})

3、打开Blog\themes\butterfly\languages\zh-CN.yml,定位到aside,新增

1
card_countdown: 倒计时 //自定义名称

引入

1、打开主题的配置文件_config.yml,定位到inject,bottom处引入该js文件:

1
2
3
4
inject:
bottom:
- <script src="/js/timing.js"></script>

2、在主题配置文件_config_butterfly.yml里,定位到aside,在公告和最新文章之间修改成如下代码:

1
2
3
4
5
6
7
8
9
10
11
card_announcement:
enable: true
content:
card_countdown:
enable: true
content:
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works

最后重新部署即可。