next主题美化——背景图片、页面透明化、阴影、圆角、动画

最新推荐文章于 2024-09-14 08:08:58 发布

原创

最新推荐文章于 2024-09-14 08:08:58 发布 · 5.3k 阅读

标签

#hexo

本文介绍了如何为NexT主题博客添加背景图片并调整透明度，包括设置背景图片路径、透明度，以及对主要内容、侧边栏、评论区的透明度进行个性化设置。同时，还涉及到了圆角、阴影效果和动画效果的添加，以提升博客的整体视觉体验。

本文首发于我的个人博客
前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片

next版本：8.2.1

添加背景图片

把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码

body {
   
   
 	background:url(/images/background.jpg);
 	background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
}

background:url为图片路径，也可以直接使用链接。
background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
background-attachment：背景是否随着网页上下滚动而滚动，fixed为固定
background-position：图片展示大小这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

再在主题_config.yml文件中找到对应的custom_file_path

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl