Using Hexo Data Files

Alt Text — Learn how to use Hexo's Data Files.

If you have some data you'd like to load from a file and use to generate a widget for your Hexo blog, Data Files are just the ticket.

Or rather they would be if they worked.

Scratch that… they actually work just fine, but the documentation is kind of wrong (as of the time I'm writing this at least).

The idea is that you can create either a YAML or JSON file and store it in a directory called _data in your source directory, then spin through all the items in it in code.

Here's what the docs show:

{% for link in site.data.menu %}
  <a href="{{ link }}">{{ loop.key }}</a>
{% endfor %}

One of the comments says that the listed code works for Swig, but since everything else is documented for EJS it is a bit confusing.

So let's make a widget that uses a Data File successfully.

That's exactly how I implemented my blog's Popular Posts widget.

The first thing we need is a file with data.

Since I have some characters that don't play well with YAML, I have to wrap everything up in quotes.

My current file (popularposts.yml) looks like this:

"Formatted JSON in Notepad++": "/formatted-json-in-notepad/"
"Is It Hot In Here Or Is It Just My CPU?": "/is-it-hot-in-here-or-is-it-just-my-cpu/"
"DIY Productivity Tablet": "/diy-productivity-tablet/"
"Teaching PowerShell To Speak": "/teaching-powershell-to-speak/"
"Kindle To Raspberry Pi Via Remote Desktop": "/kindle-to-raspberry-pi-via-remote-desktop/"
"Configure Raspberry Pi As WiFi Router": "/configure-raspberry-pi-as-wifi-router/"
"Formatted JSON In Notepad++ Video": "/formatted-json-in-notepad-video/"
"My Secret Weapon: Pluralsight": "/my-secret-weapon-pluralsight/"
"Vim Eye For The Visual Studio Guy": "/vim-eye-for-the-visual-studio-guy/"
"Visual Studio Tip: Add Existing Directory": "/visual-studio-tip-add-existing-directory-aspx/"

If you've read my last post Creating a Hexo Widget, then you know that the base of a widget is this:

<% if (someConditionalIsTrue){ %>
  <div class="widget-wrap">
    <h3 class="widget-title">Your Widget Title Here</h3>
    <div class="widget">
      Your widget content here.
    </div>
  </div>
<% } %>

So we just need to adapt that and replace “Your widget content here” with code to spin through our list and spit out links.

Here's what my popularposts.ejs looks like:

<% if(site.data.popularposts) {%>
  <div class="widget-wrap">
    <h3 class="widget-title">Popular Posts</h3>
    <div class="widget">
      <ol class="numbered-list">
        <% for (item in site.data.popularposts) { %>
          <li><a href="<%= site.data.popularposts[item] %>"><%= item %></a></li>
          <% } %>
        </ol>
      </div>
    </div>
    <% } %>

As you can see the concept is the same, just the syntax is different.

On the first line you can see how to reference your data.

site.data.popularposts where “popularposts.yml” is the file name.

On line 6 you can see how to implement a for loop over the data items, and on line 7 you can see how to reference both the keys and values.

It's not really difficult and it works well, so it's a shame the docs are confusing people.

If you'd like a complete walkthrough of how to set up your blog with either Hexo or DocPad, be sure to check out my Pluralsight course Build a Better Blog with a Static Site Generator.

I'll walk you through everything from installing Hexo to prettying up the Landscape theme to adding comments with Disqus and deploying with Git.

My Twitter Feed