Generating Slug Using Date & Title In 11ty

Eleventy generates post slugs based on filenames by default.

I wanted to change this as my post filenames contain the creation date.

eg: '2023-06-20-Generating Slug Using Date Title In 11ty.md'

I also want post permalinks to be /YYYY/MM/DD/title.

Using Date #

Generating YYYY/MM/DD can be done using toISOString() with a combination of split() & join().

  eleventyComputed: {
    permalink(data) {
      if (data.permalink) {
        return data.permalink
      }
      const { date, fileSlug } = data.page
      const dateURL = date.toISOString().split('T')[0].split('-').join('/')
      return `${dateURL}/${fileSlug}/`
    },
  },

Date.prototype.toISOString() - Javascript | MDN

Using Title #

Making eleventy use the post title instead of the filename is really easy.

Replace fileSlug with a slugified title.

const titleSlug = slugify(data.title, { lower: true })

Final Code #

Putting the above changes together allows creation of post permalinks using date & title fields.

const slugify = require('slugify')
module.exports = {
  tags: ['posts'],
  layout: 'layouts/post.njk',
  eleventyComputed: {
    permalink(data) {
      if (data.permalink) {
        return data.permalink
      }
      const { date } = data.page
      const dateURL = date.toISOString().split('T')[0].split('-').join('/')
      const titleSlug = slugify(data.title, { lower: true })
      return `${dateURL}/${titleSlug}/`
    },
  },
}

Source Code #

The source for my 11ty blog is available on github.

11ty-equk