说在开头

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

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

修改主题结构

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

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

修改主题文件

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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如下:

1
2
3
4
5
.post-bg #post-cover{
width: 100%;
height: 100%;
object-fit: cover;
}

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

引入js

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

七牛云的图像处理文档:立即访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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');
}

很单纯的请求,用其他方式可以自行探索。

大功告成!

参考样式