butterfly自定义半透明背景

直奔主题

将下面的样式写入文件source/-/css/bl-sun.css

[data-theme='light']{
    --card-bg: rgba(255, 255, 255, .8);
}
[data-theme='dark']{
    --card-bg: rgba(13, 13, 13, .6);
}

在_config.butterfly.yml配置文件中注入该样式

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/-/css/bl-sun.css">

前言

看大佬的博客是半透明的背景，真的很好看。想着给自己的也弄一个。

探索

我查了buttfly关于颜色的配置可以配置以下参数：

theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"

不知道有没有对夜间模式进行适配。于是我按下了F12，我想看看它的background样式是怎么控制。

于是我发现它是通过下面的CSS使用变量--card-bg设置了背景的颜色。

.cardHover, .error404 #error-wrap .error-content, .layout > div:first-child:not(.recent-posts), #recent-posts > .recent-post-item, #aside-content .card-widget, .layout > .recent-posts .pagination > *:not(.space) {
    // ...
    background: var(--card-bg);
    // ...
}

找到了对应的CSS变量--card-bg，接着我们可以找到--card-bg变量的定义。

[data-theme='dark'] {
    // ...
    --card-bg: #121212;
    // ...
}

通过切换主题夜间模式，可以找到日间模式的--card-bg变量定义。

:root {
    // ...
    --card-bg: #fff;
    // ...
}

我们可以找到data-theme属性的位置，是在html标签上的。

1	<html lang="zh-CN" data-theme="light"></html>

配置

最终我们可以通过注入css的方式来使我们的背景颜色透明。

将下面的样式写入文件source/-/css/bl-sun.css

[data-theme='light']{
    --card-bg: rgba(255, 255, 255, .8);
}
[data-theme='dark']{
    --card-bg: rgba(13, 13, 13, .6);
}

这里没有使用:root伪类设置日间模式的背景颜色。
这里设置的颜色是将原来Hex格式的颜色通过RGB颜色查询对照表转化为CSS格式然后调节alpha值使其变得透明。

在_config.butterfly.yml配置文件中注入该样式

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/-/css/bl-sun.css">

进一步

通过搜索--card-bg，可以发现themes/butterfly/source/css/_global/index.styl中对其进行了初始化

1 2	:root --card-bg: $card-bg

进一步，通过搜索$card-bg可以在themes/butterfly/source/css/var.styl查到如下代码。

1 2	$white = #FFFFFF $card-bg = $white

不懂.styl文件的语法，但是看起来是写死了的。

还是在themes/butterfly/source/css/var.styl文件中可以找到如下代码

1	$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue

看来是根据配置文件中设置的theme_color.main配置变量$theme-color。如此对比，可以说$card-bg就是写死了的，看来我们的方法还是挺“正规”的。

最后

感觉butterfly这部分代码有优化的空间，想要尝试给大佬做一下贡献，吼吼。

具体来说，就下面这段代码看起来重复了好多。由于一些变量如$card-bg没有使用下面这种形式的写法，导致无法自定义。如果有方法可以自动生成下面这种类型的代码，那灵活性应该会有很大的提升。

1	$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue

可行性分析

styl语法是否支持

如果支持的话，首先获取所有以theme_color开头的属性列表。然后遍历这个列表
伪代码：

1
2
3

list = hexo-config-list()
for i in list:
    ${i} = $themeColorEnable && hexo-config(i) ? convert(hexo-config(i)) : ${i}

1
2
3

reset(args)
    for arg in args
        $theme-{i} = $themeColorEnable && hexo-config('theme_color.{i}') ? convert(hexo-config('theme_color.{i}')) : $theme-{i}

成果展示

在themes\butterfly\scripts\events\stylus.js中注册一个styl函数

1
2
3

hexo.extend.filter.register('stylus:renderer', style => {
  style.define('$format_css', name => {return String(name).replace(/_/g, '-');})
})

这段代码就是注册了一个$format_css函数，它被用来将字符中的_替换为-
不用String()的话会报错，不知道是什么原因。主要参考了hexo-config()的代码。
本来想的是照着它这种读取的方式自己读取的，后来自己一调用hexo-config()就可以得到相应的键值对呢。白忙活半天

在themes\butterfly\source\css\index.styl中加入如下测试代码

//test
:root
  for prop in hexo-config('theme_color')
    --theme-{$format_css(prop[0])} convert(prop[1]) unless prop[0]=='enable'

哦对，hexo-config('theme_color')要是yml里有theme_color.light.card_bg这种三级的配置的话好像不知道会出现什么问题哎。没有尝试。

我的配置文件

theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"
  meta_theme_color_light: "rgba(255, 255, 255, .5)" # #fff
  meta_theme_color_dark: "rgba(13, 13, 13, .5)" # #0d0d0d

在themes\butterfly\source\css\index.styl中生成的样式如下：

:root {
  --theme-main: #49b1f5;
  --theme-paginator: #00c4b6;
  --theme-button-hover: #ff7242;
  --theme-text-selection: #00c4b6;
  --theme-link-color: #99a9bf;
  --theme-meta-color: #858585;
  --theme-hr-color: #a4d8fa;
  --theme-code-foreground: #f47466;
  --theme-code-background: rgba(27,31,35,0.05);
  --theme-toc-color: #00c4b6;
  --theme-blockquote-padding-color: #49b1f5;
  --theme-blockquote-background-color: #49b1f5;
  --theme-scrollbar-color: #49b1f5;
  --theme-meta-theme-color-light: rgba(255,255,255,0.5);
  --theme-meta-theme-color-dark: rgba(13,13,13,0.5);
}