Всем привет! Столкнулся с таким вопросом: сделал блог на 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 />
</>
)
}
Простой
