0

when I query the data through grapghql, it includes them all inside a html node not independent nodes

let's say that I have inserted two title tags to the CMS and I want to use those tags inside of a component

query BlogPostByPath {
markdownRemark {
    html
    frontmatter {
        path
        title
    }
  }
}

it would generate this:

{
  "data": {
    "markdownRemark": {
        "html": "<p>test</p> <p>another test</p>",
        "frontmatter": {
        "path": "testPath",
        "title": "test"
     }
   }
 }
}

the question is: how can I grab the first p tag and use it inside of a component and the other p tag to be inserted inside of another component inside the main component? like how can I have control on how the html node gives data

and assuming the fact that I don't want to insert them inside of several child components, let's say that I want the first p tag to have a specific style and the second p tag to have another style

it would make more sends if there is a way to access to specific elements inside the html node

technolaaji
  • 359
  • 2
  • 8
  • There's a few ways you can tackle this, but I think there might be a simpler solution if we know what's your intention. What's the purpose of extracting certain element out of the html body? If you're looking for a way to attach custom css to element, I have [a plugin that let you attach class name to generated html](https://www.gatsbyjs.org/packages/gatsby-remark-default-html-attrs/) – Derek Nguyen Feb 21 '19 at 11:42
  • @DerekNguyen I will look into consideration the plugin you suggested! the intention of it that I might set up various designs to a similar html tag example maybe I want the first p tag to justify itself in a flex start while the 2 others are flex-end, inside the remark html node, all of the tags come without classNames so you have to set all the p tags/ h1 tags / h2 tags the same className (which might not be so convenient but it is useful if your aim is to have a one design structure) – technolaaji Feb 26 '19 at 08:20

0 Answers0