Hexo的NexT主题更改页面样式

发表于 分类于 阅读次数： 本文字数： 1.6k 阅读时长 ≈ 6 分钟

省流：把这亿点CSS代码复制粘贴到文件./source/_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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* custom styles */
:root {
    --btn-default-bg: transparent;
    --btn-default-color: var(--theme-color);
    --btn-default-border-color: var(--theme-color);
    --btn-default-hover-bg: var(--theme-color);
    --btn-default-hover-border-color: var(--theme-color);
    --link-hover-color: var(--theme-color);
}
/* theme widgets */
.sidebar-toc-active .sidebar-nav-toc,
.sidebar-overview-active .sidebar-nav-overview {
    border-bottom-color: var(--theme-color);
    color: var(--theme-color);
}
.post-toc .nav .active > a {
    border-bottom-color: var(--theme-color);
    color: var(--theme-color);
}
.post-toc .nav .active-current > a {
    color: var(--theme-color);
}
/* borders */
.post-copyright ul {
    border-left: 8px solid var(--theme-color);
}
.reading-progress-bar {
    background: var(--theme-color);
}
/* selections */
::selection {
    background: var(--theme-color);
}
.site-title::selection {
    background: gold;
    color: var(--theme-color);
}
.site-subtitle::selection {
    background: gold;
    color: var(--theme-color);
}
/* on hover */
.menu-item:hover .badge {
    background: var(--link-hover-color);
}
.sidebar-nav li:hover {
    color: var(--link-hover-color);
}
.sidebar-toc-active .sidebar-nav-toc:hover,
.sidebar-overview-active .sidebar-nav-overview:hover {
    color: var(--link-hover-color);
}
.post-toc .nav .active-current > a:hover {
    color: var(--link-hover-color);
}
.posts-expand .post-title-link:hover {
    color: var(--link-hover-color);
}
.posts-expand .post-title-link::before {
    background: var(--link-hover-color);
}
.posts-collapse .post-content .post-header:hover {
    border-bottom-color: var(--link-hover-color);
}
.posts-collapse .post-content .post-header:hover::before {
    background: var(--link-hover-color);
}
.posts-collapse .post-content .post-header:hover time {
    color: var(--link-hover-color);
}
.posts-collapse .post-content .post-title:hover a {
    color: var(--link-hover-color);
}
/* image size */
.post-body img {
    margin-top: 0.75em;
    margin-bottom: 1.75em;
    width: 75%;
}
/* fix ( 1) */
.category-all-page .category-list-count:last-child::after {
    content: ' ) '
}

上回说到

正如前面说的，我觉得NexT主题默认的页面配色不咋好看。如果你也有同感，可以照着这篇文章，用CSS自定义某些控件的颜色和样式。本文以.表示Hexo本地仓库的路径。

技术准备

假设准备搭建个人博客的读者已经学会或可以做到：

  • 用Shell在自己的电脑上执行命令；
  • 了解YAML的基本语法；
  • 大概看懂并“照葫芦画瓢”编写简单的HTML和CSS代码；
  • 阅读（或借助翻译阅读）简单的英文技术文档。

