为了提醒自己好好学习，简单地使用了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

最后重新部署即可。