记录我的个人站点美化教程，有些设定是自己用F12调试，有些是收集自网络。使用Typecho搭建，handsome主题。
不恰饭的广告：handsome是一款功能完善的Typecho主题，从它的功能设计和更新迭代可以看出作者对这款主题的用心，而且作者还在QQ群内持续免费提供主题更新，安利（链接）。
外观设置
透明模式
使用外观设置——外观设置开关——炫酷透明模式，背景图片设为上图，主题色调使用light-light-light，透明模式的背景颜色设为rgba(161,209,235,0.4)。
主题开启透明模式时，有些地方需要补充设定CSS来让界面看着和谐统一，主要是底色和文字颜色的调整。在开发者设置——自定义CSS中加入以下代码：
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
|
/*除代码框、搜索结果、页面提示、超链接以外文字黑色，透明模式下文字原均为白色*/
:not(*[class^="hljs-"]):not(mark):not(.layui-layer-content):not(a) {
color:#000!important;
}
/*页面提示字体白色（黑底）*/
.layui-layer-content {
color: white;
}
/*超链接颜色设为蓝色*/
.comment-content-true a, .wrapper-lg .entry-content a {
color: #337ab7;
}
/*标题栏底色透明度调整*/
.bg-light .lter, .bg-light.lter {
background-color: rgba(255,255,255,0.5);
}
/*目录树底色透明度调整*/
.tocify .active, .vditor-outline__item--current, .vditor-outline__item:hover {
background-color: rgba(255,255,255,0.9);
}
/*左边栏友链提示信息底色透明度调整，原本为黑底黑字无法分辨，调为白底*/
.tooltip-inner {
background-color: rgba(255,255,255,0.9);
}
/*代码框底色透明度，上面为三对反引号的多行代码框，下面为单对引号的行内代码框。上面原本为纯白，下面原本几乎透明和背景难以区分*/
.hljs {
background-color:rgba(255,255,255,0)!important;
}
.well, pre {
background: rgba(255,255,255,.5);
}
code {
background-color: rgba(255,255,255,0.66);
}
/*搜索提示列表、歌单、闲言碎语透明化，原先为茶色面板，和透明模式其他设置不太搭*/
.dropdown-menu, #skPlayer .skPlayer-list {
background-color: rgba(255,255,255,0.9);
}
.panel-heading {
background-color: rgba(255,255,255,0.6);
}
#smallRecording {
background-color:rgba(255,255,255,0.4);
}
/*修复GitHub页面透明问题。开启透明模式后除暗色外的颜色都变为透明，需要手动修改暗色为透明*/
.bg-dark {
background-color: transparent;
}
|
其他调整
在开发者设置——自定义CSS中加入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/*博客首页、文章标题栏加粗*/
.font-thin {
font-weight: 500;
}
/*搜索提示栏宽度*/
#search_tips_drop {
max-width:180px;
}
/*搜索框匹配结果，去除原本黄底效果，去除匹配成功的字符两边的空格*/
.mark, mark {
padding: 0em;
background-color: transparent;
color: rgba(255,0,0,1)!important;
}
|
功能美化
手机不显示标签云和热门
在开发者设置——自定义CSS中加入以下代码：
1
2
3
4
5
6
|
/*手机不显示标签云和热门*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}
|
头像旋转
鼠标浮在头像上时，头像旋转720度，鼠标离开后，头像反方向转回720度。
在开发者设置——自定义CSS中加入以下代码：
1
2
3
4
5
6
7
|
/*头像旋转*/
.img-circle {
transition: all 0.5s;
}
.img-circle:hover {
transform: scale(1.15) rotate(720deg);
}
|
面板上浮和阴影效果
在开发者设置——自定义CSS中加入以下代码：
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
|
/*首页文章面板上浮特效，以及上浮后阴影效果*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 4px 5px rgba(80,100,117,0.3);
}
/*首页文章面板四周阴影*/
.panel {
box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
-moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}
.panel:hover {
box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
-moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}
.panel-small {
box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
-moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}
.panel-small:hover {
box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
-moz-box-shadow: 1px 1px 5px 5px rgba(25, 55, 105, 0.3);
}
|
页面顶部彩虹条
在开发者设置——自定义输出body尾部的HTML代码中加入以下代码：
1
2
|
<!--顶部彩虹进度条-->
<div class="colorTopBar"></div>
|
在开发者设置——自定义CSS中加入以下代码：
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
|
/*顶部彩色条*/
.colorTopBar{
animation: colorTopBar 1s infinite linear;
height:2px;
top:0;
left:0;
position: fixed;
width:100%;
z-index:9999;
}
@keyframes colorTopBar{
0%{
background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
}
20%{
background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
}
40%{
background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
}
60%{
background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
}
80%{
background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
}
100%{
background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}
}
/*手机端不显示*/
/*
@media (max-width:767px) {
.colorTopBar {
display: none;
}
}
*/
|
鼠标按压烟花特效
第一段代码修改自个人博客ONESRC文中源码，第二段代码来源已忘。
在开发者设置——自定义JavaScript中加入以下代码：
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
/*鼠标按压特效，这一段是控制圆球的生成以及向四周扩散*/
<!-- Click Effect -->
function clickEffect() {
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);
if (canvas.getContext && window.addEventListener) {
ctx = canvas.getContext("2d");
updateSize();
window.addEventListener('resize', updateSize, false);
loop();
window.addEventListener("mousedown", function(e) {
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function() {
document.body.classList.add("is-longpress");
longPressed = true;
}, 500);
}, false);
window.addEventListener("mouseup", function(e) {
clearInterval(longPress);
if (longPressed == true) {
document.body.classList.remove("is-longpress");
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
longPressed = false;
}
document.body.classList.remove("is-pressed");
}, false);
window.addEventListener("mousemove", function(e) {
let x = e.clientX;
let y = e.clientY;
pointer.style.top = y + "px";
pointer.style.left = x + "px";
}, false);
} else {
console.log("canvas or addEventListener is unsupported!");
}
function updateSize() {
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(2, 2);
width = (canvas.width = window.innerWidth);
height = (canvas.height = window.innerHeight);
origin = {
x: width / 2,
y: height / 2
};
normal = {
x: width / 2,
y: height / 2
};
}
class Ball {
constructor(x = origin.x, y = origin.y) {
this.x = x;
this.y = y;
this.angle = Math.PI * 2 * Math.random();
if (longPressed == true) {
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
} else {
this.multiplier = randBetween(6, 12);
}
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
this.r = randBetween(8, 12) + 3 * Math.random();
this.color = colours[Math.floor(Math.random() * colours.length)];
}
update() {
this.x += this.vx - normal.x;
this.y += this.vy - normal.y;
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
this.r -= 0.3;
this.vx *= 0.9;
this.vy *= 0.9;
}
}
function pushBalls(count = 1, x = origin.x, y = origin.y) {
for (let i = 0; i < count; i++) {
balls.push(new Ball(x, y));
}
}
function randBetween(min, max) {
return Math.floor(Math.random() * max) + min;
}
function loop() {
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.r < 0) continue;
ctx.fillStyle = b.color;
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
ctx.fill();
b.update();
}
if (longPressed == true) {
multiplier += 0.2;
} else if (!longPressed && multiplier >= 0) {
multiplier -= 0.4;
}
removeBall();
requestAnimationFrame(loop);
}
function removeBall() {
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
balls.splice(i, 1);
}
}
}
}
/*可以选择在手机上关闭特效*/
/*
function isPC() {
var userAgentInfo=navigator.userAgent;
var Agents =new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod");
var flag=true;
for(var v=0;v<Agents.length;v++) {
if(userAgentInfo.indexOf(Agents[v])>0) {
flag=false;
break;
}
}
return flag;
}
*/
// if(isPC()) {
//调用
clickEffect();
// }
<!-- End Click Effect -->
|
在开发者设置——自定义CSS中加入以下代码：
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
59
60
61
62
63
64
|
/*鼠标按压特效*/
/*这一段是生成长按鼠标时，鼠标周围的圆环，以及在按下位置黄色圆圈的收缩舒张*/
.pointer {
--size: 30px;
pointer-events: none;
width: var(--size);
height: var(--size);
background: rgba(247, 56, 89, 0.2);
position: fixed;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0) scale(0);
transition: transform 0.3s;
border: 2px solid rgba(247, 56, 89, 0.2);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.pointer:before {
content: "";
width: 80%;
height: 80%;
position: absolute;
display: block;
background: none;
border-radius: 50%;
transition: background 0.5s, box-shadow 0.5s;
}
.is-pressed .pointer {
transform: translate3d(-50%, -50%, 0) scale(1);
}
.is-longpress .pointer {
animation: wobble 0.2s infinite alternate;
}
.is-longpress .pointer:before {
background: #faf15d;
box-shadow: 0 0 5px rgba(250, 241, 93, 0.5);
animation: wobble2 0.2s infinite alternate;
}
@keyframes wobble {
to {
transform: translate3d(-50%, -50%, 0) scale(0.5);
}
}
@keyframes wobble2 {
to {
transform: scale(0.5);
}
}
/*手机端不显示*/
/*
@media (max-width:767px) {
.pointer,wobble,wobble2 {
display: none;
}
}
*/
|
复制时弹出提示
复制时弹出提示“复制成功,若要转载请注明出处！”。
在开发者设置——自定义输出body尾部的HTML代码中加入以下代码：
1
2
3
|
<!--复制提示 && 禁用F12 && 自定义右键-->
<!--这个lay.js是用在与页面弹窗有关的功能上的-->
<script src="https://cdn.jsdelivr.net/gh/HuaHuaY/huahuaorz.com-handsome-assets/6.0.0/src/脚本/layer.js"></script>
|
在开发者设置——自定义JavaScript中加入以下代码：
1
2
|
/*复制提示*/
document.body.oncopy = function() {layer.msg('复制成功,若要转载请注明出处！');};
|
禁用F12
按下键盘上F12后，不弹出调试界面并提示“F12已禁用”。
在开发者设置——自定义输出body尾部的HTML代码中加入以下代码：
1
2
3
|
<!--复制提示 && 禁用F12 && 自定义右键-->
<!--这个lay.js是用于与页面提示有关的功能-->
<script src="https://cdn.jsdelivr.net/gh/HuaHuaY/huahuaorz.com-handsome-assets/6.0.0/src/脚本/layer.js"></script>
|
在开发者设置——自定义JavaScript中加入以下代码：
1
2
3
4
5
6
7
8
|
/*禁用F12*/
document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
layer.msg("F12被禁用");
event.keyCode=0;
event.returnValue=false;
}
}
|
自定义右键菜单
将网页内鼠标右键单击菜单替换成自定义样式。
有“返回”、“前进”、“刷新”、“复制”、“百度搜索”、“Google搜索”、“首页”和“友链”共8个选项。
在开发者设置——自定义输出body尾部的HTML代码中加入以下代码：
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!--复制提示 && 禁用F12 && 自定义右键-->
<!--这个lay.js是用在与页面弹窗有关的功能上的-->
<script src="https://cdn.jsdelivr.net/gh/HuaHuaY/huahuaorz.com-handsome-assets/6.0.0/src/脚本/layer.js"></script>
<!--自定义右键-->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:rgba(194, 212, 231, 0.3);font-weight:700;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#000;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#000;background:rgba(255,255,255,0.3)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:rgba(194, 212, 231, 0.3)!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:rgba(194, 212, 231, 0.3) !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>返回</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li style="border-bottom:2px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度搜索</span></a></li>
<li style="border-bottom:2px solid gray"><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-search fa-fw"></i><span>Google搜索</span></a></li>
<li><a href="https://www.huahuaorz.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="https://www.huahuaorz.com/links.html"><i class="fa fa-meh-o fa-fw"></i><span>友链</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
}
function googleSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.google.com/search?q=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
|
彩色标签云
标签云背景改为彩色。
在开发者设置——自定义JavaScript和PJAX——PJAX回调函数中均加入以下代码：
1
2
3
4
5
6
7
|
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
|
页面标题变化
在浏览器中切换到博客所在标签页时，网站在浏览器标题栏名称显示2秒“ヾ(Ő∀Ő3)ノ想我啦！”后换为正常标题，切换到其他标签页时，标题栏名称显示“ヽ(●-`Д´-)ノ别走啊！”。
在开发者设置——自定义输出body尾部的HTML代码中加入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--页面标题变化-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
document.title = 'ヽ(●-`Д´-)ノ别走啊！';
clearTimeout(titleTime);
}
else {
document.title = 'ヾ(Ő∀Ő3)ノ想我啦！';
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
|
UserAgent——显示评论者的浏览器、系统、IP所在地址
暂不支持IPV6。来自松鼠的博客：安利一款Hansome主题专用的UserAgent插件
修改文件调用插件
修改handsome主题componet目录下comments.php文件。将
1
2
3
|
<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b>
</span>
|
修改为
1
2
3
|
<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>
|
P.S. 使用vim编辑时，可以使用“:/”去定位，匹配到的文字会高亮显示，修改完成后可输入“:noh”取消高亮。
在Typecho后台启用插件
将UserAgent 1.1.7z解压后上传到主题下的usr/plugins目录，并在后台启用。
修改文件获取真实IP
在Typecho根目录下config.inc.php文件末尾添加以下代码：
1
2
3
4
5
6
|
//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}
|
2020-11-09 更新
由于阿里云第二年续费比较高，难以承担，阿里云的学生机也只能够用几年，考虑到将来尽可能的少迁移，决定还是用GitHub Pages搭建博客站点。