跳至主要內容
hexo插件开发之多插件引入样式冲突

​ 在引入相关图表的时候,图表正常加载但样式却存在问题,例如在一个文章中同时引入githubRepo和highcharts标签的时候,发现显示的图表很小。

image-20220302230044875

问题分析

​ 通过排查,一开始考虑是引用时参数指定问题,但检查元素发现数据指定正常,装载的容器大小装载正常,随后继续向下检查嵌套元素发现图表的内容被封装在svg标签中,而svg样式在githubRepo中存在定义,从而覆盖了相应的引用,因此需要调整策略,对svg的css进行相应的控制,或者是针对highcharts中相关元素自定义样式。


holic-x...大约 2 分钟hexobutterflyBUG
hexo插件开发之依赖冲突
const urlFor = require('hexo-util').url_for.bind(hexo)

问题分析

​ 在引入mtime插件的时候报错,是由于对参数进行解析的时候用到了hexo-util工具类,重复导入导致依赖失效报错


holic-x...小于 1 分钟hexobutterflyBUG
hexo-插件开发实例

1.标签插件

​ 以标签插件为参考,其核心说明如下

a.定义一个函数用于接收参数并转化文本
b.借助hexo.hexo.extend.tag.register方法注册自定义标签
- hexo.extend.tag.register('标签名称', 函数, options(扩展配置))
- 其中函数定义默认参数为xxx(args,content)

holic-x...大约 3 分钟hexobutterfly
hexo-插件开发规范

1.开发说明

2.规范定义

​ 对文件夹进行分类处理

scripts: # 存放js文件内容,对不同的功能种类进行分类
	chart: xxx.js # 图表类
	text: xxx.js # 文本类
	
assets:# 存放资源文件
	img:
	font:
	css: tags_extend.css
	


holic-x...小于 1 分钟hexobutterfly
hexo-插件开发基础篇

参考学习文档

插件开发

​ hexo的插件嵌入有两种方式,一种是通过脚本(Script)的方式引入,demo可参考自定义标签实现;一种是通过插件(Packages)的方式将自定义的插件内容发布到npm上。


holic-x...大约 4 分钟hexobutterfly