How to display different Gatsby JS blog posts?

P

ParaBellum5772019-07-05 11:35:52

JavaScript

ParaBellum577, 2019-07-05 11:35:52

Hello! I ran into this issue: I made a blog on Gatsby JS (React).
Fastened CMS AnyJSON to create objects (posts). I made a template for posts, everything works, data comes from the server, pages are created dynamically. But the question arose: let's say that blog posts sometimes need to differ from each other (pictures in a different place, a different number of headings, etc.), so I can't imagine how this can be implemented, can anyone come across? Thank you. The gatsby-node.js
file , here I get an array of objects from the server and pass the context for new pages.

const path = require(`path`)
const fetch = require('node-fetch')
const apiUrl = 'https://api.anyjsoncms.com';
const apiKey = '69b0d12a1№№№№№№№№№№№№№b9a';
const options = { method: 'GET', headers: { ApiKey: apiKey } }

exports.createPages = async ({ actions }) => {
  const blogPostTemplate = path.resolve(`src/templates/postTemplate.js`)
  
  return Promise.all([fetch(`${apiUrl}/entries?apiId=Post-obj`, options)
  .then(response => response.json())])
  .then(([object]) => {
    const obj = object.map(item => item.value)

    obj.forEach(item => {
       actions.createPage({
        path: `/blog/${item.Date}/${item.MD}/`,
        component: blogPostTemplate,
        context: item,
      })
    })
  })
}

template file , here I draw data from objects.

import React from 'react'
import {Helmet} from "react-helmet";
import styles from './index.module.scss'
import Header from '../components/HeaderWhite/header'
import Footer from '../components/Footer/footer'

export default props => {
    
    const { pageContext } = props;
    if(!pageContext)return <></>
    const apiUrl = 'https://api.anyjsoncms.com';
    console.log('object :', pageContext);
    return (
        <>
        <Helmet>
            <html lang="en" />
            <meta charSet="utf-8" />
            <title>{pageContext.Preview.Header}</title>
            <meta name="description" content={pageContext.Preview.Header} />
            <meta property="og:type" content="website" />
            <meta property="og:image" content={apiUrl + pageContext.Img} />
            <meta name="twitter:title" content={pageContext.Preview.Header} />
            <meta name="twitter:description" content={pageContext.Preview.Previewext} />
            <meta name="twitter:image:src" content={apiUrl + pageContext.Img} />
        </Helmet>
        
      <Header />
        <div className={styles.main}>
        <div 
            style={{backgroundImage: 'url(' + apiUrl + pageContext.Preview.Img + ')'}}
            className={styles.header}>
         <div>
             <div className={styles.integrations}>{pageContext.Category}</div>
             <h1>{pageContext.Preview.Header}</h1>
             <div>
                 <img src="" alt=""/>
                 <img src="" alt=""/>
            </div>
         </div>
       </div>
         <div className={styles.block}>
             <div className={styles.left}>
                <img src={apiUrl + pageContext.Author.Avatar} alt="avatar"/>
                <div>
                    <span>Published on {pageContext.Date}</span>
                    <h5>{pageContext.Author.Name}</h5>
                    <p>{pageContext.Author.Position}</p>
                    <h6>8 articles</h6>
                </div>
             </div>
                <button>Subscribe</button>
             </div>
         </div>
         <div className={styles.content}>
            <h2>{pageContext.Preview.Header}</h2>
            <p>{pageContext.Content.FullText}</p>
            <img src={apiUrl + pageContext.Content.FirstIMG} alt="img"/>
            <img src={apiUrl + pageContext.Content.SecondIMG} alt="img"/>
            </div>
        </div>
        <Footer />
     </>
 )
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

ParaBellum577, 2019-07-09
@ParaBellum577

I understand that no one here will answer questions of this kind, so I’ll write it myself, it might be useful for someone ...
I solved the issue by connecting another CMS (Contentfull), which can send json of the Rich Text type. It can be easily pulled out through GraphQl, parsed and dynamically displayed on the page of any content.