hexo-cover-color插件获取图片主题色

2023-11-154 min 作品
cover image
AI摘要
这篇文章讲了hexo-cover-color插件,用于获取博客主题色。通过自定义主题色功能,利用JS生成颜色并注入样式,效果不错。作者起初用snipaste的取色笔手动取色,但考虑到自动化的需求,参考lokesh/color-thief库写了一个用sharp重构的取色插件。插件通过判断图片链接是本地还是网络图片,进行图片读取和解析,省去手动取色的时间,提高效率。插件配置简单,适用于Hexo博客。

最近给博客的主题添加了自定义主题色的功能,一色生多色,通过 js 来生成颜色和注入样式,效果还是不错的,一开始我只是用snipaste的取色笔来取头图的主题色,但感觉跟 ai 摘要一样,还是得搞自动化才行

在查阅了一些资料之后,参考lokesh/color-thief这个库写了一个用 sharp 重构的取色插件,colorthief 有一段时间没有更新,然后不支持 webp 图片,很伤,源代码很简单,核心是 quantize 这个颜色量化计算库,扒了下来写了个类型声明,最后效果不错

安装

sharp 这个包不小,是我之前介绍过的 vips 图片处理库的 nodejs 绑定,相比 govips,sharp 诚意真的好多了,不得不佩服 nodejs 的生态

我们通过 npm install hexo-cover-color 来安装本插件,然后就是在_config.yaml 进行配置了

YAML
# 配置项,不配置的话就是使用以下默认名
cover_color:
	# 头图在frontmatter里的变量名
	cover_front_name: 'cover'
	# 颜色保存到frontmatter的变量名
	color_front_name: 'main_color'

插件会根据图片的链接来判断是本地图片或者网络图片然后进行图片的读取和解析, 颜色不一定非常符合你的要求,只是省了一些时间

评论
正在加载评论组件...