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.