Here are a few common examples of using the Ghost Content API within an Gridsome project.

The flexibility of the Ghost Content API allows you to feed posts, pages and any other pieces of content from your Ghost site into a Gridsome front-end. Below are a few code examples of how to do this.

If you just landed here, see the getting started with Gridsome page for more context!

Create tag archive pages

Using the Gridsome Blog Starter as a starting point, rename the current Tag.vue template to GhostTag.vue and replace the <page-query> section with the following:

<page-query>
query Tag ($path: String!) {
  tag:ghostTag (path: $path) {
    title: name
    slug
    path
    belongsTo {
      edges {
        node {
          ...on GhostPost {
            title
            path
            date: published_at (format: "D. MMMM YYYY")
            description: excerpt
            coverImage: feature_image
            content: html
            slug
          }
        }
      }
    }
  }
}
</page-query>

You can now access the tag archive page on /tag/:slug which will show all the posts filed under that tag.

Create author archive pages

To add an author archive page to your site, create a new file in /src/templates called GhostAuthor.vue. Use the following code within GhostAuthor.vue:

<template>
  <Layout>
    <g-image alt="Author image" class="author__image" v-if="$page.author.profile_image" :src="$page.author.profile_image"/>
    <h1>
      {{ $page.author.name }}
    </h1>

    <div class="posts">
      <PostCard v-for="edge in $page.author.belongsTo.edges" :key="edge.node.id" :post="edge.node"/>
    </div>
  </Layout>
</template>

<page-query>
query Author ($path: String!) {
  author:ghostAuthor (path: $path) {
    name
    path
    profile_image
    belongsTo {
      edges {
        node {
          ...on GhostPost {
            title
            path
            date: published_at (format: "D. MMMM YYYY")
            description: excerpt
            coverImage: feature_image
            content: html
            slug
          }
        }
      }
    }
  }
}
</page-query>

<script>
import PostCard from '~/components/PostCard.vue'

export default {
  components: {
    PostCard
  }
}
</script>

This will create an author page, which is available under /author/:slug rendering all posts written by this author, along with their unmodified author image (if available) and name.

Retrieve Ghost settings

The Gridsome Ghost Source Plugin adds site settings to metaData within the GraphQL schema. To retrieve that data use the following query:

{
  metaData {
    ghost {
      title
      description
      logo
      icon
      cover_image
      facebook
      twitter
      lang
      timezone
      navigation {
        label
        url
      }
      url
    }
  }
}

Further reading

Learn more about the Ghost API and specific endpoints in our API documentation. Otherwise check out our Integrations and how you can deploy your Gridsome site to platforms such as Netlify.