Next主题添加背景图片
hexo 和 Next 的版本如下:
hexo: 5.2.0 NexT: 7.8.0
操作步骤
-
进入 themes
extsourcecss 目录中 打开 main.styl 文件 在末尾添加 css 代码即可
添加背景图片
值得注意的是,在 main.styl 文件末尾写的 css 样式,会覆盖主题之前的样式。
以 body 为例,我们要先找到该标签之前的样式,复制下来,然后再此基础上进行修改。先打开自己的博客,按下 F12 检测网页,找到 body 标签。
在右侧样式预览中找到 body 标签对应的样式,点击右上角的 main.css:xxx 查看源码,将 body 标签对应的样式全部复制到
将 body 标签对应的样式全部复制到 main.styl 文件末尾
然后修改至代码如下:背景图片位于 themes extsourceimages 路径下
body { background: url(/images/background.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; color: var(--text-color); font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1em; line-height: 2; }
设置透明
单单设置了背景图片还不是很完美,我们给所有的栏目设置一个小小的透明,会显得效果很好。
同样我们要找到对应标签的源样式,再其基础上进行修改,如果你的 Next 主题版本和我相同,则可以直接复制我的。
// 侧边标题栏 .header-inner { opacity: 0.85; } // 侧边头像栏 .sidebar{ transition-duration: 0.4s; opacity: 0.85; // 透明度 } // 中心文章栏 .content { padding-top: 15px; opacity: 0.9; }
边框圆角
边框圆角看个人喜好,有的人喜欢方方正正的,有些则喜欢圆润点。在这里我给出了将侧边栏和中心文章栏的边框设置为圆角的方法,供大家参考
和之前一样,需要将源样式复制下来,如果你的 Next 主题版本和我相同,则可以直接复制我的。
// 侧边标题栏 .header-inner { border-radius: 20px 20px 20px 20px; //边框圆角 opacity: 0.85; } // 侧边头像栏 .sidebar{ transition-duration: 0.4s; opacity: 0.85; // 透明度 border-radius: 10px 10px 10px 10px; //边框圆角 } // 侧边头像框内部 .sidebar-inner { background: var(--content-bg-color); border-radius: 10px 10px 10px 10px; //边框圆角 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), 0 -1px 0.5px 0 rgba(0,0,0,0.09); box-sizing: border-box; color: var(--text-color); width: 240px; opacity: 0; } //第一个文章 .post-block { background: var(--content-bg-color); border-radius: 10px 10px 10px 10px; //边框圆角 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; } //之后的所有文章 .post-block + .post-block { border-radius: 10px 10px 10px 10px; //边框圆角 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), 0 -1px 0.5px 0 rgba(0,0,0,0.09); margin-top: 12px; }
感谢阅读! 个人博客:http://www.tonydon.club/