【主题美化系列】NexT主题样式调色

预览: 看这里

扩展功能题要

此篇文章能学到什么？

• 一键换肤有木有？

  tips：将diy_css.enable值定义成编号或者主题名称，在base.styl中校验读取相应的颜色值。

• 随机换肤是否可行？

  tips：采用标号开启，随机数值开启。

• 布局管理可行否？

• NexT主题有几款已经开发过的Schemes，如 Muse| Mist|Pisces| Gemini，可以进行二次开发？

操作流程

• 使用DevTools调试工具定位
• 定位主题样式styl文件
• 定位属性或者覆盖属性
• 尽量添加yml配置文件中

配色方案

• 添加博客背景，就已经定义了该博客的主色调——紫色
• 备份原主题配色方案
• 直接进行修改——直接修改颜色，不修改变量名称
• 间接进行修改——结合hexo渲染语法，属性配置到_config.yml 文件中

定位修改

修改主色调

目标位置：

*\themes\next-7.7.2\source\css\_variables\base.styl

原配色：

黑色系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5BhImx9-1585648290286)(\images\2020\03\30\1585582083.png)]

目标色：

紫色系

目标定位：

$whitesmoke   = #daa5ff; // 菜单栏当前菜单，归档线条
$gainsboro    = #e3c6f0; // 菜单栏头像边框，分割线。单行代码块
$gray-lighter = #cccedd; // 菜单栏子标题
$grey-light   = #ab2acc; // 菜单栏文章计数器
$grey         = #6a2dbb; // 时间节点
$grey-dark    = #67439a; // 菜单栏博主卡片区文字【描述|日志|分类|标签】
$grey-dim     = #9059bf;
$black-light  = #3d155a;  // 文章正文颜色
$black-dim    = #5b2293;
$black-deep   = #6947bb;  // 菜单栏背景

修改github logo样式

目标位置：

*\themes\next-7.7.2\source\css\_common\outline\header\github-banner.styl

目标定位：

svg {
    border: 0;
    color: white;
    fill: $black-dim;  // 更换为紫色系
    position: absolute;
    right: 0;
    top: 0;
    z-index: $zindex-0;
  }

同样，也可以修改小手抖动频率哦，但没啥必要咯

修改文章阅读进度条

目标位置：

*\themes\next-7.7.2\source\css\_common\components\reading-progress.styl

目标定位：

.reading-progress-bar {
  background: unquote(hexo-config('reading_progress.color'));  // 去_config.yml配置即可
  display: block;
  height: unquote(hexo-config('reading_progress.height'));
  left: 0;
  position: fixed;
  if (hexo-config('reading_progress.position') == 'bottom') {
    bottom: 0;
  } else {
    top: 0;
  }
  width: 0;
  z-index: $zindex-5;
}

修改配置文件：

# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#9059bf"
  height: 5px

修改文章目录配色

位置与上述配色一样是*\base.styl

$orange       = $grey-dark;  // 与菜单栏博主卡片区文字【描述|日志|分类|标签】同色调

独创秘籍

• 自定义样式配置_config.yml配置文件

# 自定义样式
diy_css:
  enable: true
  global:
    link-color: '#770'
    link-color-dark: 
    link-hover-color: 
    link-hover-color-dark: 
    link-color-light: '#971FF2'
    link-decoration-color:
    menu-item-bg-color-dark: '#5b2293'

• 在*\base.styl中，添加函数get_color_info(config,default_color)，如果有配置自定义参数，则读取，否则使用默认：

// 读取配置文件中的颜色信息
get_color_info(config, default_color) {
  $color_info = hexo-config('diy_css.global.' + config);  // 读取颜色配置，如#770
  return (hexo-config('diy_css.enable') and $color_info is a 'string') ? unquote($color_info) : default_color;  // 判断是否使用自定义，然后不为空，则读取，否则默认
}
...
// Global link color.
$link-color                   = get_color_info('link-color',$black-light);
$link-color-dark              = get_color_info('link-color-dark',#e1e1e1);
$link-hover-color             = get_color_info('link-hover-color',$grey-light);
$link-hover-color-dark        = get_color_info('link-hover-color-dark',white);
$link-decoration-color        = get_color_info('link-decoration-color',$grey-dark);

说明一下：对于颜色的配置读取，需要使用unquote("#770") ，第一次见到*\base.styl 中stylus语法是使用了其他的拼接方式，如unit做拼接或者直接使用字符串格式，均未能成功实现，最后在reading-progress.styl 中找到了答案，就很nice了！

.reading-progress-bar {
  background: unquote(hexo-config('reading_progress.color')); // 看这里，嘿嘿！
  display: block;
  height: unquote(hexo-config('reading_progress.height'));
  left: 0;
  position: fixed;
  if (hexo-config('reading_progress.position') == 'bottom') {
    bottom: 0;
  } else {
    top: 0;
  }
  width: 0;
  z-index: $zindex-5;
}