Gatsby 웹사이트에 CMS를 추가하는 방법

GatsbyJS란?

Gatsby는 엄청나게 빠른 웹사이트와 웹 애플리케이션을 만들기 위한 프레임워크입니다. React 및 GraphQL로 구동되는 Gatsby는 다음 프로젝트를 구축하고 시작하는 데 필요한 모든 것을 제공합니다.

Go to this page here

Contentful CMS를 선택해야 하는 이유

Contentful은 헤드리스 콘텐츠 관리 시스템(CMS)입니다. 콘텐츠(텍스트, 이미지 또는 비디오)를 Contentful에 업로드하고 여기에서 원하는 대로 구성하고 편집할 수 있습니다.

Get all the Details here

전제 조건

이 게시물에서는 Gatsby 프로젝트가 이미 설정되어 있다고 가정합니다. 프로젝트를 설정해야 하는 경우 여기page로 이동한 다음 다시 돌아오십시오.

Contentful과 Gatsby 통합

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`,
    },
  },
]

개츠비 웹사이트와 콘텐츠가 풍부한 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

나중에 얘기해!