Posts Tagged “tag”

Saturday, September 9, 2017
  Writing a Hexo Tag Plugin

In the process of migrating Daniel's Weekly Devotions to Hexo, we ran into a problem that we felt sure a tag plugin could solve.

The Problem

Jekyll's Markdown parser follows the original one, where text within an HTML tag is not processed. This can be the desired behavior in many cases, as you could put what would otherwise be translated as Markdown between HTML tags, and the parser/renderer will leave it alone. One of the common features, used multiple times in most posts, are links to Scripture references and blocks of quoted text. We had an include to automate the links, but we needed a special class on the <blockquote> tag, which meant that all Scripture blockquotes could not use Markdown (or end up with “smartified” quotes and such; we had to use the HTML entities within these quotes.) We also included the verse numbers as superscripts within the quoted text; more tags.

It looked something like this… (the “ref” CSS class turns the text red)

<blockquote class="bible">
  <p>
    <sup>11</sup> …And Jesus said, <span class="ref">“Neither do I condemn you;
    go, and from now on sin no more.”</span>
  </p>
  <cite><a href="https://www.biblegateway.com/passage/?search=John+8:11&version=ESV"
    title="Read John 8:11 (ESV) at Bible Gateway">John 8:11</a>b <em>(ESV)</em></cite>
</blockquote>

If you've ever edited Markdown, you'll recognize how jarring all that HTML code is within the flow of the otherwise-regular text; and look at all those entities!

The Solution

We looked through at the Hexo Plugin List to find some examples, and began working towards writing a plugin to handle both the links (the part within the <cite> in the example above) as well as the entire blocks of quoted text. Some tags, like the {% codeblock %} tag, have a start tag and an end tag ({% endcodeblock %}); others, like the {% youtube %} tag, just pass arguments with the tag. (You can see all the default tags here.) Hexo passes two arguments to the tag plugin - the arguments within the (start) tag, plus the content (which is blank for tags that don't have an end tag). The returned value from the plugin call is substituted in the document.

For generating a link, that is pretty easy; it could be an inline tag, and it's just a matter of parsing the arguments and forming a link. For the quotes, we need to make sure that we include the content, and Hexo provides a way to run that content through the Markdown renderer. We are converging on a solution!

Hexo will pick up and execute any .js files in the scripts directory of the site as its generating it, so the first efforts were just local to that repo. The reference link looked something like this…

hexo.extend.tag.register('esv', (args, content) => {
  // option parsing with RegEx, similar to the way their tags do

  let reference = arg.trim()
  let urlReference = reference.split(' ').join('+')

  return `<a href="https://www.biblegateway.com/passage/?search=${urlReference}&version=${version}" `
    + `title="Read ${reference} (${version}) at Bible Gateway">${reference}</a>${extraText}${versionText}`
})

...which let the Markdown document go from…

<a href="https://www.biblegateway.com/passage/?search=John+8:11&version=ESV"
  title="Read John 8:11 (ESV) at Bible Gateway">John 8:11</a>b <em>(ESV)</em>

...to…

{% esv John 8:11 extra:b show-version %}

We refactored the link code to be version-agnostic and extracted it from the tag.register function so that we could reuse that for the blockquote citation. This made the local version of the blockquote look something like this:

hexo.extend.tag.register('bible', (args, content) => {
  let text = hexo.render.renderSync({ text: content, engine: 'markdown' })
  return `<blockquote class="bible">${text}<cite>— ${generateRef(args)}</cite></blockquote>`
})

This means that the blockquote can support all of the arguments the inline reference did. We also switched out the marked Markdown processor for the markdown-it one, which lets us do superscripts by using the ^ character. Revisiting our example under “The Problem,” our Markdown source to generate the same blockquote is now:

{% bible John 8:11 extra:b show-version %}
^11^...And Jesus said, <span class="ref">"Neither do I condemn you; go, and from
now on sin no more."</span>
{% endbible %}

The Plugin

The plugin is available on npm, is fully tested, and its source is open. If you use Hexo, and wish to cite Scripture references in your posts with links where readers can see the text for themselves - enjoy!

Categorized under ,
Tagged , , , ,

Saturday, September 2, 2017
  Mapping Categories and Tags with Hexo

This blog moved today from Jekyll to Hexo (and it's now open source as well). One of the final issues I had when wrapping up the conversion was how to handle categories and tags that do not necessarily have a slug that can be naturally derived from the name. Take the “C#” category, for example. The normal slug for that category would be c, which is an entirely different programming language; interestingly, “C++” will also normally get its slug as c.

Within Hexo's default _config.yml file, there are two empty items named category_map and tag_map; their comments allude to a mapping, but I could not find what the proper syntax was for those items. We hopped onto the Hexo Gitter chat and asked the question, and someone pointed us to this issue. To define a mapping, create an item under either the category_map or tag_map top-level item. The maps for this site, as they currently are, look like this:

category_map:
  C++: c-plus-plus
  C#: c-sharp
  .NET: dot-net
tag_map:
  c#: c-sharp
  .net: dot-net

As you can see by hovering over the links in the sidebar, “Programming > .NET > C#” ends up with a URL ending with /programming/dot-net/c-sharp/, which is exactly what we were looking for.

Categorized under
Tagged , , , , ,

Sunday, November 25, 2007
  Adding Tags to a WordPress Theme

WordPress 2.3 introduced tags, but unless you're using the default theme, your theme (like mine) probably didn't support them. Nowhere did I find a good example of how to add tags to your theme. Then, I was playing around with the theme switcher on my personal blog, and discovered that the default theme had tag support. I looked at it, and it was amazingly simple.

There is a new template tag called ...drumroll… the_tags. It takes three parameters: how to begin the list, how to separate each tag, and how to end the list. The tag does not do any output if a post hasn't been tagged, so it can safely sit in your theme until you need it to be active.

Here's how I did it in my personal blog.

<?php the_tags('<div class="tags">Tags » ', ' • ', '</div>'); ?>

Of course, you could also do it using an unordered list…

<?php the_tags('Tags<ul class="tags"><li>', '</li><li>', '</li></ul>'); ?>

Drop some styling for the “tags” class in your theme's CSS, and you're good to go!

(Well, not quite. You'll want to make sure to make the same change in your main index template, single post template, and archive template, so that the tags appear no matter how the user got to the post.)

Categorized under
Tagged , , ,