Hexo 添加夜间模式

前言

为博客添加夜间模式

动态背景

新建/blog/themes/next/source/js/src/night_mode.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
var brightness;
//显示遮罩
function cover_nest(brightness) {
if (typeof(div) == 'undefined') {
div = document.createElement('div');
div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');
document.body.appendChild(div);
} else {
div.style.display = '';
}
div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
}
//事件监听 通过ASCll码判别按键是否按下
window.addEventListener('keydown', function(e) {
//Alt+Z:打开夜间模式
if (e.altKey && e.keyCode == 90) {
cover_nest(brightness = 0.3);
}
//Alt+X:关闭
if (e.altKey && e.keyCode == 88) {
cover_nest(brightness = 0);
}
//Alt+↑:增加亮度
if (e.altKey && e.keyCode == 38) {
if (brightness - 0.05 > 0.05) cover_nest(brightness -= 0.05);
}
//Alt+↓:降低亮度
if (e.altKey && e.keyCode == 40) {
if (brightness + 0.05 < 0.95) cover_nest(brightness += 0.05);
}
}, false);

加载

打开themes\next\layout_layout.swig文件,在<body></body> 里面添加以下代码:

1
<script type="text/javascript" src="/js/src/night_mode.js"></script>

使用方法

  • Alt+Z:打开夜间模式
  • Alt+X:关闭
  • Alt+↑:增加亮度
  • Alt+↓:降低亮度

大功告成,重新生成部署页面即可

参考:网页夜间效果
lewulu!
-------------The End-------------
0%