Next主题个性化

这篇博客是对过去几天来折腾Next主题经验的一次大总结。本来用的是 yilia主题,可是不知道怎么着脑抽了想换一个主题玩玩,这下好了,一折腾折腾了好几天····
博客嘛,当然是内容最重要···不过高颜值更能让我有动力哈哈哈😂没办法我就喜欢这些花里胡哨的东西

主题美化

以下是我用到的Next主题的个性化参考链接。这两个已经很全面啦,更多的美化方案就看这两个吧。

打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化

hexo的next主题个性化教程:打造炫酷网站

增加看板娘

知道看板娘是什么意思的估计差不多都很宅吧。当然看板娘不一定非得是人,我的就是一直小黑猫哈哈哈
详情请看下面的链接
用Live2D让看板喵入住你的Hexo博客吧(^o^)/~

增加鼠标点击特效

浮现彩色桃心

以下是所需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
45
46
47
48
49
50
51
! function(e, t, a) {
function n() {
c(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
}

function r() {
for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
requestAnimationFrame(r)
}

function o() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(), i(e)
}
}

function i(e) {
var a = t.createElement("div");
a.className = "heart", d.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: s()
}), t.body.appendChild(a)
}

function c(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}

function s() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
var d = [];
e.requestAnimationFrame = function() {
return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
setTimeout(e, 1e3 / 60)
}
}(), n()
}(window, document);

压缩后:

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

新建love.js文件并且将上面的代码复制进去。然后将love.js文件放到路径 /themes/next/source/js/src 下,然后打开\themes\next\layout\_layout.swig文件,在末尾添加以下代码:

1
2
<!-- 鼠标桃心动画 -->
<script type="text/javascript" src="/js/src/love.js"></script>

浮现Emoji和其他文字

原作者博客

以下是我稍微改了下自己用的版本😳,如果你成功加入了上面的桃心特效,那么这个就是换下代码而已。

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
onload = function() {
var click_cnt = 0;
var $html = document.getElementsByTagName("html")[0];
var $body = document.getElementsByTagName("body")[0];
$html.onclick = function(e) {
var $elem = document.createElement("b");
$elem.style.color = "#E94F06";
$elem.style.zIndex = 9999;
$elem.style.position = "absolute";
$elem.style.select = "none";
var x = e.pageX;
var y = e.pageY;
$elem.style.left = (x - 10) + "px";
$elem.style.top = (y - 20) + "px";
clearInterval(anim);
switch (++click_cnt) {
case 10:
$elem.innerText = "🤩";
break;
case 20:
$elem.innerText = "😎";
break;
case 30:
$elem.innerText = "😏";
break;
case 40:
$elem.innerText = "😐";
break;
case 50:
$elem.innerText = "😑";
break;
case 60:
$elem.innerText = "😒";
break;
case 70:
$elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
break;
case 80:
$elem.innerText = "(╯°口°)╯(┴—┴";
break;
case 90:
$elem.innerText = "别点啦";
break;
case 100:
case 101:
case 102:
case 103:
case 104:
case 105:
$elem.innerText = "休息会儿";
break;
default:
$elem.innerText = "🎈";
break;
}
$elem.style.fontSize = Math.random() * 10 + 8 + "px";
var increase = 0;
var anim;
setTimeout(function() {
anim = setInterval(function() {
if (++increase == 150) {
clearInterval(anim);
$body.removeChild($elem);
}
$elem.style.top = y - 20 - increase + "px";
$elem.style.opacity = (150 - increase) / 120;
}, 8);
}, 70);
$body.appendChild($elem);
};
};

压缩后

1
onload=function(){var click_cnt=0;var $html=document.getElementsByTagName("html")[0];var $body=document.getElementsByTagName("body")[0];$html.onclick=function(e){var $elem=document.createElement("b");$elem.style.color="#E94F06";$elem.style.zIndex=9999;$elem.style.position="absolute";$elem.style.select="none";var x=e.pageX;var y=e.pageY;$elem.style.left=(x-10)+"px";$elem.style.top=(y-20)+"px";clearInterval(anim);switch(++click_cnt){case 10:$elem.innerText="🤩";break;case 20:$elem.innerText="😎";break;case 30:$elem.innerText="😏";break;case 40:$elem.innerText="😐";break;case 50:$elem.innerText="😑";break;case 60:$elem.innerText="😒";break;case 70:$elem.innerText="૮( ᵒ̌皿ᵒ̌ )ა";break;case 80:$elem.innerText="(╯°口°)╯(┴—┴";break;case 90:$elem.innerText="别点啦";break;case 100:case 101:case 102:case 103:case 104:case 105:$elem.innerText="休息会儿";break;default:$elem.innerText="🎈";break}$elem.style.fontSize=Math.random()*10+8+"px";var increase=0;var anim;setTimeout(function(){anim=setInterval(function(){if(++increase==150){clearInterval(anim);$body.removeChild($elem)}$elem.style.top=y-20-increase+"px";$elem.style.opacity=(150-increase)/120},8)},70);$body.appendChild($elem)}};

