Hexo-Next博客设置背景图片-界面优化

文章首发于：My Blog 欢迎大佬们前来逛逛

添加背景图片

在blog的根目录下的source文件夹下新建_data文件夹，并且新建style.styl文件

路径如下所示：

F:\hexo\blog\source\_data\styles.styl

之后在Next主题配置文件中中找到：custom_file_path 取消style的注释，意味着启用这个文件。

打开复制粘贴如下内容：

body {
 	background:url(/images/background.png);
 	background-repeat: no-repeat;
    background-attachment: fixed; //是否滚动，fixed固定
    background-size: cover;      //填充
    background-position: center;
}

• background: url：你的背景图片的地址，放置于Next主题文件下的source/images/background.png

• fixed：表示是否随鼠标滚动，选择fixed固定

• size：表示填充

• posi：表示位置

设置背景透明

还是在这个styles.style文件里面，接着上面的内容下面直接复制粘贴：

//文章背板的颜色rgb
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{
	background: #f5f5f56b;		//此处使用十六进制颜色代码，			也可以使用rgba进行调色，
    							//实际效果为白色透明色底板				rgba的第四参数即为透明度
}
body{				//修改主体字体颜色
  color: #000;		//纯黑
}
.posts-expand .post-title-link {	//标题颜色
    color: #000;				//首页文章标题颜色， （默认为灰辨识度不高）
}
.posts-expand .post-meta-container {	//标题下的日期颜色
    color: #880000;				//此处修改为红色，可自行调用rgb调色
}

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

//菜单栏的调色
.header-inner {		
  background: rgba(255,255,255,0.7);
}
//搜索框透明
.popup {		
  opacity: 0.5;
}

.main-inner {
    background-color: rgba(255, 255, 255, 0);  //主体背景透明
    padding: 0px 40px 40px 40px;  //调整组件位置
}

其中所有的内容都有注释，可以自己调节

注意：0为完全透明，1为完全不透明

---

边框圆角设置

在 style.style同级文件夹下新建：variables.styl，并且在主题配置文件中同样取消custom_file_path的variable的注释，代表启用variable

然后打开这个文件，输入以下内容：

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

其中 数值表示圆角的弧度，可以自己设置

---

设置页面宽度

打开主题文件下：source/css/_varibles/Pisces.styl文件.

然后修改以下内容：

即注释掉第二三行，然后添加下面的两条语句：

$content-desktop-large   = 70em
$content-desktop-largest = 85%

其中的参数同样可以自己修改。

---