Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >hexo-butterfly-npm标签插件开发

hexo-butterfly-npm标签插件开发

作者头像
hahah
发布于 2022-08-30 05:03:00
发布于 2022-08-30 05:03:00
76600
代码可运行
举报
文章被收录于专栏:爪哇学习日记爪哇学习日记
运行总次数:0
代码可运行

标签插件开发

参考学习文档

hexo插件嵌入

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

​ 除却辅助函数,hexo的插件还可划分为不同类型:控制台 (Console)、部署器 (Deployer)、过滤器 (Filter)、生成器 (Generator)、迁移器 (Migrator)、处理器 (Processor)、渲染引擎 (Renderer)、标签 (Tag)。可参考hexo相关内容:hexo/lib/pluginshexo/lib/hexo/index.js

​ 由上述代码分析,在hexo初始化的时候会相应加载插件列表,插件加载依托于load_plugins.js,其主要函数有loadModules、loadScripts

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = ctx => {
  if (!ctx.env.init || ctx.env.safe) return;
  return loadModules(ctx).then(() => loadScripts(ctx));
};

# loadModules:调用loadModuleList读取package.json,从而进一步加载插件列表(自带&第三方插件)
# loadScripts:加载脚本类插件(自带&主题scripts下的脚本)

​ 部分插件如果存在编译错误则hexo会无法正常启动且输出错误日志,因此在自定义的时候注意根据日志检查错误相应调整即可。

NPM插件

构建步骤说明

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1.插件编写:核心包括下述两个文件
- 主程序index.js
- package.json(用于描述插件的用途和所依赖的插件,其中package.json至少要包含name, version, main 属性)

2.插件发布
- 登录npm:npm login
- 发布:npm publish

​ 插件发布完成之后,还可将插件发布到插件列表,具体可参考文档-插件,通过fork hexojs/site,按照提示要求编辑source/_data_plugins.yml文件,并推送分支、合并。

参考步骤

1.创建一个目录用于构建自定义插件,随后在该目录下执行npm init指令用于初始化项目

输入项

package name

插件名

version

插件版本

description

插件的作用描述

entry point

插件入口

test command

测试脚本

git repository

github仓库

keywords

关键词

author

作者

license(ISC)

版本协议

2.构建完成会生成package.json文件,随后可进行插件开发,例如构建index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 定义函数
function addText (args, content) {
  const text = args[0] || 'non'

  console.log("showText Plugin");
  return `<h1>${text}</h1>`;

}
// 注册插件
hexo.extend.tag.register('showText', addText, { ends: false })

3.插件开发完成则可进行发布

  • npm官网注册,确认发布插件是否存在(避免同名)
  • 注册完成执行npm adduser指令将添加注册用户(完善用户名、密码、邮箱(邮箱接收验证码)),npm whoami指令可查看当前用户
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 登录用户
npm login或者npm adduser
输入用户名、密码、邮箱,随后邮箱接收验证码并校验
登录完成输入npm whoami验证本地用户信息
  • npm publish发布插件
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm publish --registry https://registry.npmjs.org # 指定npm发布
# 每次发布新的版本需要相应调整版本号信息随后发布
  • 发布完成,在官网查看插件发布信息

4.文档完善:文档信息,便于跟踪开发记录和使用说明(README.md),后续插件构建完成可使用github进行版本管理

5.项目测试

  • 在hexo项目中引入自定义插件npm i 插件名称,可在package.json中管理版本信息
  • 测试标签插件showText,查看内容是否正常渲染

常见问题

​ 如果npm login登录失败,则执行npm config list -l指令检查是否配置了代理。如果配置了https-proxy,则相应执行指令删除npm config delete https-proxy

​ 如果npm publish发布失败,检查发布的仓库时npm还是cnpm(国内淘宝镜像库),需执行npm config set registry https://registry.npmjs.org/进行切换

​ 如果是网络响应问题,尝试着切换移动网络进行操作(使用移动热点)

版本管理

测试包

​ 在发布正式版本之前均需要进行测试版本,因此可相应发布测试版本

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1.package.json中修改version版本号,版本号后边加-beta(迭代beta1,beta2....)
2.下载测试版本
- npm install xxx@beta

npm包管理

  • 删除npm包

​ 考虑到删除的影响,npm包的删除限制在发布后72小时内操作

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm unpublish [packagename] --force

