【主题美化系列】NexT7主题添加背景图片

> 预览：看这里

NexT主题版本

• 测试版本： – NexT.Gemini v7.7.2

• 其他版本：

  *\themes\next-7.7.2\source\css\_common\components\pages\pages.styl 能找到此页面样式文件的均可。

• 低版本的，已经有很多教程来更改背景图了，这里不多说。

添加背景

• 在上述目录下的pages.styl 添加以下代码，图片的url可以是网图，也可以是站点imags目录下图片，建议添加至文本开头

body {
  background:url(/images/ywy_bg.png);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:50% 50%;
}

• 刷新页面即可看到效果

设置透明度

• 文章版块透明度

   

  使用F12浏览器的调试工具，首先定位到.post-block 样式，但opacity 属性会被覆盖，最终找到element.style 样式。但是该样式，我未定位到对应的css文件位置，因此有了以下操作:

  1. 添加以下配置信息

  # ---------------------------------------------------------------
  # Post Settings
  # See: https://theme-next.org/docs/theme-settings/posts
  # ---------------------------------------------------------------
  ​
  # 更改post_block透明度
  post_block:
    enable: true
    opacity: 0.9

  1. 添加属性

  body {
    background:url(/images/ywy_bg.png);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
      
    if (hexo-config('post_block.enable')) {
      opacity: hexo-config('post_block.opacity')
    }
  }

  1. 小心得

  在post.styl 中get到新技能，styl文件如何读取配置_config.yml文件信息？

  原样式：

  .use-motion {
    if (hexo-config('motion.transition.post_block')) {
      .post-block, .pagination, .comments {
        opacity: 0;
      }
    }

  可见，hexo使用了一个函数hexo-config() 函数读取yml文件。这样以后在需要添加样式什么的，是不是也这样操作一下，在也不用到处寻找css样式属性了？

总结

1. 浏览器工具调试定位

2. 尝试更改其样式属性，观察是否生效

3. 使用IDEA工具定位属性样式位置，不借助开发工具，找起来很痛苦的

4. 尽量添加属性配置到_config.yml文件中，便于后期更改与停用