next主题美化——背景图片、动画

前言:NexT 主题本身是没有背景图片的,显得有点单调,博主觉得没有背景图片显得我的博客很丑,于是就想添加一个背景图片

next版本:8.2.1

添加背景图片

把想设置的背景放入./themes/next/source/images中,命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl,输入以下代码

1
2
3
4
5
6
body {
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:100% 100%;
}

background:url为图片路径,也可以直接使用链接。 background-repeat:若果背景图片不能全屏,那么是否平铺显示,充满屏幕 background-attachment:背景是否随着网页上下滚动而滚动,fixed为固定 background-position:图片展示大小这里设置 100%,100% 的意义为:如果背景图片不能全屏,那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

再在主题_config.yml文件中找到对应的custom_file_path

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

再将对应的#去除就可以了

博客内容透明化

NexT 主题的博客文章均是不透明的,这样读者就不能好好欣赏背景图片了,在上文中新建的style.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
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.8;
}
.main-inner {
// margin-top: 60px;
// padding: 60px 60px 60px 60px;

opacity: 0.8;
}
//侧边框的透明度设置
.sidebar {
opacity: 0.8;
}

//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.8);
}

//搜索框(local-search)的透明度设置
.popup {
opacity: 0.8;
}

更新:上述做法会导致字体透明度也被改变,很不优雅,解决方案:

删除.main-inner中的opacity选项,在上述代码后添加如下代码

1
2
3
.post-block {
background: rgba(255,255,255,0.7) none repeat scroll !important;
}

同样,此时的侧边栏头像及站点概览等透明度也被改变了,需要将

1
2
3
4
//侧边框的透明度设置
.sidebar {
opacity: 0.8;
}

改为

1
2
3
.sidebar-inner {
background: rgba(255,255,255,0.7) none repeat scroll !important;
}

(这个设置就不会改变侧边栏中头像等的透明度了,其它的欢迎自行探索)

评论区透明度

在上述代码后添加以下代码:

1
2
3
.comments {
background: rgba(255,255,255,0.7) none repeat scroll !important;
}

添加圆角

source/_data/variables.styl中输入以下代码,注意,$并不是多余的

1
2
3
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;

然后在 NexT 的配置文件 _config.next.yml 中取消 variables.styl 的注释:

1
2
custom_file_path:
variable: source/_data/variables.styl

添加阴影效果

source/_data/style.styl文件中添加如下代码

1
2
3
4
5
6
7
8
    // 主页文章添加阴影效果
.post {
margin-top: 60px;
padding: 20px;
margin-bottom: 60px;
-webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

动画

动画效果

在主题_config.yml文件中搜索motion,可更改动画效果,参考配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Use Animate.css to animate everything.
# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideDownBigOut

动画的持续速度

在主题的/source/js文件夹下可找到motion.js文件,搜索duration可更改持续时间