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{
     // 原来的网络请求
    }