Hexo-NexT 设置博客背景图片

1. 设置背景图片

将想要的背景图片放入 themes/next/source/images。打开 themes/next/source/css/ _custom/custom.styl 文件,这个是 Next 故意留给用户自己个性化定制一些样式的文件,添加以下代码即可。

实际上我的版本里没有_custom,通过新建目录无法实现。我是在 themes/next/source/css/_schemes/Gemini/index.styl 中添加的代码,Gemini是我的 next 的布局样式。

在写这篇博客的过程中,又尝试了下将代码添加到 blog_root/source/_data/styles.style 下,设置成功。如果没有这个目录,直接新建即可。

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

2. 博客内容透明化

NexT 主题的博客文章均是不透明的,这样读者就不能好好欣赏背景图片了,下面的方法可以使博客内容透明化:

在 blog_root/source/_data/styles.style 中添加以下内容:

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

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

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

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

注意:其中 header-inner 不能使用 opacity 进行配置。因为 header-inner 包含 header.swig 中的所有内容。若使用 opacity 进行配置,子结点会出很多问题。

3. 参考

上一篇:使用GitHub Actions实现Hexo博客自动发布


下一篇:Hexo-NexT 设置博客背景图片