记next主题美化

1.背景修改及透明度调节

首先，我们需要启用next主题的自定义样式功能
打开blog目录下的themes/next/_config.yml文件
找到

custom_file_path: 
  #style: source/_data/styles.styl

将其前面的#去掉
新建blog目录下的source/_data/styles.styl文件，然后在文件中添加如下代码：

1.1 背景修改

body {
    background: url(../images/bg.jpg)//更换背景图片
    background-repeat: no-repeat; //不重复
    background-attachment: fixed; //是否要滚动，fixed不滚动
    background-size: cover;      //是否填充，cover填充
    background-position: center; //背景图片位置
}

1.2 颜色及透明度调节

调节背景透明度

.content-wrap {
  background: rgba(0,0,0,0.4) //调节背景透明度
}

调节侧栏透明度

.sidebar {
  opacity: 0.8; 
}

.sidebar-inner {
  background: rgba(0,191,255,0.2) none repeat scroll !important; //调节侧栏背景透明度，不覆盖到字体，头像等
}

效果如下：

调节弹出框透明度

.popup {
  opacity: 0.8; //调节弹出框透明度
}

调节菜单栏透明度

.header-inner {
  background: rgba(0,191,255,0.2); 
}

效果如下：

但不知道为什么，透明度是改了，但点击about,archive等页面时，竟然没有任何反应
我百思不得其解，结果后来机缘巧合之下，我添加了

.content-wrap {
  background: rgba(0,0,0,0.4) //调节背景透明度
}

这一段代码，竟然就可以了，我也不知道为什么…

调节标题栏透明度

.site-brand-container{
  background: rgba(0,191,255,0.1); //调节标题栏透明度
}

效果如下：

2.侧边栏按钮修改鼠标悬停时颜色

next主题默认的颜色是灰色的，而我想要的是蓝色的
最后效果：

查看blog目录下的themes/next/source/css/_variables/base.styl文件
这个文件主要管颜色，大小和字体等，里面还有许多其他的设置，可以自己去看看
而我要修改的就是这一段代码：

$menu-item-bg-color           = $blue;
$menu-item-bg-color-dark      = $blue;

这样就大功告成了

3.文章"阅读全文"按钮颜色修改

回到blog目录下的source/_data/styles.styl文件，添加如下代码：

.btn {
    color: #49b1f5; //修改字体颜色
    background: #000000; //修改背景颜色
    border: 2px solid #49b1f5; //修改边框颜色，2px是边框宽度
}// 修改未点击时样式

.btn:hover {
  border-color: #49b1f5; //修改边框颜色
  color: #000000; //修改字体颜色
  background: #49b1f5; //修改背景颜色
}// 修改点击时样式

4.圆角修改

打开blog目录下的themes/next/_config.yml文件
找到

custom_file_path: 
  #variable: source/_data/variables.styl

将其前面的#去掉
然后新建blog目录下的source/_data/variables.styl文件，添加如下代码：

$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

到此，本文就结束了，希望这些东西能帮助到你