#Collection Slug

7 messages · Page 1 of 1 (latest)

vernal dawn
#

If I have "blog" collection, every blog post inside has a slug /blog/postname. how to remove blog/ from the slug and just use root and post name eg. /postname?

hot wrenBOT
#

Hi @vernal dawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, Astro does not currently support custom slug definitions for content collections. This is due to the fact that the slug field is reserved for slug generation.

In one of the GitHub issues, a user suggested the idea of adding a frontmatter id property that takes priority over slug when present. However, the contributor responded that they are planning to reshape slug resolution in the next version of Astro, and they wouldn't want to explore patches like an id property just yet.

In another issue, a contributor suggested manipulating the auto-generated slug where getStaticPaths() is called, if you're using static site generation. For example, you could remove a certain part from the start of the slug. However, this was in the context of internationalization and may not directly apply to your case.

Here's the example provided:

export async function getStaticPaths() {
  const pages = await getCollection('pages');
  return pages.map(p => ({
    params: {
      slug: p.slug.slice(p.slug.indexOf('/')), // remove /[locale]/ from start of slug
    },
    props: p,
  })
}

Please note that this is a workaround and may not be the best solution for your case. It's recommended to follow Astro's updates and discussions for more comprehensive solutions in the future.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vernal dawn kapa.ai is still learning and improving, please let us know how it did by reacting below

vernal dawn
#

@hot wren ok, i don't want to change slug, i just want to remove collection name from the route

hot wrenBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information provided in the extracts, it seems that Astro's routing system is designed to include the collection name in the route. This is because Astro uses file-based routing, where the file structure directly corresponds to the URL structure.

However, there's a workaround suggested in one of the GitHub issues. You can manipulate the permalink property in the createCollection function to generate custom URLs for your collection items. Here's an example:

export async function createCollection () {
    const allPosts =[
      { title: 'first post', slug: 'first-post' },
      { title: 'second post', slug: 'second-post' }
    ]

    return {
        routes: allPosts,
        permalink: ({ params: post }) => `/${post.slug}`,
        data: ({ params: post }) => post,
    }
};

In this example, the permalink function is used to generate a URL that only includes the post slug, effectively removing the collection name from the route.

Please note that this is a workaround and may not be the best solution for your case. It's recommended to follow Astro's updates and discussions for more comprehensive solutions in the future.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: