Customozing Layouts

[feresberbeche]

Hello, I just have a quick question, I am new to gatsby and I wanted to use your theme. I tried to shadow some of the layouts as described in here https://www.gatsbyjs.org/tutorial/using-a-theme/ but since everything is stored in gatsby-theme-try-ghost/packages/gatsby-theme-try-ghost/src/templates I didn't know how to do it. any help would be appreciated. Thanks

[styxlab]

It's possible and absolutely recommended to use shadowing for customizing this theme. Read this article about component shadowing to get started quickly.

The structure of this mono repo is not relevant for for your path layouts (just forget the directory structure of gatsby-theme-try-ghost for a moment). Just think of every package as a standalone program (like you would with any other npm package that you import).

Just have a look at gatsby-starter-try-ghost. The starter uses the base theme gatsby-theme-try-ghost and another theme gatsby-theme-ghost-dark-mode. The dark-mode theme shadows some of the base theme components. First, observe that you need both packages in package.json. Second, you need to configure them in gatsby-config.js.

The base theme gatsby-theme-try-ghost contains a file called DocumentHead.js which is shadowed by the dark-mode theme. The original path is:

gatsby-theme-try-ghost
└── src
    └── components
        └── common
            └── DocumentHead.js

To shadow DocumentHead.js in gatsby-theme-ghost-dark-mode the file must be placed in

gatsby-theme-ghost-dark-mode
└── src
    └── gatsby-theme-try-ghost
        └── components
            └── common
                └──DocumentHead.js

So basically, you need to create directory named exactly as the base theme, put it under src/ and follow the same directory structure as in the base theme. Hope that makes sense to you.

If your customizations could be used by many people, please consider to contribute to this project by sending a PR. I'd be happy to discuss with you if it fits into this project.

[feresberbeche]

I think you mean

gatsby-theme-ghost-dark-mode
└── src
    └── gatsby-theme-try-ghost
        └── components
            └── common
                └──DocumentHead.js

instead of

gatsby-theme-ghost-dark-mode
└── src
    └── gatsby-theme-ghost-dark-mode
        └── components
            └── common
                └──DocumentHead.js

if I understood correctly

[styxlab]

Thanks for catching this. I corrected it in the original post.