Using Hexo Scripts functions to create a custom Tag Plugin

Coding Hexo Node.js

Created At : 2024-10-12 04:03

Count:392 Views :

Tag Plugin
1. Usage
Script
1. Beyond Scripts

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:

{% iframe url [width] [height] %}

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

{% iframe https://www.youtube.com/embed/XIOl6BU7s9I?si=yTYsHIXNM6o-Zl9Z 820 461%}

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.

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:

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>'
    );
});

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