Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including eleventy-plugin-blog with all npm packages installed. Try it out:

var eleventyPluginBlog = require("eleventy-plugin-blog")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

eleventy-plugin-blog v0.2.0

Zero configuration blog featyres for 11ty

eleventy-plugin-blog

Zero config blog features for 11ty

This plugin still requires a bit of love in terms of documentation. See my personal blog code to see all examples of use.

Features

  • Tags, Categories and API to create new taxonomies (paginated)
  • Calendar (paginated)

Installation

npm install --save eleventy-plugin-blog
# OR
yarn add eleventy-plugin-blog

Usage

Runnoing examples

Go to the folder with given example and run:

../../generate-examples.js -o . -n 500
npx @11ty/eleventy

All massive output will be created balazzingly fast to show you how it works.

Basic

To start using you just need to add the plugin into your .eleventy.js file.

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-plugin-blog"));
};

This will produce following collections:

  • blog all posts, paginated
  • blog_flat all posts, flat
  • all all pages (using native 11ty)
  • pages all pages with frontmatter page: true
  • tag posts grouped by tags, paginated
  • category posts grouped by categories, paginated
  • category_list list of all categories
  • tag_list list of all tags
  • calendar posts grouped by year or year and month, paginated

See example zero config for all templates.

Complex

API

Example template for rendering Page[]

See life example

<ul>
{%- for post in postslist.items -%}
  <li>
    {%- include 'tile.njk' -%}
  </li>
{%- endfor -%}
</ul>

paginate(options): IndexPage[]

Create paginated index of pages

Options

FieldTypeDescription
pagesIterableCollection of 11ty pages
slugStringSlug to be applied (see notes below)
prefixStringSlug prefix
titleStringGiven title
metaObject | UndefiendAdditional data to bound to each index page (see generateCalendar
itemsPerPageNumberNumber of 11ty pages on each index page

Slugs will be generated as follows:

  • First page ${slug}
  • Every next page ${slug}/page-${pageNumber}

IndexPage

FieldTypeDescription
titleStringGiven title
slugStringGenerated slug (as described above)
pagenumberNumberNumber of given page (starting from 0)
urlStringConcatenated value from prefix and slug
totalNumberNumber of pages
slugsSlugs
itemsPage[]11typ pages on given page
...metaAnything that came from meta input

Slugs

FieldTypeDescription
allString[]List of all pages slugs
nextString | NullSlug of the next page
previousString | NullSlug of the previous page
firstString | NullSlug of the first page
lastString | NullSlug of the last page

Example template

See live example

---
title: Blog
pagination:
  data: collections.blog
  size: 1
  alias: postslist
permalink: /blog/{%- if postslist.pagenumber > 0 -%}{{ postslist.pagenumber }}{%- endif -%}/index.html
topNav: postslist.pagenumber == 0
---
{%- include 'postslist.njk' -%}

generatePaginatedBlog(eleventyConfig, Options)

Generates simple paginated blog. Uses paginage over given blog globs and can apply template

Options

FieldTypeDescription
blogPostTemplateString | UndefinedPath to blog post template
blogString[]Globs for blog posts
itemsPerPageNumberCustom number of items per page

See live example - indirect use

For a template example see paginate.

generateCalendar(eleventyConfig, Options)

Generates calendar grouping by years and months.

Options

FieldTypeDescription
blogString[]Globs for blog posts
itemsPerPageNumberCustom number of items per page

IndexPage objects generated here will be extended using meta field with

FieldTypeDescription
yearStringYear for annual group
monthString | UndefinedMonth for monthly group
type'year' | 'month'Type of group
shortTitleString | UndefinedFormatted title for month groups

Template examples

generateTaxonomy(eleventyConfig, Options)

TBD

generateBooleanCollection(eleventyConfig, Options)

TBD

Filtes

blog_top

TBD

blog_slug

TBD

blog_dateformat

TBD

blog_first

TBD

Kudos

Inspired by Jérôme Coupé

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free