Custom Hexo Tag Helpers

Apart from the tag helpers supported by Hexo natively, as described in Hexo Built-in Tag Helpers, Icarus also offers several other useful tag helpers to customize the display of your content.

This article is also available in 简体中文.

The following tag helpers are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported helpers and their configuration details.

Message

Message blocks are a colorful way to emphasize part of text in your post. Its syntax is defined as follows:

{% message color:<color> size:<size> icon:<icon> title:<title> %}
    <content>
{% endmessage %}

color

The color of message block. It is optional. Available values and their examples are:

default

A message block when color is not specified.

dark

A dark message block.

primary

A primary message block.

info

A info message block.

success

A success message block.

warning

A warning message block.

danger

A danger message block.

size

The size of message block. It is optional. Available values and their examples are:

small

A small message block.

default

A message block when size is not specified.

medium

A medium message block.

large

A large message block.

icon

The icon shown in the message block header. It is optional. The value should be valid FontAwesome icon class name. If the icon class name contains space(s), this option and its value should be wrapped with quotes.

Message block with a GitHub icon

A message with "icon:fa-brands fa-github" as icon.

Message block with a Node.js icon

A message with "icon:fa-brands fa-node-js" as icon.

Message block with an NPM icon

A message with "icon:fa-brands fa-npm" as icon.

title

Title of the message block. It is optional. If the title contains space(s), this option and its value should be wrapped with quotes.

Message block with title

A message block with a title ("title:Message block with title").

A message block without a title.

A message block without a title.

A message block without a title.

A message block without a title.

A message block without a title.

A message block without a title.

A message block without a title.

Tabs

The tabs tag helper is a powerful tool to display parallel content. Only content in the active tab can be displayed to the user at a time. Its syntax is defined as follows:

{% tabs size:<size> align:<align> style:<style> %}
<!-- tab id:<tab_id> icon:<icon> title:<tab_title> active -->
<content>
<!-- endtab -->
<!-- tab id:<tab_id> icon:<icon> title:<tab_title> -->
<content>
<!-- endtab -->
...
{% endtabs %}

Tab Container

A tab container has the following options:

size

Size of the tabs. It is optional. Available values and their examples are:

• Tab 1

• Tab 2

This is tab 1 of a small tab container.

This is tab 2 of a small tab container.

• Tab 1

• Tab 2

This is tab 1 of a tab container when size is not specified.

This is tab 2 of a tab container when size is not specified.

• Tab 1

• Tab 2

This is tab 1 of a medium tab container.

This is tab 2 of a medium tab container.

• Tab 1

• Tab 2

This is tab 1 of a large tab container.

This is tab 2 of a large tab container.

align

Alignment of the tab buttons. It is optional. Available values and their examples are:

• Tab 1

• Tab 2

This is tab 1 of a tab container when align is not specified.

This is tab 2 of a tab container when align is not specified.

• Tab 1

• Tab 2

This is tab 1 of a centered tab container.

This is tab 2 of a centered tab container.

• Tab 1

• Tab 2

This is tab 1 of a right tab container.

This is tab 2 of a right tab container.

• Tab 1

• Tab 2

This is tab 1 of a fullwidth tab container.

This is tab 2 of a fullwidth tab container.

style

Style of the tab buttons. It is optional. Additionally, you can combine the style with fullwidth alignment. Available values and their examples are:

• Tab 1

• Tab 2

This is tab 1 of a boxed tab container.

This is tab 2 of a boxed tab container.

• Tab 1

• Tab 2

This is tab 1 of a toggle tab container.

This is tab 2 of a toggle tab container.

• Tab 1

• Tab 2

This is tab 1 of a toggle-rounded tab container.

This is tab 2 of a toggle-rounded tab container.

• Tab 1

• Tab 2

This is tab 1 of a fullwidth boxed tab container.

This is tab 2 of a fullwidth boxed tab container.

• Tab 1

• Tab 2

This is tab 1 of a fullwidth toggle tab container.

This is tab 2 of a fullwidth toggle tab container.

• Tab 1

• Tab 2

This is tab 1 of a fullwidth toggle-rounded tab container.

This is tab 2 of a fullwidth toggle-rounded tab container.

Tab

A tab has the following options:

id

The unique identifier of the tab element. It is required. An ID of a tab should be unique across the entire page so that Icarus can location the right tab content to show or hide.

active

Whether the current tab element is shown. It is optional. Only one tab can be active at a time for a tab group.

icon

The icon shown in the tab button. It is optional. The value should be valid FontAwesome icon class name. If the icon class name contains space(s), this option and its value should be wrapped with quotes.

• GitHub
• Node.js

This tab has an icon of "icon:fa-brands fa-github".

This tab has an icon of "icon:fa-brands fa-node-js".

• GitHub
• Node.js

This tab has an icon of "icon:fa-brands fa-github".

This tab has an icon of "icon:fa-brands fa-node-js".

title

Title of the tab button. It is required. If the title contains space(s), this option and its value should be wrapped with quotes.

• Tab with title

• Tab also with title

This tab has a title ("title:Tab with title").

This tab also has a title ("title:Tab also with title").