Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Sitewide Metadata to reuse throughout a site.

Metadata, how to use it sitewide

Author: Will Moody

Published:

Reading Time: (approx) 1 min

Tags that this post has been filed under.

When using Gridsome, if you aren't using a CMS to edit site information you can store information in your gridsome.server.js under the load source store and use this throughout your website.

This is my store section of the gridsome.server.js:-

api.loadSource(async (store) => {
   store.addMetadata('company', 'Gridsome Goodliness'),
   store.addMetadata('slogan', 'Gridsome Snippets & Ideas'),
    store.addMetadata('author', 'Will Moody'),
    store.addMetadata('mobile', 'tel:07841300999'),
    store.addMetadata('mobileDisplay', '07841 300999'),
    store.addMetadata('telephone', 'tel:01607717999'),
    store.addMetadata('telephoneDisplay', '01607 717999'),
    store.addMetadata('address', '201 Blofield Road'),
    store.addMetadata('village', 'Blofield Heath'),
    store.addMetadata('city', 'Norwich'),
    store.addMetadata('county', 'Norfolk'),
    store.addMetadata('postcode', 'NR13 5EJ')
})

You can then do a static query like this on any page, layout or component:-

<static-query>
   query {
     metadata {
       company
       slogan
     }
   }
</static-query>

And use it like this:-

{{ $static.metadata.company }}

Simple but effective.

Just remember if you change any data in the gridsome.server.js file you will need to stop and then restart the server for the changes to be reflected in your pages etc.

Previous Article: Your Contract Termination Policy

Next Article: Manipulating Colours Using HSLA & CSS Variables