Hexo Tag Plugin (1) -- Use 'Hexo Scripts' to create your own Tag Plugin

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:

video.md

<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:

video.md

<iframe src="https://www.youtube.com/embed/XIOl6BU7s9I?si=yTYsHIXNM6o-Zl9Z" width="720" height="461" frameborder="0" loading="lazy" allowfullscreen></iframe>

And that’s how it looks like:

Script

Let say we want to create our own tag plugin, we can use the Hexo script function. Here’re the steps.

1. Create a JavaScript file with function hexo.extend.tag.register("tag_name", args). You may also put your own function inside so that the second argument can also be function (args){}

   Here is an example of a function that create a tag named youtube, with embedding video function:

video.js

hexo.extend.tag.register("youtube", function (args) {
    var id = args[0];
    return (
        '<div class="video-container"><iframe width="560" height="315" src="http://www.youtube.com/embed/' +
        id +
        '" frameborder="0" allowfullscreen></iframe></div>'
    );
});

2. Put your JavaScript files in the scripts folder. If your project folder is new, you may not be able to find it. This is because scripts folder is actually under the Themes folder.

   You may check here to see the structure of themes and create your own one. Or you may be simply find a template on the Hexo themes community then put your .js file into the theme.

3. It is done! Hexo will load them during initialization and you may use them in your blog post designs.

Beyond Scripts

If you are not satisfied with creating a local tag plugin, but a public one that will be seen by the community, you should consider using Hexo plugin function instead.

check here to continue the journey.

---

Continue Reading: Hexo Tag Plugin (2) – Create and publish your own Hexo Tag Plugin

---

Reference

• Hexo Plugins and Scripts
• Hexo Tag Plugins
• Hexo Tag Api
• Hexo Plugins Community