Advanced Customization

November 10, 2020

205 words

1 minutes

Don't like my design? Rude, but I understand. You can change every aspect of the website to your heart content. The whole website is broken into sensible reusable components. You can "shadow" any of them to change how the corresponding parts look like.

Take a look at all the components here. For example, to change the bio content, create a file src/gatsby-theme-blorg/components/bio-content.js (or .tsx if you like TypeScript better).

// src/gatsby-theme-blorg/components/bio-content.js
export default () =>
  <p>
    Hi, My name is XXX. Follow me on twitter <a href="https://twitter.com/xiaoxinghu">Here</a>.
  </p>

Restart your gatsby server, you will see the change right away.

You can fine grain every aspect of your website this way. All the files in the components folder can be "shadowed". Just mirror the path within this project, it will overwrite the default.

You can also reference any of the default components within your customized ones. E.g.

// src/gatsby-theme-blorg/components/layout.tsx
/** @jsx jsx */
import Header from 'gatsby-theme-blorg/src/components/header'
import { Container, jsx, Styled } from 'theme-ui'

export default ({ children }) => (
  <Styled.root>
    <Header title='My new title'/>
    <div>
      <h1>Hey, I just want to say hey.</h1>
      { children }
    </div>
  </Styled.root>
)

In the about example, you created your own Layout component, but you kept the default Header component from the theme.

If you find yourself tweaking these components more than you would like to, or you have a problem with the design of the overall layout, or maybe the design philosophy is not matching what's in your mind, it's time for you to create your website from scratch.

Tweet this.