Add Bootstrap badge Tags into Hexo

Hexo  |  2020-04-25  |  596

Boostrap badge#

badge content

So this is a badge given by bootstrap, we can add this into hexo just simply write some HTML like this.

<span class="badge badge-secondary">badge content</span>

And yes, this is not like Hexo style, and hardly to modify.
So as last post, let build a tags to insert a badge.

Badge Tags#

badge.js#

First things to do, new a file call badge.js and put into scripts directory in current theme’s directory:

$ touch /path/to/your/current/theme/dir/script/badge.js

if scripts directory is not existed, first new a directory.

$ mkdir /path/to/your/current/theme/dir/script

Then, write down this into lastest javascript file (badge.js).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * badge.js | global hexo script.
 *
 * Usage:
 *
 * {% badge [class]@Text %}
 *
 * [class] : primary | secondary | success | danger | warning | info | light | dark.
 *           If not defined, default class will be selected.
 */

function postBadge (args) {
    args = args.join(' ').split('@');
    var classes = args[0] || 'default';
    var text = args[1] || '';
  
    classes = classes.trim();
    !text && hexo.log.warn('badge text must be defined!');
  
    return '<span class="badge badge-' + classes + '">' + text + '</span>';
}
  
hexo.extend.tag.register('badge', postBadge, { ends: false });

In line 23, we registed a tag name badge, and next time we write something like below , it will show like bs badge.

{% badge @blah %}

Different#

Here is a trivial different point with card we wrote in register.

hexo.extend.tag.register('badge', postBadge, { ends: false });

In the third parameter, we write down { ends: false }, this will tell hexo that this tag has no end tag. So our badge tag should write like this:

{% badge @blah %}

And carefully don’t write something like this:

1
2
{% badge @blah %}
{% endbadge %}

Line 2 should not be write down in post markdown file.

Classes#

badge has some different styles, we can use args to implement it.

Args is given by hexo tag api, we can pass argument to tag.
so we combine style name into bs classes, this is the code.

1
2
3
4
5
6
7
8
function postbadge (args) {
    args = args.join(' ').split('@');
    var classes = args[0] || 'secondary';
  
    ...
  
    return '<span class="badge badge-' + classes + '">' + text + '</span>';
}

Primary Secondary Success Danger Warning Info Light Dark

{% badge primary @Primary %}
{% badge secondary @Secondary %}
{% badge success @Success %}
{% badge danger @Danger %}
{% badge warning @Warning %}
{% badge info @Info %}
{% badge light @Light %}
{% badge dark @Dark %}

Content#

This is how content show.

Content is given by hexo tag api, this is a string inside tag (of course markdown). We can use hexo render engine to show it.

1
2
3
4
5
6
7
8
9
10
11
function postbadge (args) {
    args = args.join(' ').split('@');

    ...

    var text = args[1] || '';

    ...
  
    return '<span class="badge badge-' + classes + '">' + text + '</span>';
}

Remind#

This badge styling is using Bootstrap v4.4, so you need to include bs stylesheet in <head>.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">

Example#

{% badge @badge content %}

So this is the correct code I wrote in the top. badge class should given by first argument

{% badge primary @Stuff %} 
{% badge secondary @Stuff %} 
{% badge success @Stuff %} 
{% badge info @Stuff %} 
{% badge warning @Stuff %} 
{% badge danger @Stuff %}
{% badge light @Stuff %}
{% badge dark @Stuff %}

If not given classes, it will also show secondary classes. So this two are equal.

{% badge @Stuff %}
{% badge secondary @Stuff %}

And content should put after a @

{% badge @Content here %}

That is, how does a badge work on hexo by using tag plugins. You can find source code about this website in github if you want to learn more.

tags:  #Hexo #bootstrap #tag plugin #badge
全部展開 回到頂部 移至底部