This blog post is trying to tell you:

• How to use your own Tag Plugin in local environment?
• How to publish your Tag Plugin to npm and hexo?

For explaination on Tag Plugin and Scripts in Hexo, see the previous post
Hexo Tag Plugin (1) – Use ‘Hexo Scripts’ to create your own Tag Plugin.

Plugin

Be Careful! Don’t mix Plugin, Tag, and Tag Plugin in Hexo, even though they look extremely similar.

Usually, Plugin are for complicated functions. Yet if you want to publish your custom Tag Plugin to the NPM registry or even shown on the Hexo Community Page, Plugin would be a very good choice.

From Script to Plugin

Assume you already have a script call index.js, and you want to turn it into package, you may do the following:

1. Navigate node_modules folder in your project folder. This is the folder where Hexo stored all the packages for your blog. Create a folder inside and the name must begin with hexo- or Hexo will ignore it.

2. Your folder must contain at least two files: the actual JavaScript code and package.json file that describes the purpose of the plugin and sets its dependencies.

1
2
3

.
├── index.js
└── package.json

3. In package.json, it should at least have the name, version and main entries set.

This blog post is trying to tell you:

• What is Hexo Tag and Hexo script?
• How to implement your own Hexo Tag Plugin using Hexo Script?

To color your personal Hexo Blog with more features, scripts and plugins are your powerful tools to use. Below we are trying to create our own tag plugin for the Hexo blog.

Tag Plugin

Be careful! Tag plugins are different from post tags.

Tag plugins are special type of syntax that you may use in your Markdown file.

Hexo has already provided some default Tag plugins like Block Quote and iframe.

Usage

For example, the syntax of iframe tag is:

1

<iframe src="url" width="[width]" height="[height]" frameborder="0" loading="lazy" allowfullscreen></iframe>

Let say I want to embed a video from me and my friends’ YouTube video:

This is a image version of the post here

range-set:

1

range-set   ::= range ( logical-or range )*

logical-or:

1

logical-or  ::= ' '* '||' ' '*

referenced by: range-set

range:

To see the syntax and Railroad diagram version, goto here

Basic Structure

Package dependecies are a tuple of [major, minor, patch] with numeric values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
    "name": "project name",
    "version": "0.0.1",
    "description": "description of the project",
    "keywords": [
        "keyword 1",
        "keyword 2"
    ],
    "author": "John Doe",
    "dependencies": {
      "package-1": "~0.6.2",
      "package-2": ">=2.6.2"
    }
}

Version Range operator

Basic Range

For x in exmaple, see Advanced Range below.

Advanced Range

Advanced ranges may be combined in the same way as primitive comparators using space or ||.