CODEWITHSUNDEEP
javascriptyamleleventy
Jay
Jay

Reputation: 173

Data from yaml files in 11ty / eleventy

On my 11ty site (skeleventy-starter) I want to parse hundreds of reviews. These reviews are stored in my data folder in a folder called reviews as individual yaml-files (named like this: "entry-7128372832.yml"). Each yaml file looks like this:

_id: 84494a00-b086-11ea-94d5-7f955bef1b4e
rating: 5
name: Name
review: "review body"
date: "2019-05-12T12:12:31.116Z"

I added the custom data file format to the 11ty config as stated in the documentation:

const yaml = require("js-yaml");

module.exports = (eleventyConfig) => {
  
// Yaml
 eleventyConfig.addDataExtension("yaml", (contents) =>
        yaml.safeLoad(contents)
 );
};

However, when I try to loop over the review-data in my .njk-files:

{% for review in reviews %}
    <p>{{ review.name }}</p>
    <p>{{ review.rating }}</p>
    <p>{{ review.review }}</p>
{% endfor %}

I neither seem to have access to the data nor get an error in the console. What am I missing here? Any help is appreciated. Thanks!

Upvotes: 7

Views: 1826

Answers (1)

shender
shender

Reputation: 1283

You need to change the file extensions for all of the _data/entry-*.yml files to use the .yaml extension (note the additional a).

The official file extension recommended by the YAML team is .yaml; however, .yml is also common out in the wild (see this SO question for a quick dive).

The code sample for YAML support in the Custom Data File Format docs is written to support the official .yaml extension.

In this line of your 11ty config "yaml" represents a literal file extension to support, not just the name of the colloquial name of the language:

eleventyConfig.addDataExtension("yaml", (contents) =>

If you want to expose both .yml and .yaml files in your _data/ directory, this will work:

eleventyConfig.addDataExtension('yaml', contents => yaml.safeLoad(contents))
eleventyConfig.addDataExtension('yml', contents => yaml.safeLoad(contents))

Note that the order of code above affects the 11ty Data Cascade. If there were a priority clash between a .yaml and a .yml file, .yml would win because the extension is added later.

Also important: 11ty just recently added YAML support in v0.10.0, so be sure you are at version 0.10.0 or higher.

Upvotes: 5

Related Questions