C.J. Scarlett

Hexo Tag Plugins and Packages

Hexo Logo

Preamble

Tag plugins are ported from Octopress and provide a useful way for you to quickly add specific content to your Hexo posts. I don’t use all of these in my own posts but they do come in useful on the odd occasion.

Official Hexo Documentation - Tag Plugins


Quotes

1 – Plain Quote

Useful for adding quotations to your post that need an author, source, or title. The two spaces between the comma were needed in my case to get these quotes to display correctly.

1
2
3
{% blockquote author , source link source_link_title %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Hexo Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

author source link source_link_title

2 – Book Quote

Same as the previous step but in the context of a book quote. Another space on both sides of the comma was required for me when trying to get the book name plus author to display properly.

1
2
3
{% blockquote S.W. Erdnase , The Expert at the Card Table %}
"The slightest action that appears irregular, the least effort to distract attention, or the first unnatural movement, will create suspicion; and mere suspicion will deplete the company..."
{% endblockquote %}

Hexo Output

“The slightest action that appears irregular, the least effort to distract attention, or the first unnatural movement, will create suspicion; and mere suspicion will deplete the company…”

S.W. Erdnase The Expert at the Card Table

3 – Twitter Quote

Tweets can be used to create a quote using the same format, in my case two spaces were needed to separate the twitter handle and URL.

1
2
3
{% blockquote @climagic  https://twitter.com/climagic/status/633643481081249792 %}
The reason English is used so much in computers is because this rich language allows for the creation of so many damn acronyms.
{% endblockquote %}

Hexo Output

The reason English is used so much in computers is because this rich language allows for the creation of so many damn acronyms.


4 – Web Article Quote

This quote is sourced from a web page still using the same formatting as before. Once again two spaces had to be inserted between the author name and web address to make the formatting work (for myself at least).

1
2
{% blockquote Azual Skoll  https://www.themittani.com/features/history-npsi %} "We do not take PVP personally, and have no problem whatsoever with being shot at […] by you or your corporation. This has no effect on our attitude towards you or your access to our classes and services. We enjoy fights, and we'll actually be much more offended if you don't shoot us! Similarly, if we engage you without provocation (which we will) this doesn't mean we don't like you, it just means we like to PvP. This is true regardless of how friendly we are with you and whether or not you've taken classes with us in the past. We observe the Class Peace but after that you're fair game."
{% endblockquote %}

Hexo Output

“We do not take PVP personally, and have no problem whatsoever with being shot at […] by you or your corporation. This has no effect on our attitude towards you or your access to our classes and services. We enjoy fights, and we’ll actually be much more offended if you don’t shoot us! Similarly, if we engage you without provocation (which we will) this doesn’t mean we don’t like you, it just means we like to PvP. This is true regardless of how friendly we are with you and whether or not you’ve taken classes with us in the past. We observe the Class Peace but after that you’re fair game.”


Code Snippets

1 – Plain Code Snippet

Here’s another way of inserting a code block into a post:

1
2
3
{% codeblock title lang:language url link text %}
System.out.print("Hello World!");
{% endcodeblock %}

Hexo Output

title url link text
1
System.out.print("Hello World!");

2 – Language Code Snippet

This is the same method as in the last step but with a language (Java) included:

1
2
3
{% codeblock title lang:java url link text %}
System.out.print("Hello World!");
{% endcodeblock %}

Hexo Output

title url link text
1
System.out.print("Hello World!");

3 – Caption Code Snippet

Same again but with an added caption.

1
2
3
{% codeblock lang:java import calendar class %}
import java.util.Calendar;
{% endcodeblock %}

Hexo Output

import calendar class
1
import java.util.Calendar;

4 – Caption URL Code Snippet

A URL can be added to the caption to provide an external link to the code source.

1
2
3
4
{% codeblock lang:java _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

Hexo Output

_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

External

1 – jsFiddle

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

With actual values substituted in e.g.

1
{% jsfiddle ccWP7 js,html,result %}

Hexo Output


2 – Gist

1
{% gist gist_id [filename] %}

When actual values are substituted in it becomes:

1
{% gist 1027674 gist_tag.rb %}

Hexo Output


3 – YouTube Video Embeds

1
{% youtube 640 360 video_id %}

Once the video_id is added (this should be the embed code not the usual sharing code) the video is embedded into the page:

1
{% youtube AdfFnTt2UT0 %}

Hexo Output

I would suggest using a “raw” tag or an iframe instead so you can specify the dimensions for the video. Unless your Hexo theme sizes the embedded video properly. No extra parameters for the YouTube tag seem to work that I have tried - in my case.


4 – Vimeo Video Embed

1
{% vimeo video_id %}

This uses the “video ID” that comes from the base URL of a vimeo video page e.g.

https://vimeo.com/96896680

1
{% vimeo 96896680 %}

Hexo Output

Same as before if you have the same sizing problem as me use a “raw” tag or an iframe instead so you can specify the dimensions for the video.


HTML

1 – iFrame

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

With a YouTube video as an example (Notice it’s the embed URL used) and there’s dimensions that can be set this time:

1
{% iframe https://www.youtube.com/embed/AdfFnTt2UT0" 1080 500 %}

Hexo Output


2 – Custom Image

I assume this is if you store any images in the assets folder of Hexo, and have it enabled in the _config.yml file.

I never use this so I’m not going to provide an example, but what you need to substitute in is shown in the next code block:

1
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

This one’s lets you modify a hyper-link, although I’ve never used it instead of normal markdown for links.

1
{% link text url [external] [title] %}

Here’s an example with actual contents; not sure whether this is how it’s properly used though:

1
{% link Grunt's Official Website http://gruntjs.com/ %}

Hexo Output

Grunt's Official Website

4 – Raw HTML

If certain content is causing processing issues in your posts, you can wrap it with the raw tag to avoid rendering errors.

1
2
3
{% raw %}
HTML tags and content
{% endraw %}

1
2
3
{% raw %}
<script src='//redditjs.com/subreddit.js' data-subreddit='eve'></script>
{% endraw %}

Hexo Output


More Information

Easily deploy an SSD cloud server on Digital Ocean in 55 seconds. Sign up using my link and receive $10.00 in free credit: https://www.digitalocean.com/?refcode=e91058dbfc7b

– Scarlz: @5car1z