极客空间

不要仰望别人,自己亦是星辰。

Hexo及CSS入坑建议&Next主题暗黑模式样式修复

前言:

一切都是因为一只蝙蝠 😂

image

为什么把两篇文章写一块,当然是为了凑字数啦(滑稽)

站长本人没有很深的CSS基础,所以这篇文章不是很严谨,大家凑活看蛤
这里写几个对新手的建议,希望能帮助大家!


第一条建议:

学生党可能没钱租用服务器,都把Hexo搭建到了Github Pages上面或者是coding上面,但是无论是Github Pages还是coding的Pages服务
他们服务器都在外国,很不利于国内高速访问,我提供两个方法:

第一个是七牛OSS,就是七牛的对象储存服务,在设置里面打开Pages服务就可以了,当然别的厂家的OSS也可以用,比如阿里云OSS。缺陷是,HTTPS仍然是收费的,但是你可以使用HTTP服务

第二个方法就是使用阿里云的学生机,不止阿里云,腾讯云也有学生机,而且价钱都是一个月9.5人民币,1核2G内存,5M带宽,40G储存,流量100G,不香么?(斜眼笑)

大家看我的续费窗口:
(斜眼笑)不香么?
image
再看我的资源占用(运行了5个网站,包括一个私有云,一个PYONE,三个静态)
根本用不完的好么。
image

用法就是,百度搜 阿里云学生机,或者云翼计划
只要你的实名认证是24岁以下,你就能一直用,站长还能用6年(斜眼笑)

当然使用阿里云服务器,有个很大的关要过,就是备案,备案比较麻烦。唔。大家自己考量一下这两个方法

这里感谢两名酷友:@晴初_back http://www.coolapk.com/u/2335206
感谢他写的CSS教程,给我了很大启发

@我是天小正 http://www.coolapk.com/u/2830293
使用了他的素材,我做出了我的图文封面。

强烈建议大家,关注上面两个大神!


第二条建议:

初学者使用浏览器的审查元素时,因为全是英文,所以可能看的不太懂,这里推荐
Edge chromium版本,最新的Edge浏览器对开发者工具进行了本地化支持,并且提交给了谷歌,估计过不了多久Chrome浏览器就能用上中文的开发者工具

image

看图:Edge的控制台是中文的


正文开始:

距离写这篇文章三天前,Next主题发布了最新的7.7.2版本,因为一只蝙蝠的缘故,站长在家里面上网课,闲暇之余,就更新了最新版。打开GitHub的release页面。
查看新特征:

🌟 New Features

Native Dark Mode support (#1386)

1
+ darkmode: true

新特征只更新了:新增了暗黑模式。随着安卓10普及,Windows10和macOS均加入了暗黑模式。这个功能真的太香了。

发现问题

下图是正常情况下本站的样式

image

然后,,,额,下图就是样式混乱下的暗黑模式

image

可以看出来,因为背景图片的缘故,标题文本很不突出,基本上无法阅读,还有别的一些样式问题。

寻找原因

想必大家都会自己在网站上面添加很多的自定义CSS代码。

本站就添加了文章框和边框的半透明,阴影,网页背景,还有主题色的改变。

但是在启用暗黑模式之后,自己添加的CSS就和暗黑模式的新样式产生了冲突。

就是说在暗黑模式下,你添加的自定义CSS任然处于启用状态。

那么要怎么才能关掉你的自定义呢。

接下来:

解决问题

先看github的版本对比。

点我进入

搜索 darkmode

image

终于在一个source/css/_colors.styl
文件里面发现了暗黑模式的样式

既然发现了判断暗黑模式的样式,那么可以提取出来他的格式,然后

新建一个样式,使用上面发现的格式

然后样式内容就反其道而行,把你的自定义CSS
全部复制到里面,然后,一个个修改为适用于黑暗模式的样式

这是我提取的格式,看图片里面的15行

1
2
3
4
5
6

if (hexo-config('darkmode')) {
@media (prefers-color-scheme: dark) {
//这里填写在暗黑模式下面的样式
}
}

例如:
以下是我原来的自定义CSS, 注意看我的注释。

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
body { 
background: url("/images/bg08.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
//添加背景图片
//半透明开始
.comments {
background: rgba(255,255,255,0.60) none repeat scroll !important;
}
.post-block {
background: rgba(255,255,255,0.60) none repeat scroll !important;
}
.header-inner {
background: rgba(255,255,255,0.60) none repeat scroll !important;
}
.sidebar {
background: rgba(255,255,255,0) none repeat scroll !important;
}
.sidebar-inner {
background: rgba(255,255,255,0.60) none repeat scroll !important;
}
.pagination {
background: rgba(255,255,255,0.60) none repeat scroll !important;
}
//半透明结束
.headband {
background: #42A5F5 !important;
}
.site-meta {
background: #42A5F5 !important; //这里改了网址标题的那个框框
}
.footer-inner {
color: #555 !important; //这是最底部文字的颜色
}
//针对颜色的修改

上述代码,在暗黑模式下面运行,就会出现样式混乱的问题

然后把格式用上

这里我是这么用的。

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
if (hexo-config('darkmode')) {
@media (prefers-color-scheme: dark) {
//以下都是复制了原本修改的CSS,然后自己修改为适合暗黑模式的样式
body {
background: #121212; //背景调为黑色
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
//半透明改为不透明,颜色为黑色
.comments {
background: rgba(29,29,29,1) none repeat scroll !important;
}
.post-block {
background: rgba(29,29,29,1) none repeat scroll !important;
}
.header-inner {
background: rgba(29,29,29,1) none repeat scroll !important;
}
.sidebar {
background: rgba(29,29,29,1) none repeat scroll !important;
}
.sidebar-inner {
background: rgba(29,29,29,1) none repeat scroll !important;
}
.pagination {
background: rgba(29,29,29,1) none repeat scroll !important;
}
//半透明改为不透明,颜色为黑色
.headband {
background: #42A5F5 !important;
}

.site-meta {
background: #333 !important; //改这里是为了把网址标题那里改成黑色的
}
.footer-inner {
color: #e1e1e1 !important; //这是底部文字的颜色改为白色
}

//此处修复上面的正常模式下的两边变黑
.site-brand-container {
background: #333;
}

blockquote { //这里修改了引用文字的颜色
color: #F5F5F5;
}
}
}

把带有格式的CSS复制到你的样式表里面。然后在根据效果再完善。

总之,就是把不顺眼的颜色调过来,对比度不强的文字改过来。

再次编译网站,可以发现已经能正常显示了:

image

当然在改颜色的过程中,可能会比较麻烦,用好浏览器的审查元素会对你帮助很大,当然不能全部用纯黑色,实在辣眼睛。

我这里列出几个Next暗黑模式内置的颜色配置:

1
2
3
4
5
6
7
8
9
10
11
--body-bg-color: #121212;
--content-bg-color: #1d1d1d;
--card-bg-color: #282828;
--text-color: #e1e1e1;
--link-color: #e1e1e1;
--link-hover-color: #fff;
--brand-color: #fff;
--brand-hover-color: #fff;
--table-row-odd-bg-color: #282828;
--table-row-hover-bg-color: #363636;
--menu-item-bg-color: #333;

成品展示

image

欢迎来我的网站查看效果!😄😄😄😄😄😄

好了写到这就没了。

看官若是觉得不错,就打发点猫粮钱吧