Ready To Fly
Tools
hexo-tag-plugins

Hexo Tag Plugin Collection

All tag plugins used for kiko.io available on Github

Since day one of this blog I use Tag Plugins, sometimes as NPM packages from other developers, sometimes developed by myself.

The latter have grown significantly over time and I want to share them with you by publishing them in a Github project called hexo-tag-plugins, where you can download and use those you need on extending your own Hexo based blog.

On the Github page you can find all the info on how to use the plugins. In this article I will only briefly introduce them:

  • Anchor
  • Anchorlist
  • Alertbox
  • Alternative Blockqoute
  • Blockquote Details
  • Codepen
  • CodeSandbox
  • Download Link
  • Image Compare
  • Image Link
  • Image Slide
  • Indiepen
  • More Info

Anchor

Anchor element as A- or HR-Tag as jump target for example from a Anchorlist.

Usage Example:

1
{% anchor "my-anchor" HR  %}

Live Output:

1
<hr id="my-anchor">

See https://github.com/kristofzerbe/hexo-tag-plugins#anchor for more details.

Anchorlist

Creates an overview of all anchors in the content with jump links.

Usage Example:

1
2
3
4
{% anchorlist
  "My First Anchor|a1"
  "My Second Anchor|a2"
%}

Live Output:

  • My First Anchor
  • My Second Anchor

See https://github.com/kristofzerbe/hexo-tag-plugins#anchorlist for more details.

Alertbox

Renders a iconized colored box with text for warnings or with some special information. 6 styles are provided: Exclamation, Question, Warning, Info, Success and Note.

This plugin uses a FontAwesome font for the icons and some styles that also need to be included in your Hexo project.

Usage Example:

1
2
3
{% alertbox warning %}
Something has failed!
{% endalertbox %}

Live Output:

Something has failed!

Uuh, keep attention!

Everything’s fine

What’s up?

Some important information

Just as note…

See https://github.com/kristofzerbe/hexo-tag-plugins#alertbox for more details.

Alternative Blockquote

An alternative blockquote tag plugin for quotes with citator and reference url.

Usage Example:

1
2
3
{% blockquote_alt "Anonymous" "https://en.wikipedia.org/wiki/Lorem_ipsum" %}
Lorem ipsum dolor sit amet...
{% endblockquote_alt %}

Live Output:

Lorem ipsum dolor sit amet…

--- Anonymous

See https://github.com/kristofzerbe/hexo-tag-plugins#alternative-blockquote for more details.

Blockquote Details

Blockquote including summary, citator and reference url, wrapped in a details tag.

Usage Example:

1
2
3
{% blockquote_details "Lorem ipsum" "Anonymous" "https://en.wikipedia.org/wiki/Lorem_ipsum" %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
{% endblockquote_details %}

Live Output:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

--- Anonymous

See https://github.com/kristofzerbe/hexo-tag-plugins#blockquote-details for more details.

Codepen

Embedding a pen from Codepen.

Usage Example:

1
{% codepen "abjJNYE" "Lorem Ipsum" html 250 %}

Live Output:

See https://github.com/kristofzerbe/hexo-tag-plugins#codepen for more details.

CodeSandbox

Tag Plugin for embedding a sandbox from CodeSandbox.

Usage Example:

1
{% codesandbox "cool-shamir-de613" "Lorem Ipsum" 300 %}

Live Output:

See https://github.com/kristofzerbe/hexo-tag-plugins#codesandbox for more details.

Button link for downloading an asset file, with additional caption (“Download <additionalCaption> <assetFile>”).

Usage Example:

1
{% download_link "example-image_ORIGINAL.jpg" "Photo" %}

Live Output:

Download Photo example-image_ORIGINAL.jpg

See https://github.com/kristofzerbe/hexo-tag-plugins#download-link for more details.

Image Compare

Comparing two images side-by-side with the aid of the JS library Image Compare Viewer.

Usage Example:

1
2
3
4
5
{% image_compare 
  "example-image_ORIGINAL.jpg"
  "example-image_PRESET.jpg"
  "Lightroom Preset" 
%}

Live Output:

See https://github.com/kristofzerbe/hexo-tag-plugins#image-compare for more details.

Renders an image including ALT attribute within a link.

Usage Example:

1
{% image_link "kiko-io-screenshot.png" "http://kiko.io" "Blog kiko.io" %}

Live Output:

Blog kiko.io

See https://github.com/kristofzerbe/hexo-tag-plugins#image-link for more details.

Image Slide

Shows multiple images within a slider with the aid of the JS library Tiny Slider.

Usage Example:

1
2
3
4
{% image_slide
  "example-image_ORIGINAL.jpg|Original"
  "example-image_PRESET.jpg|Lightroom Preset"
%}

Live Output:

Original
Lightroom Preset

See https://github.com/kristofzerbe/hexo-tag-plugins#image-slide for more details.

Indiepen

Embedding a “local” pen (index.html, main.js and styles.css stored in an asset subfolder) via Indiepen.

Usage Example:

1
{% indiepen "indiepen-example" 300 html %}

Live Output:

See https://github.com/kristofzerbe/hexo-tag-plugins#indiepen for more details.

More Info

Renders a list of related, informative links regarding a post.

Usage Example:

1
2
3
4
5
6
7
8
{% moreinfo '{ "list": [
  [ "Wikipedia", "Markdown",
  "https://en.wikipedia.org/wiki/Markdown" ],
  [ "Markdown Guide", "Basic Syntax",
  "https://www.markdownguide.org/basic-syntax/" ],
  [ "Daring Fireball", "Markdown: Syntax",
  "https://daringfireball.net/projects/markdown/syntax" ]
]}' %}

Live Output:

See https://github.com/kristofzerbe/hexo-tag-plugins#more-info for more details.

You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving a good old comment with your GitHub account.

Webmentions

No Webmentions yet...

In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...


Comments

Related