记录笔者为Hexo添加背景图片，以及修改Hexo背景透明度的过程

  笔者经过几天惨痛教训得知一件事——想要修改好主题，找对修改路径是最重要的！！！

为Hexo添加背景图片

  想要添加背景图片，先找到你所选next主题下的index.styl文件。笔者选的主题是Gemini,所以笔者的路径就为blog\themes\next\source\css\_schemes\Gemini\index.styl。

  打开此文件后，在全文末尾添加如下代码即可。

  不要忘了图片的存储路径是在blog\themes\next\source\images下的background.jpg哦。

1
2
3
4
5
6
7
8

body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

修改Hexo原本主题的透明度

  加上图片后，发现博客的各个框图会挡住图片，那为了露出原本的图，就需要把每一个框都改成略微透明一点才行。

  打开路径为blog\themes\next\source\css\_schemes\Pisces\_header.styl的文件，在代码末尾增加如下代码即可。

1
2
3

.header-inner{
  opacity: 0.8;
}

  打开路径为blog\themes\next\source\css\_schemes\Gemini\index.styl的文件，在如下代码中添加一行即可。

1
2
3
4
5
6
7

// Post blocks.
.content-wrap {
  background: initial;
  box-shadow: initial;
  padding: initial;
  opacity: 0.8 //这一行是添加的
}

  打开路径为blog\themes\next\source\css\_schemes\Pisces\_sidebar.styl的文件，在如下代码中添加一行即可。

1
2
3
4
5
6
7
8
9
10
11
12

.sidebar {
  background: var(--body-bg-color);
  box-shadow: none;
  margin-top: 100%;
  position: static;
  width: $sidebar-desktop;
  opacity: 0.8 //这一行是添加的

  +tablet-mobile() {
    display: none;
  }
}

修改页脚的字

  整个页面添加了背景页脚就看不清了，如图，那这时需要去改变页脚的文字颜色。

  惯例先上路径，先查看到页脚模块继承的是.footer.footer，在自己博客下路径blog\themes\next\source\css\_common\outline\footer\footer.styl中找到footer.styl这个文件进行修改。

1
2
3
4
5
6
7
8
9
10
11
12

  .footer {
  color: $grey-dark; //修改这里的代码
  font-size: $font-size-small;
  padding: 20px 0;

  &.footer-fixed {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
  }
}

  可以看见代码的color这一块是暗灰色$grey-dark，只要把它的属性改变就可以改变页脚的颜色了。由于笔者背景图片很花，就将这块的颜色改成深黑色$black-deep了。

  修改后的效果如图所示，显而易见地变清楚了很多。

  现在用户的图标仿佛格格不入。别着急。打开路径为blog\themes\next下的_config.yml文件，按下crtl + F打开搜索框，输入copyright进行跳转，然后修改跳转到这里后代码里的的color属性。

1
2
3
4
5
6
7
8
9
10
11
12

# Icon between year and copyright info.
icon:
  # Icon name in Font Awesome. See: https://fontawesome.com/icons
  name: fa fa-user
  # If you want to animate the icon, set it to true.
  animated: false
  # Change the color of icon, using Hex Code.
  color: "#222" # 修改这里（#222 是十六进制的深黑色）

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: 来自寒流，爱您。

  修改完毕！