What is theme file structure in gatsby?

Share

What are Gatsby themes?

Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. Gatsby themes are separate sites that are put together to split up large, complex projects.

Theme file structure

Theme file structure refers to the directory of the the built-in and user-defined themes. These themes can be created by the users themselves. Users are also able to inspect this file structure. These file structures are mostly used to find directories and file paths when it comes to theme shadowing. Below is an example of the theme file structure of a gatsby-theme-blog.

gatsby-theme-blog

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
└── src
    ├── components
    │   ├── bio-content.js
    │   ├── bio.js
    │   ├── header.js
    │   ├── home-footer.js
    │   ├── layout.js
    │   ├── post-date.js
    │   ├── post-footer.js
    │   ├── post-hero.js
    │   ├── post-link.js
    │   ├── post-list.js
    │   ├── post-title.js
    │   ├── post.js
    │   ├── posts.js
    │   └── seo.js
    ├── gatsby-plugin-theme-ui
    │   └── components.js
    └── gatsby-theme-blog-core
       └── components
          ├── post.js
          └── posts.js

Copyright ©2024 Educative, Inc. All rights reserved