生成封面图片主色来作为文章封面顶图

说在开头

本教程只介绍Hexo下的Butterfly主题的方案，其他可供参考，通用性强。
需要七牛云图床，其他图床需能提供纯色API，使用方法雷同（使用js计算可能涉及到跨域等诸多问题）

此处应已有90%的小伙伴关闭网页

修改主题结构

原有主题对seo的优化很不友好，文章页的图片不是使用img标签来写的，而是填充了一个背景。这样做的坏处就是在搜索引擎收录你的网站的时候，大概率不会将你设置好的封面图作为搜索引擎直接显示的封面。解决办法就是新做一个img标签。

新建一个img标签还有一个好处就是方便我们做我们想要的提取主颜色这个过程。

修改主题文件

主题文件目录为：layout/includes/header/index.pug

打开这个文件，我们来将原有page-header部分修改为：

header#page-header(class=isHomeClass)
  img#post-cover(src=url_for(top_img) alt='cover')
  !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
  if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        #site-subtitle
          span#subtitle
        if(theme.social)
          #site_social_icons
            !=fragment_cache('social', function(){return partial('includes/header/social')})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title

引入css

其中我们可以看到我们新建一个img标签，并且把原来作为填充的img图像给删掉了。这么做之后我们需要调整一下布局。我们引入一个css如下：

.post-bg #post-cover{
  width: 100%;
  height: 100%;  
  object-fit: cover;
}

样式可以添加到任何可以放置的位置。我外部引用了一个css,所以将这个样式保存在我外置的样式中。

引入js

思路就是我们首先需要请求一下图片的url地址，然后请求到rgb的值，最后在放置到页面上。

var path = document.getElementById("post-cover").src;
console.log(path);
if(path !== 'https://blog.zhheo.com/null'){ //将这里的网站前面替换成你自己的,判断是否是不想变的图片，例如放入主页图片url
    var httpRequest = new XMLHttpRequest();    httpRequest.open('GET', path + '?imageAve', true);
    httpRequest.send();
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var json = httpRequest.responseText;            var obj = eval('(' + json + ')');
            var value = obj.RGB;
            value ="#" + value.slice(2)
            // console.log(value);
        //   document.getElementById('page-header').style.backgroundColor=value;
            document.styleSheets[0].addRule('#page-header:before','background: '+ value +'!important');
        }
    };
}else{
    document.styleSheets[0].addRule('#page-header:before','background: none!important');
}