Hexo 界面美化-背景设置与文本透明及圆角化

发表于 更新于 分类于 阅读次数： 本文字数： 3.3k 阅读时长 ≈ 3 分钟

虽然之前有开个小背景motion，但是很明显的，对比其他牛人的博客，自己的博客显得比较单调和没怎么做视图优化，所以这几天配置优化了下，也是继续踩坑的历程。其实关于背景的配置，网上教程还是不少，但是感觉很多不适合这个版本的，我是next 8.12.3 而且有些其实讲的不怎么全，下面也会提到那些被摆的时刻。

1. 背景的配置

背景的配置其实可以参考那时候侧边栏的头像设定，也是URL指向你所选定的图片路径，注意文件后缀

（png/jpg/gif...）就行。不过那时候你只要在next.yml里面设定下就行，这边背景的配置就是需要自

己写下。

下面先讲一种比较没有后遗症的方法

1.1 将背景图片放入themes/next/source/images中

文件命名的话自己设置个比如：

background.jpg

1.2 在next.yml中开启下custom_file

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

这边就是把这个style前面的注释去掉即可然后转到source/_data/styles.styl如果没有_data这个文件

夹（新建即可），文件同理，然后写入下面的代码，背景文件名替换成自己的就行。

1
2
3
4
5
6
body {
 	background:url(/images/background.jpg);
 	background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
background-attachment：背景是否随着网页上下滚动而滚动，fixed为固定
background-position：对齐位置，上面这样配置就是图片中心和网页中心是重合的

如果main.styl有报错的话可能是你写入的代码有错误，跟着报错信息改下就行。

前面说这种方法比较没有后遗症是因为用到next下专门让大家用来魔改的custom_file_path，因为你是改动自己新建的文件然后引入使用而已，所以你如果以后想要改动主题就比较方便，不用怎么大改，唉，不过我在跟辉聊天之前就是直接修改next里面的source文件，也就是下面我要讲的有点后遗症的方案

2. 背景的配置另法

themes\next\source\css\_schemes\Gemini在这个路径下的index_styl文件中最后加入

1
2
3
4
5
6
body {
 	background:url(/images/background.jpg);
 	background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
}

然后重新部署下就可以看到效果，可以现在本地康康再部署到云上。

第二种方法虽然比较简单但是为了后面不留坑的话还是用前面那种方法

3. 文本透明及圆角化

为了让整体的视觉效果更佳，我们就想着如果可以实现文本、侧边栏等的透明化岂不是美哉，这样也更能凸显我们的背景效果。

文本透明的话其实方案还是挺多的也可以参考前面的那种引入的方法，在css里面新建文件然后在主题配置文件里面有个引入指向的语句也可以实现。这边的话我采用的还是直接修改已有的配置文件。

3.1 文本透明

themes\next\source\css\_schemes\Pisces在这个路径下修改文件

改变主页文章模块的透明度 - - - 找到index.styl的.main-inner

1
2
3
4
.main-inner {
  background: rgba(255,255,255,0.3);
  box-shadow: $box-shadow-inner;
  padding: $content-desktop-padding;

主要就是改变这个background: 后面的语句，把之前的var(…)替换掉

这样后就可以调整后面的0.3(在0-1内，0.2、0.3….)就可以实现透明度的调整，0的话就是全透明。

改变侧边栏模块的透明度 - - - 找到sidebar.styl的.sidebar-inner

1
2
3
.sidebar-inner {
  background: rgba(255,255,255,0.3);
  border-radius: $border-radius;

改变透明度的方法同上，实际上rgba()是css里的一个色系函数这边就是简单调用其他menu模块同理可改。

这边的话就是要小心不要轻易动这里面的其他地方，最好是只改动这个inner里的代码内容，不然有可能会造成网站页面的崩溃，然后千万注意 - - 在修改文件之前，最好要备份下，还记得上次我在配置背景的时候，我就去改动themes\next\layout\_scripts\vendors.njk这个的代码，然后一改完网站页面就崩了，最后找辉要了一份。如果搜到改动这个文件的相关方法，请慎行 ！！

3.2 圆角化

因为原来next自带的是方方正正的文本框，感觉逼格不怎么高，所以就想着整个圆角化的形式经过多方的思考，下面这种方案应该可以算是最轻松的，而且没有前面提到的后遗症

3.2.1 在next.yml中开启下custom_file
1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl  # 打开下这个
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl
3.2.2 在source/_data/variables.styl加入下面的代码
1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

注意$这个是必需字符，不能删除。然后还是先本地部署下，在bash里hexo s -g康康效果

最后还是艺术下