I've recently attempted to setup tags on my blog posts I'm attempting to create a page as detailed in the docs to be able to see posts with various tags. I've setup a template using src/templates/Tag.vue and updated my gridsome.server.js file as suggested:
api.loadSource((actions) => {
const posts = actions.addCollection("Post");
const tags = actions.addCollection("Tag");
// makes all ids in the `tags` field reference a `Tag`
posts.addReference("tags", "Tag");
tags.addNode({
id: "1",
title: "The author",
});
posts.addNode({
id: "1",
title: "A post",
tags: ["1"],
});
});
but how do I actually create that page? Do I need ot setup it up my config file to create it? Or do I setup a single file component? I don't understand and the docs aren't clear it seems as though it's missing a step or am I misunderstanding? Has anyone done this if so what am I missing? I am referencing the tags under the posts in my config.
{
use: "@gridsome/source-filesystem",
options: {
typeName: "Post",
path: "content/posts/**/*.md",
refs: {
// Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
tags: {
typeName: "Tag",
create: true,
},
},
},
},
Any help appreciated.
Top comments (5)
If similar to Gatsby, it is possible to avoid using GraphQL.
Also, you can use template instead of page.
Thanks for the reply. I've setup a template but not sure how I then get a list of posts with tags? Is it just I need to add it to my config? I'm missing something I'm just not sure what that is.
Have you tried GraphQL explorer?
Didn't try it, but maybe this can help? gridsome.org/docs/taxonomies/
Thanks I've followed that but it doesn't make sense. I've even looked at the default blog starter and tried copying that but that fails too. I'll have to take a closer look this weekend try and figure it out.