Hexo主题美化

发表于 更新于 分类于
Hexo主题Next的美化设置, 包括圆角以及透明度的设置

记录一下Hexo主题Next的美化设置

圆角以及透明度设置

在blog——Home下新建——data文件夹，里面新建styles.styl文件，内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

.header.header {
  opacity: 0.9;
}

.site-brand-container {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: url(/images/sidebar-bg.jpg);
  background-size: cover;
  padding: 10px;
}

.headband {
background: transparent;
height: 15px;
}

最后在blog_home目录下的_config.next.yml文件中，取消注释 style: source/_data/styles.styl
重新生成静态文件即可