Next 主题自定义

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

通过 npm 安装的插件毕竟是其他大佬们写好集成的，我们拿来直接用就可以，但是这也局限了自己 Blog 的风格。所以，我们有必要（或者有需要）通过自定义样式来修改 Blog 的细微之处。

启用自定义样式文件

我们可以根据自己的需求在主题配置文件 _config.next.yml 中启用相对应的自定义文件，这里我们需要给博客添加背景以及方框圆角配置，于是我们需要将 _config.next.yml 文件中相应位置取消注释：

1
2
3
4
5
6
7
8
9
10
11
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

其实，在我们站点目录 <hexo-site>/source/ 下是不存在 _data 这一文件夹的，当然也没有 _styles.styl ；所以我们需要新建这两个文件。

1
2
3
cd <hexo-site>/source
mkdir _data
touch styles.styl variables.styl

添加自定义样式

文件创建好后，我们就可以向对应文件中添加 css 样式，以配置个性化。

  • 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
40
41
42
43
44
45
46
47
48
49
50
// 添加背景图片
body {
    background: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed; //不重复
    background-size: cover;      //填充
    background-position: 50% 50%;
}

// 侧边栏中向上箭头方框圆角
.back-to-top {
  border-radius: 100px;
}

// 阅读按钮 透明设置
.btn {
  background: rgba(255,255,255,0.5);
}

//  文章内容上方留白
.main-inner {
  margin-top: 40px;
}

//  导航栏留白，上方圆角，下层白色
.header-inner {
  margin-top: 20px;
  border-radius: 25px 25px 20px 20px;
}

// 导航栏上方留白，上层黑色
.site-brand-container {
  border-radius: 20px 20px 0px 0px;
  padding-top: 20px;
}

//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.9;
  border-radius: 0px 0px 20px 20px;
}
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}
//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}
  • variables.styl
1
2
3
4
5
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;
// 设置文章内容透明
$content-bg-color        = rgba(255,255,255,0.9);

参考链接

[1] https://tding.top/archives/761b6f4d.html