How do you create new taxonomies with Eleventy?

#1

Hey everyone!

Over the last year, I’ve been trying to get into Static Site Generators as they are very well suited for a couple of projects I have in my mind. However, I’ve stumbled on the problem that I’m not “techy” enough to understand how to customize one to my needs. I am very good with HTML/CSS but not that much with imperative programming. And I’ve discovered that, from my perspective, SSGs are built “by power users for power users”. And that’s frustrating.

So far I’ve experimented a bit with Hugo and Eleventy. And I haven’t got very far. What I need is the ability to create custom taxonomies, allowing me to group posts in groups as I need them. For example, many SSGs put blog posts in the /posts section. I don’t like that. Instead, I need /blog, but also /articles and /resources and /directory and many other such taxonomies, each one with its specific parameters.

I like the simplicity of Eleventy and I would like to go on further with this product. But I don’t know how to get further. Can you point me to any resources that can explain the process for less technical people?

Thanks!

Learning Nunjucks
#2

11ty lets you be completely flexible on that score - I use /articles/category-name/post-name as the format on my site.

I recommend this video if you haven’t already watched it. It’s a good starting point, and covers quite a bit pretty quickly. I ported my site from plain html to a basic 11ty version after about 10 minute of it

2 Likes
#3

I think the /posts thing just uses tags - so you can show a page of any tag. Or you can also do straight-up custom taxonomies. Here’s a blog post on it:

1 Like
#4

I will have a look at the resources you gave me. Thanks for helping me out!

1 Like
#5

Yeh I use tags extensively for taxonomies. Each tag essentially creates a collection, too, so they’re really handy for querying certain types of content.

1 Like
#6

In my mind tags are for further granulation inside a given category. Like differentiating between different topics for articles or blog posts.

#7

You can add any data you like to content, so if that’s how you’re seeing it, using the data system to create a higher level of categories, which you then reference in your frontmatter could work.

I made this yesterday: https://educationlinks.fyi/

It’s still tags, but I have this higher level reference which acts as a source of truth: https://github.com/hankchizljaw/educationlinks.fyi/blob/master/src/_data/categories.js

It’s certainly not fool-proof, but it solidifies stuff up :slight_smile:

#8

I finally found some spare time to go through some of the tutorials you showed me and a few from the “Getting Started” area of the official site. I’m loading the result of my work in this repo - https://github.com/AdrianSandu/eleventy

Currently I ran in my first issue. I created individual folders for each blog post or article. In the articles folder I also created an index.md to allow for some custom content before I load the list of all articles. Because I created also a json file for some of the front matter, my folder index.md is included into the collection. Is there any way to exclude that folder index from the loop?

image
image732×457 18.1 KB

The code can be found here https://github.com/AdrianSandu/eleventy/tree/master/articles

1 Like
#9

If everyone is OK with it, I’m going to treat this topic as my “today I learned” board. And today I learned how to nest layouts.

1 Like
#10

Today I refactored the layouts to use a base file layout. I added a nav (have to look into making active states) and found how to exclude listing pages from the collection they are displaying.

Next step is to create a collection of testimonials. I want to have a /testimonials/ page where I can see all the testimonials as a listing, but I don’t want separate pages for each testimonials. How do you suggest I go about this?

#11

I ran into a problem today that I couldn’t solve. I got the base layout as it follows and I am trying to move the nav into an external file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ pageTitle }}</title>
  <meta name="description" content="Test Bed project for learning how to use 11ty">
  <meta name="author" content="Adrian Sandu">
</head>
<body>
  <nav>
    <a href="/">Home</a> |
    <a href="/articles/">Articles</a> |
    <a href="/blog/">Blog</a>
  </nav>
  <hr>
  {{ content }}
</body>
</html>

I made a new file _includes/menus/main-nav.liquid but when I run the include command, it crashes:

{% include "menus/main-nav.liquid" %}

The console output is:

Error writing templates: (more in DEBUG output)
> Having trouble writing template: _site/articles/first-article/index.html

`TemplateWriterWriteError` was thrown
> ENOENT: Failed to lookup "menus/main-nav.liquid" in: _includes,_includes/layouts, file:_includes/layouts/base.liquid, line:11

`RenderError` was thrown
> ENOENT: Failed to lookup "menus/main-nav.liquid" in: _includes,_includes/layouts

`Error` was thrown:
    Error: ENOENT: Failed to lookup "menus/main-nav.liquid" in: _includes,_includes/layouts
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble writing template: _site/articles/first-article/index.html

`TemplateWriterWriteError` was thrown
> ENOENT: Failed to lookup "menus/main-nav.liquid" in: _includes,_includes/layouts, file:_includes/layouts/base.liquid, line:11

`RenderError` was thrown
> ENOENT: Failed to lookup "menus/main-nav.liquid" in: _includes,_includes/layouts

`Error` was thrown:
    Error: ENOENT: Failed to lookup "menus/main-nav.liquid" in: _includes,_includes/layouts

Anyone can help me with this, please?

#12

Got help from the Party Corgi discord. I had to add the following stuff to my .eleventy.js file:

module.exports = function(eleventyConfig) {
  eleventyConfig.setLiquidOptions({
    dynamicPartials: true
  });

  // your other config stuff
};

Problem solved

1 Like
#13

Good to know, thanks for sharing!

1 Like
#14

After fumbling around for two hours, today I learned how to convert my templates from Liquid to Nunjucks, how to display the last 5 elements of a collection and how to hook my CSS into my templates.

2 Likes
#15

Awesome! I’m very much a fan of Nunjucks over Liquid. Liquid was great in the Jekyll days, but I find Nunjucks suits the JS “back-end” of 11ty more.

Liquid is the default template language of 11ty though, I believe.

1 Like
#16

Noob question time about 11ty for all you jamstack wizards out here: can anyone point me to a tutorial about creating taxonomies that extend across existing taxonomies? Here is what I have in mind…

Let’s consider a website with multiple content sections, each being a stand-alone taxonomy: blog posts, articles, case studies, products, etc. I want something that can apply to any item from these collections. Like author or topic. I want a collection of authors for content so that I can list all the authors on my site. Or have the option to see all content from a single author, grouped by the initial taxonomy: all articles first, all blog posts second, all products, without having them mixed together like select everything where author=johndoe order by date.

The same thing would apply to topics like HTML, CSS, career, etc. Basically I want something like WordPress does, where you have authors, categories and tags, where one content item can have multiple tabs, but you can also show all items that are tagged with a specific tag.

If there’s nothing like this out there, here’s an idea for a tutorial as well :wink:

@hankchizljaw Maybe this can be one recipe in your cookbook course? Either the one in the works or a future one.

#18

Have you read this article?

#19

First time I see that article. Thanks for sharing!

1 Like