想着给butterfly的作者大大贡献点代码，最终以失败告终

[bl-sun]

从yml配置文件中提取配置转为CSS变量

最近为了给自己的小破站配置一下半透明背景，看了很多代码。看了代码的逻辑大概是从yml文件中读取配置设为styl文件的变量，最后再在css文件中使用他们。感觉用代码自动的配置styl变量。于是想着给作者大大贡献一些代码。但是最终我没能成功，但是又可以生成css变量。emmm....

看了好久的代码我不许别人不知道，呜呜

成果展示

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

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);
}

最后

希望能对作者大大有用。其实仔细一想如果将所有的变量都换成CSS变量的话工作量还挺大，感觉自己给大大添麻烦了，对不起！。

[jerryc127]

直接通过 Inject 插入 css 不是更加方便么

[bl-sun]

是的呢，所以没啥用，┭┮﹏┭┮