Hexo之NexT主题设置背景图片

---

前言

• Hexo版本：4.2.0
• NexT版本：7.7.1
• GitHub：theme-next-pace

---

配置步骤

1）修改NexT配置文件

在NexT的配置文件中的custom_file_path参数下设置CSS样式文件style.styl的存储路径，我们可以在此文件中自定义使用自己的各种样式，此路径必须在Hexo根目录source文件夹下，建议设置成默认路径source/_data/style.styl，然后在对应路径下创建对应的style.styl文件。

2）配置style.styl文件

此脚本内容遵循CSS语法，以下是配置示例：

// Custom styles.
// 整体背景设置
body {
 	background:url(/images/adrian-Xft-JdC-Jbc-unsplash.jpg);// 设定背景图片,images同处于source文件夹下
 	background-repeat: no-repeat;// 设定背景图片非重复填充
    background-attachment:fixed;// 设置背景图片不随页面滚动
    background-position:50% 50%;// 设置背景图片位置
	background-size: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
}

// 页面头样式属性
.header-inner {
  // 也可以同时定义背景色
  // background: #ddd 
  // 透明度
  // opacity: 0.8;
}
// sidebar侧边工具栏样式属性
.sidebar{
    // 动画过渡时间
	transition-duration: 0.4s;
    // 透明度
	opacity: 0.8
}
// 标题样式
.posts-expand .post-title-link {
	// 设置字体颜色
	color: #222;
}

// 文章版块样式
.post-block {
    //background: var(--content-bg-color);
	background: #fff
    border-radius: initial;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    padding: 40px;
}

3）重新生成Hexo博客

重新生成Hexo博客，并验证配置结果

hexo clean && hexo g && hexo s

4）More

类似的，我们也可以通过浏览器的F12进入开发者模式并使用鼠标点击来获取CSS样式名，并在此文件中设置对应的样式属性来实现各种自定义修改的CSS样式

---

End~