next主题美化——背景图片、页面透明化、阴影、圆角、动画

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

next版本：8.2.1

添加背景图片

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

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

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文件中可以使博客内容透明化：

//博客内容透明化
//文章内容的透明度设置
.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选项，在上述代码后添加如下代码

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

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

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

改为

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

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

评论区透明度

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

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

添加圆角

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

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

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

custom_file_path:
  variable: source/_data/variables.styl

添加阴影效果

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

	// 主页文章添加阴影效果
.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，可更改动画效果，参考配置如下

# 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可更改持续时间