添加特殊日子自动开启全局黑白模式:昭昭前事,惕惕后人,勿忘历史,吾辈自强!

  1. 新建[blog]\themes\butterfly\source\js\custom\MemorialDayMode.js文件,并添加如下代码:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*---------特殊日子自动变黑白模式----------*/
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();

/*特殊日子日期列表设置*/
const dateList = [
'7/7', // 七七事变
'9/18', // 九一八事变
'12/13', // 国家公祭日,南京!
]
const toMonthDay = `${month}/${day}`
/*特殊时间段设置*/
var beginDate = new Date("2022-11-30 12:13:00"); /*特殊时间段开始时间*/
var endDate = new Date("2022-12-07 00:00:01"); /*特殊时间段结束时间*/
var today = day;

/*特殊日子自动变黑白*/
if (dateList.some((day) => day === toMonthDay)) {
$("html").css({
"filter":"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",
"filter":"grayscale(100%)",
"-webkit-filter":"grayscale(100%)",
"-moz-filter":"grayscale(100%)",
"-ms-filter":"grayscale(100%)",
"-o-filter":"grayscale(100%)"
});
console.log("昭昭前事,惕惕后人,勿忘历史,吾辈自强!");
}

/*特殊时间段自动变黑白*/
else if (today >= beginDate && today <= endDate) {
$("html").css({
"filter": "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",
"filter": "grayscale(100%)",
"-webkit-filter": "grayscale(100%)",
"-moz-filter": "grayscale(100%)",
"-ms-filter": "grayscale(100%)",
"-o-filter": "grayscale(100%)"
});
console.log("昭昭前事,惕惕后人,勿忘历史,吾辈自强!");
}
/*---------特殊日子自动变黑白模式---------*/
  1. 文件[blog]\_config.butterfly.yml添加如下两行:
1
2
3
4
inject:
bottom:
- <script defer src="/js/custom/MemorialDayMode.js"></script> #公祭日以及特殊日子自动变黑白
- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> #公祭日以及特殊日子自动变黑白:引入jQuery依赖包

大功告成!

隶属于文章hexo 博客 butterfly 主题安装及魔改笔记