Blog美化

上篇文章对配置进行了记录,本篇文章记录nexT的美化工作。
效果图呈现:
博客首页效果.png

前言

通过上一章Blog更新&配置文件详解的内容基本能满足大部分的需求,如果想要逼格高一点、深度优化,可以对里面的一些文件(swig、js等)进行新增、修改等。

美化

点击特效

点击特效可通过JS来实现,大家可以选择自己喜欢的特效,调用JS即可。我选择的是点击桃心特效,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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);

将上面源码存放为click.js文件内,将click.js文件放在/hexo/themes/next/source/js/src\路径下。
打开 /hexo/themes/next/layout/_layout.swig 文件, 在head标签内最后位置添加以下代码:

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

修改文章内链接文本样式

修改文件/themes/next/source/css/_common/components/post/post.styl,在末尾添加如下css样式:

1
2
3
4
5
6
7
8
9
10
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

文章底部标签样式

修改模板/hexo/themes/next/layout/_macro/post.swig,搜索 rel=”tag”>#,将 # 换成或者可以从这里自己挑。

1
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i>{{ tag.name }}</a>

文章末尾添加结束标记

在路径/hexo/themes/next/layout/_macro/中新建 passage-end-tag.swig 文件,并添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-heart-o" aria-hidden="true"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

接着打开/hexo/themes/next/layout/_macro/post.swig文件,post-footer之前添加如下代码(post-footer之前两个DIV):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

{% if (theme.alipay or theme.wechatpay or theme.bitcoin) and not is_index %}
<div>
{% include 'reward.swig' %}
</div>
{% endif %}

{% if theme.post_copyright.enable and not is_index %}
<div>
{% include 'post-copyright.swig' with { post: post } %}
</div>
{% endif %}

<footer class="post-footer">

打开主题配置文件/hexo/themes/next/_config.yml,在末尾添加:

1
2
3
# 文章末尾添加结束标记
passage_end_tag:
enabled: true

侧边栏作者头像修改

把侧边栏头像变成圆形,并且鼠标停留在上面发生旋转效果,修改/hexo/themes/next/source/css/_common/components/sidebar/sidebar-author.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;

/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;

/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
-webkit-animation: play 2s ease-out 1s 1;
-moz-animation: play 2s ease-out 1s 1;
animation: play 2s ease-out 1s 1;

/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
transition: transform 1.5s ease-out;
}

img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}

.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}

背景&透明度美化

背景图片

在/hexo/themes/next/source/css/_custom文件夹下打开custom.styl文件,往里面添加以下代码:

1
2
3
4
5
6
7
body{   
background:url(图片链接);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

文字背景色设置

在/hexo/themes/next/source/css/_custom文件夹下打开custom.styl文件,往里面添加以下代码:

1
2
3
4
5
.content {
border-radius: 10px;
margin-top: 60px;
background:rgba(颜色rgb,透明度) none repeat scroll !important;
}

代码块美化

这块工作让我头痛了很久!!!
代码块透明度设置,在/hexo/themes/next/source/css/_custom文件夹下打开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
// 单行代码块设置
code {
background:rgba(241,241,241,0.3);
margin: 2px;
}
// 多行代码块的自定义样式
.highlight{
background:rgba(241,241,241,0.3);
}
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
background:rgba(241,241,241,0.3);
}
.highlight, td{
background:rgba(241,241,241,0.1)
}
.highlight, gutter pre{
background:rgba(241,241,241,0.1)
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
background:rgba(241,241,241,0.3)
}
table>tbody>tr:nth-of-type(odd){
background:rgba(241,241,241,0.1)
}

注释/hexo/themes/next/source/css/_components/highlight/highlight.styl文件第81、88行:

1
// background-color: $highlight-gutter.bg-color

这一块修改学习到了一个小技巧,通过chrome的F12→Elements→Styles进行一层层修改测试,快速找到需要修改的地方。Ps:这里要谢谢我的同事-C!
chrome F12.jpg

播放器

安装APlayer插件

安装Aplayer播放器,在/hexo目录执行npm install aplayer --save
安装完后在node_modules目录下找到APlayer.min.js文件,将其复制到theme/next/source/js/src/目录下。
在你想要加入音乐播放器的地方插入以下代码,这里我把它放到了侧边栏。
打开theme/next/layout/_custom/文件夹下的sidebar.swig文件,向其中添加以下代码:

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
<div id="player1" class="aplayer" data-id="2058781355" data-server="netease" data-type="playlist" data-mode="circulation"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
element: document.getElementById('player1'), // Optional, player element
narrow: false, // Optional, narrow style
autoplay: true, // Optional, autoplay song(s), not supported by mobile browsers
showlrc: 3, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
mutex: true, // Optional, pause other players when this player playing
theme: '#e6d0b2', // Optional, theme color, default: #b7daff
mode: 'circulation', // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
preload: 'metadata', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
listmaxheight: '513px', // Optional, max height of play list
music: [
{
title: '化身孤岛的鲸', // Required, music title
author: '不才', // Required, music author
url: '/music/不才 - 化身孤岛的鲸.mp3', // Required, music url
pic: '/music/不才 - 化身孤岛的鲸.jpg', // Optional, music picture
lrc: '/music/不才 - 化身孤岛的鲸.lrc' // Optional, lrc, see: ###With lrc
},
{
title: '我的一个道姑朋友', // Required, music title
author: '以冬', // Required, music author
url: '/music/以冬 - 我的一个道姑朋友.mp3', // Required, music url
pic: '/music/以冬 - 我的一个道姑朋友.jpg', // Optional, music picture
lrc: '/music/以冬 - 我的一个道姑朋友.lrc' // Optional, lrc, see: ###With lrc
},
{
title: '七月上', // Required, music title
author: 'Jam', // Required, music author
url: '/music/Jam - 七月上.mp3', // Required, music url
pic: '/music/Jam - 七月上.jpg', // Optional, music picture
lrc: '/music/Jam - 七月上.lrc' // Optional, lrc, see: ###With lrc
}
]
});
</script>

