eleventy: How to duplicate the "Posts" functionality

Hello,

I need a “cooking recipe” on how to duplicate the “Posts” functionality. Practically, I want to have multiple folders and their respective collections and their individual layouts. I want my blog articles to sit in the “./articles” folder with their custom layout, portfolio items to sit in “./portfolio”, case studies in “./case-studies” and so on.

So far I couldn’t find a clear tutorial on how to achieve this goal. Ideally, I would want something like this: " Step 1: You need to duplicate the posts folder Step 2: do this in this file … Step X: Enjoy your new section of the site "

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 19 (10 by maintainers)

Most upvoted comments

Add a Content Type

  1. Create a folder with the plural content type name (i.e., /articles)

  2. (optional – this step is my personal preference) Create a front matter template with the singular content type name (i.e., /articles/article.front-matter.template), and include all front matter data fields for this content type that you plan to use

  3. Create a default data file for this content type with the plural content type name (make sure this matches the folder name, i.e., /articles/articles.json), and remember to include a layout and content_type

    i.e.:

    {
      "layout": "article",
      "content_type": "article"
    }
    
  4. If this content type will use a new layout, create that template file (i.e., /_includes/_layouts/article.html)

  5. If you created a new layout, add a layout alias using eleventyConfig.addLayoutAlias():

 eleventyConfig.addLayoutAlias('article', '_layouts/article');
  1. In .eleventy.js, use eleventyConfig.addCollection() to add a custom collection to return content from the new content type:
 // Return articles
 eleventyConfig.addCollection("articles", function(collection) {
     return collection.getAll().filter(function(item) {
         return item.data.content_type == "article";
     });
 });

https://docs.newprojectstarterkit.com/develop/content#add-a-content-type

For all who need help, I wrote an article about the solution.

Sorry, I’ve been busy with other things and I stopped checking this.

I’ve managed to do the thing I wanted, using the beginner tutorials with the current basic installation of Eleventy (using none of the starter packages). A big “Thank you!” to all that offered their help.

@AdrianSandu, Here is a repo showing (only) how to create many content types in Eleventy, without any other tools or unnecessary code (aside from a few lines of basic CSS): https://github.com/paulshryock/Eleventy-Content-Types-Example

Clone the repo, run npm i && npm run serve to see it in a browser at http://localhost:8080/.

Or define a custom collection based on them.