Shadowing Gatsby theme
— Front-end, GatsbyJS — 1 min read
I used minimal-blog provided by LekoArts when I built this site with GatsbyJS. I love this theme, simple & stylish, and everything I needed is prepared. But I also wanted to modify a little.
This article introduces how to modify Gatsby theme, and what "Shadowing" is.
What is shadowing
There is a function to modify componetns and files in Gatsby. Simply it's called "Shadowing" when you want to customize Gatsby themes.
You basically don't modify original files directly, but make new files to override the original files.
Here is more information about shadowing. Shadowing in Gatsby Theme
Shadowing a footer file
Maybe it's nice to have a specific example. So let's shadow a footer file this time, and change footer contents.
Finding the file you want to modify
First you find a file you want to modify from original theme directory.
1node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/footer.tsx
Create directory
Next you create src
folder in your site directory, and also create @lekoarts/gatsby-theme-minimal-blog
folders in src
folder.
1yoursite/src/@lekoarts/gatsby-theme-minimal-blog
Copy the file
If you put components or files into yoursite/src/@lekoarts/gatsby-theme-minimal-blog
which are same names as original one, you can customize the Gatsby theme.
This time, you modify footer.tsx
in components
folder, so you need to create components
first.
1yoursite/src/@lekoarts/gatsby-theme-minimal-blog/components
Then you can copy footer.tsx
file from node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/footer.tsx
, and put into components
folder you created now.
1yoursite/src/@lekoarts/gatsby-theme-minimal-blog/components/footer.tsx
This is the contents in footer.tsx
1/** @jsx jsx */2import { jsx, Link } from "theme-ui"3import useSiteMetadata from "../hooks/use-site-metadata"4
5const Footer = () => {6 const { siteTitle } = useSiteMetadata()7
8 return (9 <footer10 sx={{11 boxSizing: `border-box`,12 display: `flex`,13 justifyContent: `space-between`,14 mt: [6],15 color: `secondary`,16 a: {17 variant: `links.secondary`,18 },19 flexDirection: [`column`, `column`, `row`],20 variant: `dividers.top`,21 }}22 >23 <div>24 © {new Date().getFullYear()} by {siteTitle}. All rights reserved.25 </div>26 <div>27 <Link28 aria-label="Link to the theme's GitHub repository"29 href="https://github.com/LekoArts/gatsby-themes/tree/main/themes/gatsby-theme-minimal-blog"30 >31 Theme32 </Link>33 {` `}34 by35 {` `}36 <Link37 aria-label="Link to the theme author's website"38 href="https://www.lekoarts.de?utm_source=minimal-blog&utm_medium=Theme"39 >40 LekoArts41 </Link>42 </div>43 </footer>44 )45}46
47export default Footer
Modify contents
Now you're ready to modify contents !
In my case, I deleted 「All rights reserved」and「Theme by LekoArts」, and added 「Built with GatsbyJS」instead.
Here is the code.
1/** @jsx jsx */2import { jsx } from "theme-ui"3import useSiteMetadata from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-site-metadata"4
5const Footer = () => {6 const { siteTitle } = useSiteMetadata()7
8 return (9 <footer10 sx={{11 boxSizing: `border-box`,12 display: `flex`,13 justifyContent: `space-between`,14 mt: [6],15 color: `secondary`,16 a: {17 variant: `links.secondary`,18 },19 flexDirection: [`column`, `column`, `row`],20 variant: `dividers.top`,21 }}22 >23 <div>24 © {new Date().getFullYear()} by {siteTitle}.25 </div>26 <div>27 Built with GatsbyJS28 </div>29 </footer>30 )31}32
33export default Footer
Before:
After:
Of course, you can make any changes wherever you want, and you can even use JS file if you don't write TypeScript :)
Conclusion
I still learn a lot about GatsbyJS, but I'm happy if this article helps. Gatsby theme is dynamic and poweful. I would try to customize more themes or make original themes :)