Как добавить CMS на ваш сайт Gatsby

Что такое GatsbyJS?

Gatsby — это фреймворк для создания молниеносных веб-сайтов и веб-приложений. На основе React и GraphQL, Gatsby предоставляет вам все необходимое для создания и запуска вашего следующего проекта.

Перейдите на эту страницу здесь

Почему стоит выбрать Contentful CMS?

Contentful — это безголовая система управления контентом (CMS). Вы загружаете свой контент (будь то текст, изображения или видео) в Contentful, а оттуда можете организовывать и редактировать его по своему усмотрению.

Узнайте все подробности здесь

Необходимые условия

В этой заметке предполагается, что у вас уже настроен проект Gatsby. Если вам нужно настроить проект, перейдите на эту страницу, а затем вернитесь обратно.

Интеграция Gatsby с Contentful

npm install gatsby-source-contentful

Войдите в полноэкранный режим Выход из полноэкранного режима

Как это использовать?

Создайте конфигурационный файл gatsby и добавьте в него следующий код

plugins: [
  {
    resolve: `gatsby-source-contentful`,
    options: {
      spaceId: `your_space_id_grab_it_from_contentful`,
      accessToken: `your_token_id_grab_it_from_contentful`,
    },
  },
]

Войти в полноэкранный режим Выйти из полноэкранного режима

Соедините ваш сайт gatsby и contentful CMS.

Вот пример того, как выглядит GraphQL-запрос…

import React from 'react'
import Layout from '../components/Layout'
import { graphql, Link, useStaticQuery } from 'gatsby'
import * as styles from './blog.module.scss'
import Meta from '../components/head'

const BlogPage = () => {
    const { allContentfulBlogPost: { edges } } = useStaticQuery(graphql`
        query {
            allContentfulBlogPost (
                sort: {
                    fields: publishedDate
                    order: DESC
                }
            ) {
                edges {
                    node {
                        title
                        slug
                        # publishedDate(fromNow: true)
                        # format uses momentjs
                        publishedDate(formatString: "MMMM Do, YYYY")
                    }
                }
            }
        }
    `)
    return (
        <Layout>
            <Meta title="Blogs" />
            <h1>Blog</h1>
            <ol className={styles.posts}>
                {edges.map((edge, index) =>(
                    <li key={index} className={styles.post}>
                        <Link to={`/blog/${edge.node.slug}`}>
                            <h2>{edge.node.title}</h2>
                            <p>{edge.node.publishedDate}</p>
                        </Link>
                    </li>
                ))}
            </ol>
        </Layout>
    )
}

export default BlogPage

Войти в полноэкранный режим Выход из полноэкранного режима

Поговорим позже!

Как добавить CMS на ваш сайт Gatsby

Рекомендуем почитать: