Option to use path in slug generation

Is your feature request related to a problem? Please describe.

When creating articles, sometimes they might have the title but since they are placed in different subdirectories under content, the filesystem will naturally not throw a name conflict error. However, when the url is directly called, the system will select only the latest one. I’d like to ensure that subdirectories or tags can be added to the slug generation to enforce uniqueness

content
 | -- django
       |-- basics.md --> http://localhost:3000/basics
 | -- java
       |-- basics.md --> http://localhost:3000/basics

Describe the solution you’d like

The slug generation can allow an option to use the path to the file as a part of the slug or each subfolder can have a default config.json that can be used to store the alias to be used instead of the complete directory path.

The options

With subdirectory as slug

content
 | -- django
       |-- basics.md --> http://localhost:3000/django/basics
       |-- advanced
            |-- orm_issues --> http://localhost:3000/django/advanced/orm_issues
 | -- java
       |-- basics.md --> http://localhost:3000/java/basics
       |-- advanced
            |-- orm_issues.md --> http://localhost:3000/java/advanced/orm_issues

With alias config

content
 | -- django
       |-- basics.md --> http://localhost:3000/django/basics
       |-- advanced
            |-- orm_issues --> http://localhost:3000/django/orm_issues
       |-- config.json ({"alias":"django"})
 | -- java
       |-- basics.md --> http://localhost:3000/basics
       |-- advanced
            |-- orm_issues.md --> http://localhost:3000/advanced_java/orm_issues
            |-- config.json ({"alias":"advanced_java"})

[tdwells90]

@VaZark I don’t think a PR is necessary, as the deep flag already provides you with what you need. The issue you’re facing is likely with your folder structure.

For example, you could have a folder structure like this:

/pages
  /_topic
    _slug.vue
    /advanced
      _slug.vue

And then, in your /pages/_topic/_slug.vue file:

asyncData({ $content, params }) {
  const postLink = `${params.topic}/${params.slug}`
  const post = await $content(topicLink).fetch()
  return { post }
}

This will return the content at that relative path in your content folder.

Edit: For the advanced directory, you will need to account for that in your folder structure, so I’ve edited my comment and you should be able to work out how to do it from there.

[ManasMadrecha]

You can easily do this:

1. Create a dynamic _.vue page. Here, fetch all your posts inside Content folder using where option with path query. You may use regex too for better querying, if your _.vue page is inside some other page. Of course, you need to choose {deep:true} too
2. For automatic route generation, add a list of children on this _.vue page.
   • For dynamic pages to work properly, in your Content folder, you need to have a md file and a folder of same name. So, these children will be the children files of the current post, based on the Content folder.
   • Now, to fetch a list of children, you can do this by fetching a new array of all posts filtered using where option with dir query.
   • Where you want to show this list of children is up to you. I usually prefer having it in a Left sidebar, with right Sidebar showing my table of contents.
   • EDIT: Tip 👉🏻 Left Sidebar can show Siblings of current post based on dir. Then, on the current post, this post’s children will show up based on v-if and dropdown.
3. Due to step 2 fetching, all your children (i.e. all your posts) will now have automatically generated routes, and these routes will have URL based on path. 😄