How do I use JSON/YAML in Hexo Templates?

Question

I've looked through the documentation for Hexo in it's entirety, but I'm still not exactly sure how to integrate structured data (YAML, JSON) into a page/post using Hexo templating. The closest I could find is the File Data section of the plugins documentation. I'm not really sure if this is what I'm looking for, and there aren't any examples of implementation.

For those familiar with Jekyllrb, the popular Ruby static site generator, you can use a _data directory to store JSON and YAML files. In templates you can reference this data using something like {% for event in site.data.events %}...{% endfor %}.

Is there an equivalent in Hexo?

Answer 1

If you want to access YAML or JSON data in your markdown files, then do the following.

1. Create your static data file: /source/_data/mydata.yml

var1: "value 1"
var2: "value 2"
var3: "value 3"

2. Then access it in your post /source/_posts/mypost.md:

---
title: "My Post"
data: 2021-01-01 14:41:29
---

{{ site.data.mydata.var1 }}

Answer 2

You may use expressions like <%= page.title %>, <%= page.date %> or even <%= page.foo %> (in EJS templates) where title, date and foo is a YAML attribute from the header of your post or page, e.g. source/_posts/2015-06-14-my-awesome-post.markdown":

---
layout: post
title: "My Awesome Post"
date: 2015-06-14T17:23:00+04:00
foo: bar
---
Hello World

Answer 3

Hexo 3 now does data files, Jekyll-style.

From documentation:

This feature loads YAML or JSON files in source/_data folder so you can use them in your site.

For example, add menu.yml in source/_data folder.

Home: /
Gallery: /gallery/
Archives: /archives/

And you can use them in templates:

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