Add Bootstrap Card Tags into Hexo

Hexo | 2020-04-23 | 1.1k

Bootstrap Card#

card header content

card content

card footer

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

<div class="card card-default">
    <div class="card-header">
        <p>card header content</p>
    </div>
    <div class="card-body">
        <p>card content</p>
    </div>
    <div class="card-footer">
        <p>card footer</p>
    </div>
</div>

But this kind of things is not like Hexo style, and hardly to modify.
Luckly, Hexo is giving us some api call tag plugin, so let made a tag to insert a card!

Tag Plugin#

So what is actually tag plugin is? This is the answer of Hexo doc.

A tag allows users to quickly and easily insert snippets into their posts.

As you see, we can simply build a tag and it will render a block our want. A example is above. This Bs Alert block is write down in .md like this:

{% alert %}
blah blah
blah more
{% endalert%}

And this tag is named by note. OK, let we get started to build card tag.

card Tag#

card.js#

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

$ touch /path/to/your/current/theme/dir/script/card.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 (card.js).

/**
 * card.js | global hexo script.
 *
 * Usage:
 *
 * {% card class %}
 * <!-- header -->
 * Any content (support inline tags too).
 *  <!-- endheader -->
 * 
 * Any content (support inline tags too).
 * 
 * <!-- footer -->
 * Any content (support inline tags too).
 *  <!-- endfooter -->
 * {% endcard %}
 *
 */

function cardContent (args, content) {
    var classes = args[0] || 'default';
    var textClass = (classes != 'default' && classes != 'light' ) ? ' text-white' : '';
    var rHeading = /<!--\s*header\s*-->\n([\w\W\s\S]*?)<!--\s*endheader\s*-->/g;
    var rFooter = /<!--\s*footer\s*-->\n([\w\W\s\S]*?)<!--\s*endfooter\s*-->/g;
    var heading = '';
    var footer = '';

    var returnVal = '<div class="card bg-' + classes + ' ' + textClass + ' mt-3 mb-3">';

    if (heading = rHeading.exec(content)) {
        content = content.replace(rHeading, '');
        returnVal += '<div class="card-header">' 
        returnVal += hexo.render.renderSync({text: heading[1], engine: 'markdown'}).trim() + '</div>';
    }

    if (footer = rFooter.exec(content)) {
        content = content.replace(rFooter, '');
        returnVal += '<div class="card-body">' + hexo.render.renderSync({text: content, engine: 'markdown'}).trim() + '</div>';
        returnVal += '<div class="card-footer">' + hexo.render.renderSync({text: footer[1], engine: 'markdown'}).trim() + '</div></div>';
    } else {
        returnVal += '<div class="card-body">' + hexo.render.renderSync({text: content, engine: 'markdown'}).trim() + '</div></div>';
    }

    return returnVal;
}
  
hexo.extend.tag.register('card', cardContent, { ends: true });

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

{% card %}
card stuff
{% endcard %}

Classes#

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

function cardContent (args, content) {
    var classes = args[0] || 'default';
    var textClass = (classes != 'default' && classes != 'light' ) ? ' text-white' : '';
    ...

    var returnVal = '<div class="card bg-' + classes + ' ' + textClass + ' mt-3 mb-3">';
    ...
}

Default card

card content

Primary card

card content

Secondary card

card content

Success card

card content

Danger card

card content

Warning card

card content

Info card

card content

Light card

card content

Dark card

card content

{% card default %}...{% endcard %}
{% card primary %}...{% endcard %}
{% card secondary %}...{% endcard %}
{% card success %}...{% endcard %}
{% card danger %}...{% endcard %}
{% card warning %}...{% endcard %}
{% card info %}...{% endcard %}
{% card light %}...{% endcard %}
{% card dark %}...{% endcard %}

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.

function cardContent (args, content) {
    ...

    var returnVal = '<div class="card bg-' + classes + ' ' + textClass + ' mt-3 mb-3">';

    ...
    
    returnVal += '<div class="card-body">' + hexo.render.renderSync({text: content, engine: 'markdown'}).trim() + '</div></div>';
    
    ...

    return returnVal;
}

header and Footer#

card header and footer is also given in bs, so we can implement it.

Card Header

This is how header work.

First, you must put your header content between  and .
In card.js, we use RegExp to find correct header content.
RegExp for header is line 1.
After finding, we render this stuff by using hexo render engine.

var rheader = /<!--\s*header\s*-->\n([\w\W\s\S]*?)<!--\s*endheader\s*-->/g;
if (heading = rHeading.exec(content)) {
    content = content.replace(rHeading, '');
    returnVal += '<div class="card-header">' 
    returnVal += hexo.render.renderSync({text: heading[1], engine: 'markdown'}).trim() + '</div>';
}

Card Footer

This is how footer work.

First, you must put your header content between  and .
In card.js, we use RegExp to find currect footer content.
RegExp for footer is line 1.
After finding, we render this stuff by using hexo render engine.

var rFooter = /<!--\s*footer\s*-->\n([\w\W\s\S]*?)<!--\s*endfooter\s*-->/g;

if (footer = rFooter.exec(content)) {
    content = content.replace(rFooter, '');
    returnVal += '<div class="card-body">' + hexo.render.renderSync({text: content, engine: 'markdown'}).trim() + '</div>';
    returnVal += '<div class="card-footer">' + hexo.render.renderSync({text: footer[1], engine: 'markdown'}).trim() + '</div></div>';
}

Remind#

This card 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#

{% card %}
<!-- header  -->
card header content
<!-- endheader -->
card content
<!-- footer -->
card footer
<!-- endfooter -->
{% endcard %}

So this is the correct code I wrote in the top. card box in the tag of:

{% card %}
...
{% endcard %}

And header should put in:

<!-- header -->
...
<!-- endheader -->

Also footer should put in:

<!-- footer -->
...
<!-- endfooter -->

And this is support classes:

{% card default %}...{% endcard %}
{% card primary %}...{% endcard %}
{% card secondary %}...{% endcard %}
{% card success %}...{% endcard %}
{% card danger %}...{% endcard %}
{% card warning %}...{% endcard %}
{% card info %}...{% endcard %}
{% card light %}...{% endcard %}
{% card dark %}...{% endcard %}

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

{% card default %}...{% endcard %}
{% card %}...{% endcard %}

That is, how does a card 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 #card #bootstrap #tag plugin