How to add multiple markdown to the same collection?

Hello I’m using Gridsome and NetlifyCMS how can I add multiple markdown to the same collections?
For example if I will add - {label: "Body2", name: "body2", widget: "markdown"} How can I call it in the query?
Actually when I have only 1 markdown I query it with content but now with 2?
In the comments my collection

Screenshot 2020-02-20 at 16.35.46

Screenshot 2020-02-20 at 16.35.32

Hi @93lucasp and sorry for the late reply.

Having a config.yml like so:

collections:
  - name: posts
    label: Posts
    label_singular: 'Post'
    folder: content/posts
    create: true
    fields:
      - label: Template
        name: template
        widget: hidden
        default: post
      - label: Title
        name: title
        widget: string
      - label: 'Cover Image'
        name: 'image'
        widget: 'image'
        required: false
      - label: Publish Date
        name: date
        widget: datetime
      - label: Body
        name: body1
        widget: markdown
      - label: Body
        name: body2
        widget: markdown

Will generate the following example file:

---
template: post
title: Title
date: 2020-02-25T09:04:39.357Z
body1: '**Body 1**'
body2: '*Body 2*'
---

See example PR.

You should be able to query it using GraphQL just like any other field, e.g.:

article: articles (path: $path) {
  title
  body1
  body2
  ...
}
2 Likes

@erez is not working during the rendering, also if I’m putting my body1 and body2 inside the v-html it doesn’t transform the markdown.
Usually to use 1 markdown in my file I use this:

This automatically will be my body in the yml file and my content in the query as I showed above.

If I change as you showed It doesn’t translate the markdown.
Did you understand what I mean? (My english is not super)
Any help?

Thanks for explaining @93lucasp, I understand the issue.
How would you expect the CMS to save multiple markdowns? I’m not sure if there could be multiple bodies.
You might need to process those fields separately in Gridsome

1 Like

yes, that’s why I think that maybe NetlifyCMS allow only 1 markdown for collection

Hi @93lucasp, I found this https://github.com/gridsome/gridsome/issues/729 in the gridsome repo. It looks like there might be a solution using vue-simple-markdown (I’m guessing you’ll need to query the markdown fields and transform them into html manually using vue-simple-markdown).

1 Like

I’m already using this https://gridsome.org/plugins/@gridsome/transformer-remark, and the problem is not about transforming markdown because I’m already doing this and it’s working, the problem is how to do that for multiple markdown

@93lucasp, sorry for not being clear enough.
You current method of transforming markdown only works when there is a single markdown as the body of the file. Gridsome will implicitly convert bodies of markdown files into html when using https://gridsome.org/plugins/@gridsome/transformer-remark.

If you want to transform multiple markdowns you’ll have to explicitly call a markdown parser like https://github.com/Vivify-Ideas/vue-simple-markdown#readme on each markdown field in your file.

1 Like

I’ll try and I’ll let you know :slight_smile:

Hello @erez,

Do you know any way to transform markdown to html earlier than on the application/component level? I have React app and I know that I can parse markdown directly in the component with help of some library (eg. react-markdown), but is it possible to have parsed html already in graphql query?

Hi @lkurasin and welcome to the community. Do you mean multiple markdowns parsed as HTML? A single markdown as body of a file is already processed by default by many static site generators (not sure which one you’re using). As for multiple markdowns I’m sure there is a way to plug into the build process, just don’t have a concrete example.