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

hexo-butterfly-npm标签插件开发

作者头像
hahah
发布于 2022-08-30 05:03:00
发布于 2022-08-30 05:03:00
77200
代码可运行
举报
文章被收录于专栏:爪哇学习日记爪哇学习日记
运行总次数: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-自定义内置标签
​ 此处的内置标签不同于文章中设定的tags标签概念,其指的是针对文章编写中可引用的标签(用于渲染成不同的代码规则),除却基本的md语法支持,butterfly提供了标签外挂概念,可以通过{% tagname %}content{% endtagname %}的形式构建文档内容、丰富文档形式,butterfly标签外挂相关参考文档:標籤外掛(Tag Plugins)、Hexo Built-in Tag Plugins (Hexo內置標籤外掛)
hahah
2022/06/15
6590
【今天你更博学了么】从0到1发布属于自己的库到npm
NPM(Node Package Manager),一个 Node.js 的包管理工具。本文不是 npm 的教程,简单说一下,最显著的作用就是用来管理和共享代码的。
一尾流莺
2022/12/10
4810
【今天你更博学了么】从0到1发布属于自己的库到npm
创建并发布 Scoped NPM 模块
接前一篇文章,如果创建的 NPM 包在 NPM 上已经存在,那么此时可以修改包名,或者通过Scoped NPM包的方式发布。
kongxx
2024/08/09
980
gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程
只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大.
雪之梦技术驿站
2019/10/04
1.9K0
发布npm包,你也可以的
本文简单地记录了发布一个npm包的过程,以便自己后续参考使用,也为有需要的朋友提供一点思路。
程序员白彬
2020/07/10
8390
发布npm包,你也可以的
「Vue进阶」一篇文章,教你学会Vue-CLI 插件开发
如果你正在使用Vue框架,那么你肯定知道 VueCLI是什么。 Vue-CLI3,它是Vue.js 开发的标准工具(脚手架),提供项目支架和原型设计。
前端劝退师
2019/09/17
2K0
「Vue进阶」一篇文章,教你学会Vue-CLI 插件开发
从0到1发布一个npm包
最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC、WAP甚至是APP中都需要使用,但是对于业务的PC、WAP、APP往往是不同的业务、不同的代码库中,尽管已经将公用的组件和方法抽离到各自公共common中,但是各个大业务大方向上的公用封装依然不能满足需求。
Tiffany_c4df
2019/09/04
1.3K0
Hexo + Typora + 开发Hexo插件 解决图片路径不一致
图片文件保存路径:./${filename}即保存到与 当前正在编辑的文件名 相同的同级文件夹下
yiyun
2022/04/01
2K0
Hexo + Typora + 开发Hexo插件 解决图片路径不一致
npm 发包实践教程之 gRPC 怎么使用?(1)
实现将自己的一些工具或者 demo 作品 放到 npm 帮助更多开发者理解和学习,构建强大的学习生态
马克付
2022/12/12
4860
npm 发包实践教程之 gRPC 怎么使用?(1)
如何实现一个公共组件库上传到npm并在项目中使用
一般多个项目使用一些公共组件的时候,我们没必要在每个项目里写公共组件代码,我们可以将公共组件封装成一个库,上传至npm,这样我们在项目中使用就可以直接从npm下载直接使用。当然我们也可以搭建自己本地的npm镜,而本文主要讲述上传npm。
can4hou6joeng4
2023/11/29
8830
我的图床解决方案
博客的文章经常需要插入图片,如果我将文档与图片放在一起,那么图片的加载速度将会很慢,于是我使用了图床。
777nx
2023/05/08
1.3K0
我的图床解决方案
【Node.js】npm与包【万字教学~超超超详细】
不同于Node.js的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。
坚毅的小解同志的前端社区
2022/11/28
1.1K0
【Node.js】npm与包【万字教学~超超超详细】
将vue组件发布为npm包
如果没有全局安装@vue/cli-init,还需要先安装@vue/cli-init
conanma
2021/12/06
1.2K0
NPM 使用介绍(下)
package.json 位于模块的目录下,用于定义包的属性。接下来让我们来看下 express 包的 package.json 文件,位于 node_modules/express/package.json 内容:
陈不成i
2021/07/09
6850
Node.js学习笔记(一)——Node.js概要、NPM与package.json
Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
张果
2022/09/28
2.6K0
Node.js学习笔记(一)——Node.js概要、NPM与package.json
NPM 包开发与优化全面指南
package.json文件是 NPM 包的中央配置,定义了包的各个方面,从基本元数据到复杂的发布配置。
沉浸式趣谈
2024/10/28
1840
NPM 包开发与优化全面指南
NPM 包开发与优化全面指南
package.json文件是 NPM 包的中央配置,定义了包的各个方面,从基本元数据到复杂的发布配置。
沉浸式趣谈
2024/10/28
1640
NPM 包开发与优化全面指南
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。
Vam的金豆之路
2021/12/01
1.1K0
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
nodejs笔记2 包管理 npm
包 即nodejs第三方模块 npm 包管理工具 切换包镜像源 淘宝源 npm config set registry=https://registry.npm.taobao.org/ nrm 镜像源管理工具 安装 npm i nrm -g 查看所有可用镜像源 nrm ls 切换镜像源 nrm use taobao i5ting_toc MD转HTML工具 安装 npm i i5ting_toc -g 使用 i5ting_toc -f readme.md -o 发布npm包 登录npm npm
路过君
2022/04/13
4530
简单了解 node npm cnpm
nodeJs是基于Chrome v8的js运行环境,简单的说, 就是运行在服务端的 JavaScript。不懂得像PHP、Python或Ruby等动态编程语言又想创建自己的服务(例如:前端程序员),Node.js是一个非常好的选择。
王念博客
2019/07/25
1.4K0
相关推荐
hexo-butterfly-自定义内置标签
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档