自定义播放器样式

包含颜色更改,列表歌曲信息的排版修改。
在/hexo/theme/next/source/css/_custom文件夹下打开custom.styl文件,往里面添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 播放器设置
.aplayer-list{
height: 100px !important;
}
.aplayer-list ol li:hover { /*列表悬停颜色*/
background:rgba(255,255,255,0.3) none repeat scroll !important;}
.aplayer-list ol li { /*列表底色*/
background:rgba(250,252,123,0.3);}
.aplayer-list-light { /*列表播放歌曲颜色*/
background:rgba(97,217,101,0.3) none repeat scroll !important;}

#player1 { /*边框样式*/
border-radius: 6px;
div,ol {border-radius: 6px;}
}
#player1 *{color: #696969;} /*字体颜色*/
/*列表歌曲信息的排版*/
.aplayer-list-index{float:left;}
.aplayer-list-title{float:left;}
.aplayer-list-author{float:right;}

音乐播放控制边栏

APlayer-Controler放入/hexo/themes/next/source/js/src/目录下。
在/hexo/themes/next/layout/_custom/文件夹下新建一个myapcontroler.swig的文件。向其中添加以下代码:

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
<script src="/js/src/APlayer-Controler.js"></script>
<div id="AP-controler"></div>
<script type="text/javascript">
var myapc=new APlayer_Controler({
APC_dom:$('#AP-controler'),
aplayer:ap, //此为绑定的aplayer对象
attach_right:true,
position:{top:'300px',bottom:''},
fixed:true,
btn_width:100,
btn_height:120,
img_src:['http://oty1v077k.bkt.clouddn.com/bukagirl.jpg',
'http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg',
'http://oty1v077k.bkt.clouddn.com/pentigirl.jpg',
'http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif'],
img_style:{repeat:'no-repeat',position:'center',size:'contain'},
ctrls_color:'rgba(173,255,47,0.8)',
ctrls_hover_color:'rgba(255,140,0,0.7)',
tips_on:true,
tips_width:140,
tips_height:25,
tips_color:'rgba(255,255,255,0.6)',
tips_content:{},
timeout:30
});
</script>

在/hexo/themes/next/layout文件夹下打开_layout.swig文件,在前添加以下代码:

1
{% include '_custom/myapcontroler.swig' %}

侧边栏美化

在/hexo/themes/next/layout/_macro文件夹下打开sidebar.swig文件,找到以下代码行的位置:

1
<nav class="site-state motion-element">

在上面添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
<!--my custom code begin-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script type="text/javascript">
$("#sidebar").hover(function(){
$("#mydivshow").velocity('stop').velocity({opacity: 1});
},function(){
$("#mydivshow").velocity('stop').velocity({opacity: 0});
});
</script>
<div id="mydivshow" class="mydivshow">
<!--my custom code end-->

然后找到代码行:

1
2
3
4
</section>
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">

在此的上方添加一个,如下所示:

1
2
3
4
5
6
7
8
<!--my custom code begin-->
</div>
<!--my custom code end-->
</section>
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">

首页隐藏文章

修改next主题文件夹下的layout中的index.swig文件,将

1
post_template.render(post, true)

修改成:

1
2
3
{% if post.visible !=='hide' %}
{{ post_template.render(post, true) }}
{% endif %}

在Front-matter添加visible字段即可,当visible字段为hide时会在首页隐藏文章。

1
visible: hide

版权透明度

在/hexo/themes/next/source/css/_custom文件夹下打开custom.styl文件,往里面添加以下代码:

1
2
3
4
// 版权样式设置
.post-copyright{
background:rgba(241,241,241,0.1)
}

标签透明度

在/hexo/themes/next/source/css/_custom文件夹下打开custom.styl文件,往里面添加以下代码:

1
2
3
4
5
6
// 标签样式设置
.posts-expand .post-tags{
a {
background:rgba(241,241,241,0.1)
}
}

总结

  1. 自己搞不定,资料查不出来的情况下,问问其他人有时候会有意想不到的效果;
  2. CSS可以通过 !important来设置优先级;
  3. nexT的样式建议不去修改源码,通过修改/hexo/themes/next/source/css/_custom/custom.styl文件即可;
  4. 根据最近的一顿操作,发现了hexo目录结构。特此记录,Ps:不建议修改源码样式,虽然我自己改了很多~~手动捂脸:
路径文件名作用
/hexo/themes/next/source/css/_customcustom.styl可用于自定义配置样式:.content、.sidebar、.header等
/hexo/themes/next/source/css/_common/components/highlighthighlight.styl代码样式设置
/hexo/themes/next/layout_layout.swig主布局文件
/hexo/themes/next/layoutindex.swig首页布局文件
/hexo/themes/next/layout···XX布局文件
/hexo/themes/next/layout/partialsfooter.swig页脚布局(不确定)
/hexo/themes/next/layout/_customNull存放自定义布局文件
/hexo/themes/next/layout/_macroAll存放宏,用于博客生成

结语

这次美化没有完全彻底,可以看到还有一部分样式怪怪的。以后有时间,慢慢优化!!CSS太难了!!!太晚了,洗洗睡咯。

Hywell wechat
遗世独立
-------------本文结束感谢您的阅读-------------
羽化登仙
显示 Gitment 评论
0%