How to add multiple markdown to the same collection?

[93lucasp]

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

[93lucasp]

[erez]

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
  ...
}

[93lucasp]

@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?

[erez]

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

[93lucasp]

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

[erez]

Hi @93lucasp, I found this Cannot fetch multiple markdown widgets from netlify cms · Issue #729 · gridsome/gridsome · GitHub 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).

[93lucasp]

I’m already using this Plugins - Gridsome, 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

[erez]

@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 Plugins - Gridsome.

If you want to transform multiple markdowns you’ll have to explicitly call a markdown parser like GitHub - Vivify-Ideas/vue-simple-markdown: A Simple and Highspeed Markdown Parser for Vue on each markdown field in your file.

[93lucasp]

I’ll try and I’ll let you know

[lkurasin]

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?

[erez]

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.

[alfredo.gtz92]

Hey @erez , I’m trying to do the exact same thing, have multiple rich text / markdown fields rendered as html in my blog. Did you get to solve this?

The main reason I’m doing this is because I’m using adsense to monetize my website. The ads will not be placed unless they find an empty space to render on. So having multiple divs rendering several markdowns will make this work in the middle of my content and not at the top or bottom sections.

I want to have several divs rendering several markdown fields

[hrishikesh]

Hi @alfredo.gtz92,

As already discussed, this is probably not going to happen with the CMS itself. You’d have to configure your SSG to render content from multiple markdown files. For example, you could choose a workflow like this:

• Create a folder for each post.
• Add multiple markdown files to it - keep them numbered if you wish.
• Edit those files in the CMS.
• Configure the SSG to render the Markdown as HTML for all the *.md files in that folder in a layout that you need.