修改页面样式

  1. 在_config.next.yml文件里找到custom_file_path，取消注释下面#style: source/_data/styles.styl一行，即删除开头的#。这样可以在styles.styl里用CSS自定义控件样式。
  2. 在目录./sources/_data下新建文件styles.styl，然后仔细观察网页上的每个控件，有瞅着样式不好看的就改。本文以“阅读全文”按钮为例，演示如何覆盖main.css里原本的样式，并讲解一点简单的HTML和CSS。本文剩余内容如果不想看，可以直接跳过，复制上面“省流版”中的代码，粘贴到styles.styl文件，保存，然后重新生成静态文件并部署上线。
    1
    hexo g -d # g for generate, d for deploy
  3. 谢谢你给我面子接着往下看：）生成的文件在目录./public下，打开./public/css/main.css，可以看到定义了默认页面样式的CSS代码。CSS中以--开头的是变量，比如--theme-color，而在读取变量的值时用var(--theme-color)。如果按前面说的，在_config.next.yml里有如下设置，
    1
    2
    3
    4
    # Browser header panel color.
    theme_color:
      light: "#fc6423"
      dark: "#e34603"
    那么--theme-color的值在浅色模式下就是#fc6423，而在深色模式下是#e34603。也就是说，在生成的./public/css/main.css里会设置为
    1
    2
    3
    4
    5
    6
    7
    8
    :root {
      --theme-color: #fc6423;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --theme-color: #e34603;
      }
    }
  4. 如果像这里说的那样用了<!-- more -->，那在主页上会显示这样的“阅读全文”按钮。现在比方说想给原本是黑白色的按钮换一种样式。以换为本站这样为例，可以看到./public/css/main.css里面有这样的内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    :root {
      --btn-default-bg: #fff;
      --btn-default-color: #555;
      --btn-default-border-color: #555;
      --btn-default-hover-bg: #222;
      --btn-default-hover-color: #fff;
      --btn-default-hover-border-color: #222;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --btn-default-bg: #222;
        --btn-default-color: #ccc;
        --btn-default-border-color: #555;
        --btn-default-hover-bg: #666;
        --btn-default-hover-color: #ccc;
        --btn-default-hover-border-color: #666;
      }
    }
    每个变量的含义与名字相对应，其中btn和bg分别为button（按钮）和background（背景）的缩写。可以在./source/_data/styles.styl中覆盖默认的样式，让按钮的样式颜色和主题颜色风格一致：在styles.styl里写入
    1
    2
    3
    4
    5
    6
    7
    :root {
      --btn-default-bg: transparent;
      --btn-default-color: var(--theme-color);
      --btn-default-border-color: var(--theme-color);
      --btn-default-hover-bg: var(--theme-color);
      --btn-default-hover-border-color: var(--theme-color);
    }
  5. 其他部分的CSS代码我懒得一条一条解释了，基本上都是望文生义，想看的小伙伴可以自己看看改改试试，完了对比一下修改前后的样式。

HTML/CSS简介

这里以下图所示的“阅读全文”按钮为例，简单讲一点皮毛知识。

这个按钮对应的HTML代码是这样的：

1
2
3
<div class="post-button">
  <a class="btn" href="/hexo-next-config/#more" rel="contents">阅读全文</a>
</div>

其中<div>和<a>称为标记（tag），class、href、rel称为属性（attribute）。class属性用来给HTML元素（element）指定类名，这样在CSS里就能自定义这个控件的样式风格。后面也会讲到，在JavaScript脚本里也可以利用元素的class和id属性控制更复杂的行为。可以看到，在main.css里面有这样的CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.btn {
  background: var(--btn-default-bg);
  border: 2px solid var(--btn-default-border-color);
  border-radius: 2px;
  color: var(--btn-default-color);
  display: inline-block;
  font-size: 0.875em;
  line-height: 2;
  padding: 0 20px;
  transition: background-color 0.2s ease-in-out;
}
.btn:hover {
  background: var(--btn-default-hover-bg);
  border-color: var(--btn-default-hover-border-color);
  color: var(--btn-default-hover-color);
}

所以不需要修改这段默认的CSS，只要在styles.styl里修改这些--btn-default-*变量的值就行了。

  • 像.btn { ... }这样以.开头的CSS，是对应HTML属性class="btn"控件的样式；而.btn:hover { ... }则是对应HTML属性class="btn"的控件在鼠标悬停时的样式。
    1
    2
    3
    <div class="btn">
      <div>Some other elements</div>
    </div>
  • 像a { ... }这样不以.开头的CSS，则是对应HTML标记为<a>控件的样式。
    1
    <a href="https://example.iw17.cc" target="_blank">Example</a>

还有时会遇到这样的CSS代码

1
2
3
4
5
6
/* image size */
.post-body img {
    margin-top: 0.75em;
    margin-bottom: 1.75em;
    width: 75%;
}
  • 像.post-body img { ... }这样在大括号前以空格分隔的，是在HTML属性class="post-body"的控件下，标记为<img>的一级或多级子控件的样式；
    1
    2
    3
    4
    5
    6
    <div class="post-body">
      <img src="/example.jpg" alt="Example text" /><!-- yes -->
      <div>
        <img src="/example1.jpg" alt="Example text" /><!-- yes -->
      </div>
    </div>
  • 而像.post-body > img { ... }这样以大于号分隔的，就只对一级子控件有效。
    1
    2
    3
    4
    5
    6
    <div class="post-body">
      <img src="/example.jpg" alt="Example text" /><!-- yes -->
      <div>
        <img src="/example1.jpg" alt="Example text" /><!-- no -->
      </div>
    </div>

词汇表

英文 中文
attribute 属性
background 背景
border 边界
button 按钮
class 类
collapse 收起
content 内容
default 默认
element 元素
expand 展开
hover 悬停
link 链接
menu 菜单
sidebar 侧边栏
site 站点
subtitle 副标题
tag 标记
theme 主题
title 标题
transparent 透明的