Hexo 魔改(轻度) 文章主色调获取-修改为本地

如想要开启主色调,又不想搭建一个服务。可以添加一个本地获取主色调的js。
注意:有跨越问题的连接无法使用

  1. 在配置中多加一个选项

    1
    2
    3
    4
    5
    6
     # 主色调相关配置
    mainTone:
    enable: true
    mode: local # cdn/api/both/local
    api:
    cover_change: true # 整篇文章跟随cover修改主色调
  2. 引入js
    可替换为自己的js插件。

    1
    2
    3
    inject:
    head:
    - <script src="/js/ImgMainColor.js"></script>
  3. 修改 main.js

    找到 js 中的coverColor方法,大概在1240行左右。
    if (GLOBAL_CONFIG_SITE.postMainColor)之后再加一个判断if (GLOBAL_CONFIG.mainTone.mode == local)
    结构是

    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
    if (GLOBAL_CONFIG_SITE.postMainColor){
    ...
    }else if (GLOBAL_CONFIG.mainTone.mode == "local"){
    new ImgMainColor({
    src: path,
    }, function(color){
    /**
    * hex: "#c3d3fd"
    * hexa:"#c3d3fdff"
    * rgb:"rgb(195,211,253)"
    * rgba: "rgba(195,211,253,1)"
    */
    let value = color.hex
    if (getContrastYIQ(value) === "light") {
    value = LightenDarkenColor(colorHex(value), -40);
    }

    root.style.setProperty("--anzhiyu-bar-background", value);
    requestAnimationFrame(() => {
    anzhiyu.initThemeColor();
    });

    if (GLOBAL_CONFIG.mainTone.cover_change) {
    document.documentElement.style.setProperty("--anzhiyu-main", value);
    document.documentElement.style.setProperty(
    "--anzhiyu-theme-op",
    getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "23"
    );
    document.documentElement.style.setProperty(
    "--anzhiyu-theme-op-deep",
    getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "dd"
    );
    }
    });
    }else{
    // 原来的网络请求
    }