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

2023-11-154 min 作品

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

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

安装

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

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

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

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

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