'How to directly fetch permalink data (URL) from font-matter in 11ty?

I need some help with changing the URL/ permalink of my blog posts in 11ty. Currently, it's making the slug with the title of the post. However, I want it to make a slug that I want. For example: for this post named "Alphabets start from A B C", 11ty is creating url(slug) as "/alphabets-start-from-a-b-c". I want it to be as "/alphabets-start-a-b-c".

Here's my posts.11tydata.js file:

module.exports = {
  layout: 'post',
  title: 'Untitled',
  eleventyComputed: {
    permalink: "/{{ page.fileSlug }}/",
    featured_image: (data) => {
      if (data.featured_image) {
        if (data.featured_image.search(/^https?:\/\//) !== -1) {
          return data.featured_image;
        }
        return `/assets/img/${data.featured_image}`;
      } else {
        return false;
      }
    }
  }
};

Please tell me a way so that I can directly fetch customized url of post from font-matter.

title: Alphabets start from A B C
body_class: blog
featured_image: lumberg.jpg
description: The first blog post in the new site.
permalink: alphabets-start-a-b-c
eleventy


Solution 1:[1]

After reading through 11ty Docs, I got a workaround by using variable {{ page.filePathStem }}.

So now my posts.11tydata.js file look like:

module.exports = {
  layout: 'post',
  title: 'Untitled',
  eleventyComputed: {
    permalink: (data) => "/{{ page.filePathStem }}/",
    featured_image: (data) => {
      if (data.featured_image) {
        if (data.featured_image.search(/^https?:\/\//) !== -1) {
          return data.featured_image;
        }
        return `/assets/img/${data.featured_image}`;
      } else {
        return false;
      }
    }
  }
};

And Front Matter for my example looks like:

title: Alphabets start from A B C
body_class: blog
featured_image: lumberg.jpg
description: The first blog post in the new site.
permalink: "{{ page.filePathStem }}"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rakshit soral

Related Questions