黑匣子
满天星

hexo next主题深度优化(九),给博客加入主题,护眼主题,护眼色

背景

我从小爱打游戏,所以视力下降厉害,加上现在工作天天对着电脑,所以想给自己的博客加上护眼色。

效果

博客:mmmmmm.me

upload successful

upload successful

_layout.swig

在body下面

1
2
3
4
5
6
7
8
9
10
11
<div class="eye">
<div class="eye1">
<ul>
<li style="background-color:#C7EDCC">豆沙绿</li>
<li style="background-color:#FAF9DE">杏仁黄 </li>
<li style="background-color:#FFFFFF">银河白</li>
<li style="background-color:#000000">极光黑</li>
</ul>
</div>
<div class="eye2">满天星</div>
</div>

custom.styl

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.eye{
position: fixed;
bottom: 68px;

height: 66px;
//background-color:transparent;
font-size :12px;
line-height :33px;
text-align :center;
z-index :99;

}
.eye1{
float :left;
display :none;
height :50px;
}
.eye1 ul {
height :50px;
list-style: none;
padding :0;
margin :0
}
.eye1 ul li{
float :left;
width :23px;
line-height :22px
text-align :center;
font-size :12px;
}
.eye1 ul li:hover {
border-bottom : 0 !important;
background-color: #fff;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.eye2{
float :left;
width :18px;
line-height :22px
text-align :center;
font-size :12px;
background-color:#e6e6e6;

}
.eye2:hover{
border-bottom : 0 !important;
background-color: #eee;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

eye.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  function eye(){
$(".eye .eye2").click(function () {
$(".eye .eye1").slideToggle();
})

$(".eye ul li").click(function () {
$(".eye .eye1").slideToggle();
$color=$(this).css("background-color")
console.log($color);
$(".eye .eye1").css("background",$color);
$("#canvas").css("background",$color);
$("article").css("background",$color);
})
}
eye()

引用eye.js

直接引用

在_layout.swig

1
<script src="xxxxxxxxxx.eye.js">

没有用到require.js和pjax的到这里就结束了,用了的往下看


main.js

1
2
3
4
5
6
7
8
//
require.config({
paths: {
"eye":"/js/src/pjax/eye",
},
});
require(['eye'], function (){
});

pjax的函数中重写

1
2
3
4
function eye_js() {
$color=$("#canvas").css("background");
$("article").css("background",$color);
}
-------------The End-------------

本文标题:hexo next主题深度优化(九),给博客加入主题,护眼主题,护眼色

文章作者:Leesin.Dong

发布时间:2018年12月18日 - 20:12

最后更新:2019年08月03日 - 23:08

原始链接:http://mmmmmm.me/hexo_jiu_eye.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

客官客官,不可以,你要对我负责~~~