How to Create and Use an Eleventy Collection

Ed H AHSAA Blog
Ed's Blog Index & Contents

Aug 19, 2021 7:00

Getting fancy! How To Create and use Eleventy Collections. The power of Eleventy.

  1. I had an old old web page that was repetitive. A golf event that AHS Alumni had every year from 2003 until 2008 A great time to learn collections.
  2. I did !! Its straightforward with a bit of Eleventy magic.
  3. I kept the "golf" folder
  4. In that "golf" folder created "golf.json" with
  "tags": "golf",
  "permalink": false,

golf.json file is in golf folder

  1. Eleventy collections are added to the collections object by tags in the file front matter. Collections are available to all templates.
  2. "tags": "golf", creates a "golf" Eleventy collection
  3. "permalink": false, tells Eleventy not to render or output any files in the "golf" folder unless the front matter permalink for that file is set to something besides false.
  4. We want to use files in the golf folder as DATA files so therefore do not need to ouput or render any of those files.
  5. Now create data files in the golf directory. Create as many as you need Example: 2007.html and 2008.html they will not be rendered because we set the permalink to false in golf.json

2007.html as a data file using eleventy collections

  1. Now create 2003.html thru 2008.html and whatever other DATA you might need to fill the collections.
  2. Pull all the data together via collections in one file or multiple files that are rendered into the final output build file.