Hexo博客透明背景

一直觉得默认的纯白背景有点闷，想让背景图透出来看看。但又怕整太花哨影响看文章，就想了个折中的办法——让文章区域透明起来。

效果还行，分享下怎么搞的。

操作步骤

第一步：写个透明化的小样式

在 themes\butterfly\source\css 目录下新建个文件，我直接取名 1.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
/* === 让背景透出来，但又不影响阅读 === */

/* 文章区域透明 */
#article-container,
#post,
#page {
    background: transparent !important;
    box-shadow: none !important;
}

/* 首页文章卡片也透一下 */
#recent-posts > .recent-post-item {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 侧边栏别漏了 */
#aside-content .card-widget {
    background: transparent !important;
}

/* 代码块单独处理——这个得小心，别看不清了 */
/* 深色模式用深色半透明 */
[data-theme="dark"] #article-container pre,
[data-theme="dark"] #article-container figure.highlight {
    background: rgba(40, 44, 52, 0.85) !important;
}

/* 浅色模式就用浅色半透明，加点细边框，不然和背景糊一起 */
[data-theme="light"] #article-container pre,
[data-theme="light"] #article-container figure.highlight {
    background: rgba(248, 249, 250, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

第二步：让博客知道有这个文件

打开你的主题配置文件 _config.yml，找到 inject 配置，在 head 那里加上一行：

1
- <link rel="stylesheet" href="/css/1.css">

第三步：重新部署

hexo clean && hexo g && hexo s 本地看看效果，没问题就部署上线。

几个小细节

  • 代码块稍微留了点背景，不然白底白字看不清。半透明够用，能透出背景图，又不影响看代码。
  • 深色模式也照顾到了，data-theme 那个判断就是给深色模式用的。
  • 如果文章里用了某些特殊插件，可能需要额外调整。

其实折腾这些就是图个乐，效果看得顺眼就行。要是觉得太花哨，回头再把透明度调低点也成。