{"id":2258,"date":"2021-12-08T19:27:47","date_gmt":"2021-12-09T00:27:47","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=2258"},"modified":"2021-12-08T19:29:48","modified_gmt":"2021-12-09T00:29:48","slug":"showing-groups-of-pages-in-11ty","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/projects\/final\/showing-groups-of-pages-in-11ty\/","title":{"rendered":"Showing Groups of Pages in 11ty"},"content":{"rendered":"\n

There are a few ways that you can generate lists of pages (posts) in 11ty. This post looks at how to based on tags, custom front-matter variables, and listing all of the files in a folder.<\/p>\n\n\n\n

You can follow along with this by using the collections-example<\/a> repository. <\/p>\n\n\n\n

  1. Click on the link for the repo: https:\/\/github.com\/profstein\/collections-example<\/a><\/li>
  2. Click Use this template<\/strong><\/li>
  3. Go through the steps to create your version of the repository<\/li>
  4. Clone that new repository to VS Code.<\/li><\/ol>\n\n\n\n

    List all pages with a tag<\/h2>\n\n\n\n

    By default 11ty creates a collection for each tag on a page. You can use this to tell it to go through that collection and then show all of the pages that have a tag.<\/p>\n\n\n\n

    \n
    \n
    \n

    Example Code: List pages by tag<\/h4><\/div>\n\n\n\n
    <\/stop><\/stop><\/linearGradient><\/defs><\/svg><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n
    \n

    First you must add a tag to pages in their front matter. For example you might create post.md<\/strong> and put this front-matter in<\/p><\/div>\n\n\n\n

    <\/p><\/div>\n\n\n\n

    ---\ntitle: Post 1\nlayout: post.njk\ntags: [post, othertag]\n---<\/code><\/pre>\n\n\n\n
    Then you can add this same tag in front-matter of other pages.<\/p>\n\n\n\n
    List Pages with “post” tag<\/h2>\n\n\n\n
    Next we will create the list of posts. This can be wherever you want. In this example we will create a blog.md file and put this in to list the pages:<\/p>\n\n\n\n
    <ul>\n  {%- for post in collections.post %}\n  <li>\n  <a href=\"{{ post.url }}\">\n  {{ post.data.title }}\n  <\/a>\n  <\/li>\n  {%- endfor %}\n<\/ul><\/code><\/pre>\n\n\n\n
    Note: <\/strong>To list posts with a different tag, you would change what collection you were using in the For Loop. For example to list posts with a banana tag:<\/p>\n\n\n\n
    {%- for post in collections.banana<\/strong> %}<\/code><\/pre>\n<\/div><\/div><\/div>\n<\/details>\n\n\n\n
    List all pages with custom front-matter<\/h2>\n\n\n\n
    <\/p>\n\n\n\n
    \n
    \n
    \n
    Example Code: List pages with custom front-matter<\/h4><\/div>\n\n\n\n
    <\/stop><\/stop><\/linearGradient><\/defs><\/svg><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n
    \n
    First you must add the custom front matter. For example you might create post.md<\/strong> and put this front-matter to track the author<\/p><\/div>\n\n\n\n
    <\/p><\/div>\n\n\n\n
    ---\ntitle: Post 1\nlayout: post.njk\ntags: [post, othertag]\nauthor: Imani Washington\n---<\/code><\/pre>\n\n\n\n
    Then you can add this same author variable to other posts.<\/p>\n\n\n\n
    List Pages with a specific author value<\/h2>\n\n\n\n
    Next we will create the list of posts for an author. The trick here is adding the if statement to check for posts with the author value we want.<\/p>\n\n\n\n
    <p>Posts by Imani Washington\n<ul role=\"list\">\n{% for post in collections.post %}\n{% if author == \"Imani Washington\" %}<\/strong>\n<li>\n    <a href=\"{{ post.url }}\">\n        {{ post.data.title }}\n    <\/a>\n<\/li>\n{% endif %}<\/strong>\n{%- endfor %}\n<\/ul><\/code><\/pre>\n\n\n\n
    Note: <\/strong>The if statment is the key here that means it only shows pages that have a specific author tag.<\/p>\n\n\n\n
    Below is a more full-featured way of doing the same thing where we could lists add aria-current if the page being listed is the one we’re on.<\/p>\n\n\n\n
    <p>Posts by {{author}}\n<ul role=\"list\">\n{% for post in collections.post %}\n{% if author == post.data.author %}\n<li>\n    <a \n    {% if post.url === page.url %}aria-current=\"page\"{% endif %} \n    href=\"{{ post.url }}\">\n        {{ post.data.title }}\n    <\/a>\n<\/li>\n{% endif %}\n{%- endfor %}\n<\/ul><\/code><\/pre>\n<\/div><\/div><\/div>\n<\/details>\n\n\n\n
    \n
    \n
    First you must add a tag to pages in their front matter. For example you might create post.md<\/strong> and put this front-matter in<\/p><\/div>\n\n\n\n
    <\/p><\/div>\n\n\n\n
    ---\ntitle: Post 1\nlayout: post.njk\ntags: [post, othertag]\n---<\/code><\/pre>\n\n\n\n
    Then you can add this same tag in front-matter of other pages.<\/p>\n\n\n\n
    List Pages with “post” tag<\/h2>\n\n\n\n
    Next we will create the list of posts. This can be wherever you want. In this example we will create a blog.md file and put this in to list the pages:<\/p>\n\n\n\n
    <ul>\n  {%- for post in collections.post %}\n  <li>\n  <a href=\"{{ post.url }}\">\n  {{ post.data.title }}\n  <\/a>\n  <\/li>\n  {%- endfor %}\n<\/ul><\/code><\/pre>\n\n\n\n
    Note: <\/strong>To list posts with a different tag, you would change what collection you were using in the For Loop. For example to list posts with a banana tag:<\/p>\n\n\n\n
    {%- for post in collections.banana<\/strong> %}<\/code><\/pre>\n<\/div><\/div><\/div>\n\n\n\n
    \n
    \n
    Example Code: List pages by tag<\/h4><\/div>\n\n\n\n
    <\/stop><\/stop><\/linearGradient><\/defs><\/svg><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n<\/details>\n\n\n\n
    <\/p>\n\n\n\n
    List all pages in a folder<\/h2>\n\n\n\n
    This one allows you to list all pages in a folder. That means you don’t have to remember to add the same tag to all of the files you want to include. It does mean that you have to add some custom code to .eleventy.js to create the Custom Collection. A Custom Collection is one that you define (instead of one 11ty automatically defines, like for tags).<\/p>\n\n\n\n
    \n
    \n
    \n
    Example Code: List pages in a folder<\/h4><\/div>\n\n\n\n
    <\/stop><\/stop><\/linearGradient><\/defs><\/svg><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n
    \n
    First we have to edit .eleventy.js<\/strong> in order to add a Custom Collection. It is important to add this eleventyConfig<\/strong> right after the other eleventyConfig<\/strong> statements and before the return<\/strong><\/p><\/div>\n\n\n\n
    \"screenshot<\/figure><\/div>\n\n\n\n
    eleventyConfig.addCollection(\"postsFolder\", function(collectionApi) {\n    return collectionApi.getFilteredByGlob(\"**\/posts\/*.md\").sort(function(a, b) {\n      \/\/return a.date - b.date; \/\/ sort by date - ascending\n      return b.date - a.date; \/\/ sort by date - descending\n    });\n});<\/code><\/pre>\n\n\n\n
    Now we have defined a Custom Collection named postsFolder<\/strong>. We can use this like the tag collections.<\/p>\n\n\n\n
    If you wanted to use a different folder then you could change “**\/posts\/*.md”<\/strong> to something else like “**\/gallery\/*.md”<\/strong> if you had a gallery folder.<\/p>\n\n\n\n
    Next we will create the list of posts. This is like we did for tags but using the custom collection name.<\/p>\n\n\n\n
    <ul>\n  {%- for post in collections.postsFolder<\/strong> %}\n  <li>\n  <a href=\"{{ post.url }}\">\n  {{ post.data.title }}\n  <\/a>\n  <\/li>\n  {%- endfor %}\n<\/ul><\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    <\/p>\n<\/div><\/div><\/div>\n<\/details>\n","protected":false},"excerpt":{"rendered":"
    There are a few ways that you can generate lists of pages (posts) in 11ty. This post looks at how to based on tags, custom front-matter variables, and listing all of the files in a folder. You can follow along with this by using the collections-example repository. Click on the link for the repo: https:\/\/github.com\/profstein\/collections-example… Continue reading Showing Groups of Pages in 11ty<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[146,150,113],"tags":[114,54,108],"coauthors":[87],"class_list":["post-2258","post","type-post","status-publish","format-standard","hentry","category-eleventy","category-eleventy-site","category-final","tag-dynamic","tag-eleventy","tag-list","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"
    There are a few ways that you can generate lists of pages (posts) in 11ty. This post looks at how to based on tags, custom front-matter variables, and listing all of the files in a folder. You can follow along with this by using the collections-example repository. Click on the link for the repo: https:\/\/github.com\/profstein\/collections-exampleClick Use this templateGo through the steps to create your version of the repositoryClone that new repository to VS Code. List all pages with a tag By default 11ty creates a collection for each tag on a page. You can use this to tell it to…<\/p>\n","category_list_v2":"Eleventy<\/a>, Eleventy Site<\/a>, Final<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"comments_num_v2":"1 comment","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"uagb_comment_info":1,"uagb_excerpt":"There are a few ways that you can generate lists of pages (posts) in 11ty. This post looks at how to based on tags, custom front-matter variables, and listing all of the files in a folder. You can follow along with this by using the collections-example repository. Click on the link for the repo: https:\/\/github.com\/profstein\/collections-example……","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/2258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/comments?post=2258"}],"version-history":[{"count":5,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/2258\/revisions"}],"predecessor-version":[{"id":2265,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/2258\/revisions\/2265"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media?parent=2258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/categories?post=2258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/tags?post=2258"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/coauthors?post=2258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}