​ 但需要注意额度是,一旦使用了npm unpublish撤销操作,再次执行发布操作会被限制(403错误提示),因为npm中针对同名的包如果取消发布了则需24h后才能解禁,如果不想改包名则等24h重新发布,或者在package.json中修改包名重新发布

  • 包升级
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 在项目中升级npm包
npm update [packagename]
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
hexo-butterfly-npm标签插件开发
​ hexo的插件嵌入有两种方式,一种是通过脚本(Script)的方式引入,demo可参考自定义标签实现;一种是通过插件(Packages)的方式将自定义的插件内容发布到npm上。
hahah
2022/08/30
7660
DIY外挂标签的简单写法与应用
Hexo有提供外挂标签的API介绍文档。首先我们要了解什么是外挂标签。它的实质其实就是简化Html的写法,把大片重复的内容交给Hexo编译,我们只需要在外挂标签内提供必要的参数即可。这也是我一度钟爱外挂标签的原因。毕竟很方便,可以拿来偷懒嘛。本帖提供的是一些较为简单的外挂标签写法。更加精深的内容可以参考官方开发文档和现有的外挂标签脚本。本站现有的外挂标签写法基本都已经集成在这篇教程中:
Akilar
2021/06/11
7260
hexo-butterfly-基础操作
​ 基本配置信息可参考“博客项目基本操作”文档说明进行配置,此处针对一些个性化设置做简单配置说明
hahah
2022/06/14
2.8K0
自定义标签库:hexo-butterfly-tags-extend
基于hexo-butterfly的基础上扩展自定义标签插件,标签插件开发基本内容参考hexo插件库,针对项目和日常应用引入自定义的外置标签,对部分标签内容做了相应的调整和优化
hahah
2022/08/30
1.6K0
自定义标签库:hexo-butterfly-tags-extend
常用命令
外挂标签文档 文档里的标签外挂需要下载额外的插件,由于那个插件拖慢生成速度我给关闭掉了,感觉也不太会用复杂的标签,也可以尝试在引入某个特定标签,这个有空再折腾吧。
爱编程的小明
2022/09/06
4540
Add Github Badge
输入相关信息后,点击make badge即可得到徽标的URL。可以用img标签引用,写法简单。不过正式写法建议用object标签引用,写法示例如下。
Akilar
2021/06/11
1.3K0
对话框外挂标签
新建[Blogroot]\themes\butterfly\scripts\tag\msgbox.js,注意外挂标签是内部函数,必须放在scripts目录下才会生效,不要自作聪明放到别的目录去再inject。
Akilar
2023/01/30
8520
Hexo next博客添加折叠块功能添加折叠代码块
前言 有大段的东西想要放上去,但又不想占据大量的位置。折叠是最好的选择。下面在Hexo的主题上定制添加折叠功能。 本文基于Hexo Next的主题修改。其他主题应该也差不多。效果如下:https://blog.rmiao.top/hexo-fold-block/ 在main.js中添加折叠js next主题的主要js位于themes/next/source/js/src/post-details.js, 在里面找合适的位置,添加如下代码: $(document).ready(function(){
Ryan-Miao
2018/03/14
2.4K0
hexo-butterfly-首页改造
​ 基于Vercel自建API构建引用的是:python-github-calendar-api
hahah
2022/06/15
1.4K0
Hexo-Butterfly主题修改记录
本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的部分修改;
十玖八柒
2022/07/28
1.9K0
Hexo-Butterfly主题修改记录
Hexo安装并使用Butterfly主题
本片文章为本人想要换hexo的主题时所写。因此省略node和hexo的安装,直接在初始化博客开始
Dreamy.TZK
2020/04/09
5.2K0
hexo-butterfly-魔改说明
​ 单独将主题的配置文件拎出来(butterfly/_config.yml)调整为_config.butterfly.yml,放置在项目根目录,避免主题迭代升级覆盖了原有的配置信息
hahah
2022/06/14
7570
Hexo + Butterfly 自定义页脚
本人用的是npm方式安装的 hexo-theme-butterfly,后续魔改时更改的文件都是【BlogRoot/node_modules/hexo-theme-butterfly】文件夹中的文件。如果你是git clone方式安装的主题,请在【BlogRoot/themes/butterfly】文件夹下修改对应的文件。
唐志远
2023/04/22
5880
Hexo + Butterfly 自定义页脚
Butterfly 自定义代码高亮字体
但是该博客下提供的代码高亮css文件项目已经失效了,既然如此,我这里就再提供一篇较为完整的教程,仅供参考
一只野生彩色铅笔
2022/07/01
1.5K0
hexo-butterfly-友链&朋友圈构建
​ 升级友链朋友圈,更新迭代记录,感谢大佬们的用爱发电和文档支持:贰猹の小窝、冰糖红茶、小冰博客
hahah
2022/08/30
1.4K0
hexo-butterfly-评论系统引入
​ 可参考官网提供的评论系统接入方式进行构建,在此过程中也陆陆续续摸索了网友们对各个评论的评价和使用的情况,可结合自身的情况进行调整,从多个方面考虑,不外乎第三方托管应用权限问题、自建服务维护/学习成本、组件引用便捷性等
hahah
2022/06/15
1.9K0
关于 Hexo + Butterfly 的常见问题
如果改动了站点配置文件_config.yml 和主题配置文件_config.butterfly.yml,需要重新编译才能看到效果。
唐志远
2022/10/27
2.4K0
关于 Hexo + Butterfly 的常见问题
hexo-butterfly-闲聊侧
​ 注册LeanCloud国际版账号,随后创建应用(针对同一个项目最好引用同一个应用,从而避免同一个页面中使用多个leancloud应用导致冲突问题)
hahah
2022/06/15
1.3K0
基于Butterfly的外挂标签引入
Note标签外挂有两种用法。icons和light_bg_offset只对方法一生效。
唐志远
2023/08/01
4300
基于Butterfly的外挂标签引入
hexo-butterfly-音频视频播放器嵌入
​ 实现引入有两种方式,一种是在markdown中用原生的html编写(需开启配置文件中aplayerInject配置),一种则是借助hexo-tag-aplayer插件进行渲染(区分全局引用、部分引用)
hahah
2022/06/14
2.2K0
相关推荐
hexo-butterfly-npm标签插件开发
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验