Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-relative

The relative plugin adds a slug field (URI) to Gatsby file nodes of an appropriate type (by default to Yaml, JSON, Mdx and MarkdownRemark nodes). The value of the slug is the path relative to the first matching directory in the list of root directories (defaults to src/content and src/pages). A file extension is removed, an optional, configurable trailing slash is added. An index file name is omitted. For example, an src/content/posts/example.md file will have the /posts/example/ slug, and a src/content/posts/index.md file will have the /posts/ slug. The slug field could be used to actually create pages, or, just for convenience, it could be used in GraphQL queries (see, for example, gatsby-plugin-combine).

Install

npm install --save gatsby-plugin-relative

Configuration options

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-relative`,
    options: {
        types: ["Mdx", "MarkdownRemark"], // file types to add slugs to
        endsWith: ["Yaml"], // will match file types ending with "Yaml", e.g., LettersYaml or SnippetsYaml
        roots: ["/dir1/subdir1", "/dir2/subdir2"], // a list of directories relative to which slugs are calculated (defaults to *src/content* and *src/pages*)
        trailingSlash: true // an optional trailing slash
    },
  },
]

Later query using GraphQL

{
  allLettersYaml {
    edges {
      node {
        fields {
            slug
        }
      }
    }
  }
}
Docs
Tutorials
Plugins
Blog
Showcase