动态标签栏

Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效

算是一个小细节的美化吧,它可以在你切换页面的时候更改标签栏的文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
// $('[rel="icon"]').attr('href', "/images/TEP.ico"); //如果需要图标一起变,那么就将这行取消注释并选择正确的图片路径
document.title = ' 😉不看了就关掉 ~';//要显示的信息
clearTimeout(titleTime);
}
else {
//$('[rel="icon"]').attr('href', "/favicon.ico"); 同上
document.title = '😍欢迎回来~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

新建crash_cheat.js文件并且将上面的代码复制进去。然后将love.js文件放到路径 /themes/next/source/js/src 下,然后打开\themes\next\layout\_layout.swig文件,在末尾添加以下代码:

1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

排版相关

tabs的使用

tabs的详细用法

我认为tab可以起到节省页面空间的作用,把一些文字分页放置更加美观

这个tab标签在放js代码块的时候有bug:
首先它不能使用 “ ``` 代码块 ``` ” 这样的标签. 不然它就会显示 undefined。这时候要使用code标签。另外它只能在第一页插入代码块,插入之后第二页就翻不出来,总之插入代码的时候BUG一堆根本不能用😭

label的使用

label测试
label使用详情

Demo:
所谓的label从效果上看神似荧光笔 反正我就是当荧光笔来划重点吧

  • 这是Default
  • 这是Primary
  • 这是Success
  • 这是Info
  • 这是Warning
  • 这是Danger
  • 这是有删除线的Danger

Code:

1
2
3
4
5
6
7
这是{% label default@Default%}
这是{% label primary@Primary%}
这是{% label success@Success%}
这是{% label info@Info%}
这是{% label warning@Warning%}
这是{% label danger@Danger%}
这是有删除线的~~{% label danger@Danger%}~~

Button的使用

button的详细用法
Demo:
按钮我也不经常用,但是如果像这样分享下载链接的时候可能会有点用吧

点击会下载老婆!慎点😜
点击下载

好多bug啊····如果这里加一个note标签下面的code和标题就不会渲染了,😶

Code:

1
{% btn https://cooguyan-1252810309.cos.ap-chengdu.myqcloud.com/beaupic/gakki/5267d628b0f0b81855f15b80494d36c2.jpg, 点击下载, download fa-lg fa-fw %}

note的使用

note标签详细用法

Demo:

默认 用来替代引用标签还行

默认 有图标的引用标签吧

可以补充一些信息

Primary,不知道怎么用

Warning,写一些警告信息

Danger,就是这样很危险吧

Success,成功是什么鬼啊

没有图标的样子

Code:

1
2
3
4
5
6
7
8
{% note %}默认 用来替代引用标签还行{%endnote%}
{% note default %} 默认 有图标的引用标签吧{%endnote%}
{% note info %}可以补充一些信息{%endnote%}
{% note primary%}Primary,不知道怎么用{%endnote%}
{% note warning%}Warning,写一些警告信息{%endnote%}
{% note danger %}Danger,就是这样很危险吧{% endnote%}
{% note success%}Success,成功是什么鬼啊{%endnote%}
{% note success no-icon%}没有图标的样子{%endnote%}

引用文本居中显示

详细用法

Demo:

我们能体验的最美好的东西是神秘的事物。他是所有真正艺术和科学的来源。
——阿尔伯特·爱因斯坦 《我的世界观》,1930

增多我们不加思索就能完成的重要工作的数量,文明便是如此进步的。
——Alfred North Whitehead,An Introduction to Mathematics,1911

我对上帝说西班牙语,对女人说意大利语,对男人说法语,对我的马说德语。
——查理五世,法国国王(1337~1380)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">我们能体验的最美好的东西是神秘的事物。他是所有真正艺术和科学的来源。
——阿尔伯特·爱因斯坦 《我的世界观》,1930</blockquote>

<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% centerquote %}增多我们不加思索就能完成的重要工作的数量,文明便是如此进步的。
——Alfred North Whitehead,An Introduction to Mathematics,1911{% endcenterquote %}

<!-- 标签别名 -->
{% cq %}我对上帝说西班牙语,对女人说意大利语,对男人说法语,对我的马说德语。
——查理五世,法国国王(1337~1380) {% endcq %}

鼓励一下:D