@ParaBellum577

Как отображать разные посты блога Gatsby JS?

Всем привет! Столкнулся с таким вопросом: сделал блог на Gatsby JS (React).
Прикрутил CMS AnyJSON для создания обьектов (постов). Сделал темплейт для постов, все работает, данные приходят с сервера, страницы создаются динамически. Но стал такой вопрос: допустим, нужно чтобы посты блога иногда отличались между собой (картинки в разном месте, разное количество заголовков и т.д.), так вот ума не приложу, как это можно реализовать, может кто сталкивался? Спасибо.

Файл gatsby-node.js, тут я получаю массив обьектов с сервера и передаю контекст для новых страниц.
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,
      })
    })
  })
}

файл шаблона, тут я отрисовываю данные из обьектов.
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 />
     </>
 )
}
  • Вопрос задан
  • 147 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ParaBellum577 Автор вопроса
Понимаю, что тут никто не ответит на подобного рода вопросы, поэтому отпишу сам, мб кому-то пргодится...
Решил вопрос подключением другой CMS (Contentfull), которая может отправлять json типа Rich Text. Его можно спокойно вылянуть через GraphQl, распарсить и отобразить на странице динамически любой контент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы