삐침표 기호 데이터로 게이츠비 사이트 구축: 제2부분

이것은 second part of a two-part series 게이츠비 사이트에서 삐침표 기호를 사용하는 내용, 게이츠비의 삐침표 원본 플러그인을 사용하는 것에 관한 것이다.이 부분은 제1부분에서 실현된 코드를 기초로 한다.
이 시리즈의 첫 번째 부분은 게이츠비에 어떻게 삐침표 원본 플러그인을 설정하는지, 삐침표의 piece 데이터를 어떻게 사용하는지, 그리고 삐침표의 page 데이터의 기본적인 사용법을 소개했다.두 번째 부분에서 우리는 게이츠비의 페이지 데이터를 더욱 토론할 것이다. 이는 프로그래밍 방식으로 게이츠비 페이지를 만들고 이런 페이지를 바탕으로 자동으로 생성되는 네비게이션을 실현하는 것을 포함한다.
홈 페이지에 간단한 HTML 열을 추가하는 것은 복잡하지 않지만 다른 페이지는?우리는 삐침표에 어떤 페이지가 추가되었는지 모르겠지만, 게이츠비 사이트에 각 페이지에 단독 페이지를 추가하기를 희망합니다.
우선, 이것은 더욱 선진적인 것이 될 것이다.작품과 관련 매체를 삐침표로 편집해서 개츠비에 표시하고 개츠비에서 직접 만든 페이지를 표시할 수 있다.내용 정책에 따라 개츠비에서 삐침표로 만든 다른 페이지를 자동으로 만드는 것은 의미가 없을 수 있습니다.
만약 당신이 이것에 대해 흥미를 느끼고 약간 미친다면, 우리는 계속합시다.하나의 전체Gatsby tutorial on programmatically creating pages가 나를 도왔고, 또 하나의 위대한 자원이다.

일부 프레젠테이션 데이터 설정

만약 네가 첫 번째 부분에서 왔다면, 너는 아마도 이미 삐침표 사이트가 여전히 운영되고 있을 것이다.실행 중이고 로그인한 경우(참조part one 기본 유형 페이지를 연습 데이터로 추가합니다.이 예에는 '정보' 페이지 /about/our-history, '정보' 페이지의 하위 페이지가 포함됩니다.

삐침표 페이지에서 프로그래밍 방식으로 게이츠비 페이지를 만들다

다음과 같은 몇 가지 개념을 사용하여 이러한 페이지를 생성합니다.

Gatsby page templates - 우리가 이미 제작한 다른 페이지와 마찬가지로 이것들은 React 구성 요소로 외부 데이터 원본에서 페이지를 생성하는 데 사용된다.program.js,staff.js,index.js 구성 요소와 달리 우리는 어느 URL에 나타날지 모른다. 왜냐하면 그들은 미래 페이지의 템플릿이기 때문이다.

게이츠비 노드와Node API - 게이츠비에서 노드는GraphQL 데이터베이스를 통해 조회할 수 있는 내용 단원, 예를 들어 우리의 프로그램, 스태프와 페이지를 말한다.노드 API에는 이러한 노드와 상호 작용하여 작업을 수행하는 데 사용되는 다양한 갈고리와 방법이 포함됩니다.

먼저src/templates/apos-page.js 보세요.그것은 우리가 만든 다른 페이지와 여러 면에서 비슷하기 때문에 익숙해 보일 것이다.이 시리즈의 첫 번째 부분에 채워진 홈 템플릿과 같이, 이 페이지 템플릿은 HTML _rendered 을 추가하는 템플릿과 우리가 다른 곳에서 사용하는 다른 가져오기가 있습니다.데이터를 채우는 데 사용할 쿼리와 실례화된 subNav 변수가 없습니다.
이 파일은 삐침표 페이지 데이터로 생성된 페이지의 템플릿입니다.이 목표를 달성하려면 다음과 같은 몇 가지 절차가 필요합니다.

Gatsby API를 사용하여 삐침표 페이지를 조회하고 각 페이지에서 페이지 노드를 만든다.

새 게이츠비 페이지 데이터와 하위 내비게이션의 하위 페이지를 얻기 위해 템플릿을 업데이트createPages합니다.

원본 데이터에서 개츠비 페이지 만들기

첫 번째 부분은 apos-page.js 파일에서 발생할 것이다.이 파일은 사이트를 구축할 때 한 번 실행되기 때문에 구축 과정에서 한 번만 작업을 수행할 수 있습니다.Node APIs reference는 그곳에서 무엇을 할 수 있는지의 넓이를 볼 수 있는 아주 좋은 곳이다.우리는 이곳에서 gatsby-node.js API를 사용할 것이다.
먼저 createPages 함수를 파일에 추가합니다.우리가 한 모든 것이 안에 있을 것이다.우리는 destructuring 게이츠비가 방문exports.createPages 실용 프로그램과 graphql 대상을 통해 시작한 논점이다.

exports.createPages = async ({ graphql, actions }) => {}

이 함수의 다음 단계는 삐침표 원본 플러그인을 통해 제공된 모든 삐침표 페이지를 조회하고 결과를 저장하는 것입니다.함수에 다음을 추가합니다.

exports.createPages = async ({ graphql, actions }) => {
  const result = await graphql(`
    query {
      allAposCorePage {
        nodes {
          title
          _url
          slug
          _rendered
        }
      }
    }
  `)
}

첫 번째 부분에서 GraphQL 조회를 보았는데, 만약 이 내용을 읽었다면 매우 익숙해졌을 것입니다.이것은 actions 필드를 사용하고 노드와 그 제목, URL, slug, 그리고 보여준 HTML을 되돌려줍니다.그런 다음 각 페이지를 순환하고 위의 작업 중 하나를 사용하여 데이터를 사용하여 페이지를 만듭니다.구체적으로 말하면 이것은 allAposCorePage 조작을 통해 완성된 것이다.
따라서 이 질의문 아래에 다음을 추가합니다.

exports.createPages = async ({ graphql, actions }) => {
  // The `result` query from above is here

  const { createPage } = actions

  result.data.allAposCorePage.nodes.forEach(node => {
    createPage({
      path: node.slug,
      component: path.resolve(`./src/templates/apos-page.js`),
      context: {
        title: node.title,
        slug: node.slug,
        slugregex: "/^\\" + node.slug + "//",
      },
    })
  })
}

위에서 말한 바와 같이, 이것은 모든 결과 노드 ((createPage 에서 순환하고, 각 노드에서 게이츠비 페이지를 만듭니다.새 페이지에는 URL 경로로 삐침표result.data.allAposCorePage.nodes.forEach 속성을 사용합니다.slug 템플릿을 React 구성 요소 파일로 사용하고 apos-page.js 속성을 설정하라고 알려 줍니다.
게이츠비의 문서에서 설명한 바와 같이 "context에 전달된 데이터는 페이지 조회에서GraphQL 변수로 제공된다."제목, slug, slug의 regular expression 버전을 이 대상에 저장합니다.다음 하나는 이상하게 보일 수 있지만, GraphQL 검색에서 정규 표현식과 문자열 삽입값을 사용할 수 없기 때문에, 나중에 검색에 slug를 사용하기를 희망합니다.더 쉽게 알 수 있어요.
이 때 Gatsby 페이지는GraphQL 데이터베이스에 생성됩니다. (이 파일들을 편집할 때 중대한 오류가 발생하면 Gatsby 프로그램을 다시 시작해야 할 수도 있습니다.)간단한 조회를 통해 다음과 같은 페이지를 볼 수 있습니다.

query MyQuery {
  allSitePage {
    nodes {
      path
    }
  }
}

위의 그림에서 내가 삐침표 사이트context와 /about에서 만든 페이지가 현재 데이터베이스에 있는 것을 볼 수 있다.404페이지와 메인 페이지는 게이츠비의 기본 페이지이고, 다른 두 페이지는 우리가 첫 번째 부분에서 만든 프로그램과 직원 페이지입니다.
Gatsby 사이트가 실행될 때 삐침표 사이트에 페이지를 추가하면 GraphQL 데이터베이스에 바로 나타나지 않을 수 있음을 주의하십시오.게이츠비는 정적 사이트 생성기이기 때문에 사이트를 재건하기 전에 아무것도 찾을 수 없다.언제든지 새 삐침표 데이터를 예상하지 못하면 실행/about/our-history을 시도하여 캐시를 지우고 백업을 시작합니다.
이 페이지가 데이터베이스에 있더라도 http://localhost:8000/about (게이츠비 구축을 다시 시작한 후일 수도 있음) 으로 이동하면 "페이지가 서버 렌더링을 제대로 하지 못했습니다 (SSR)"라는 오류가 발생할 수 있습니다.우리의 페이지는 이미 존재하지만, 우리의 템플릿은 아직 준비가 되지 않았다.

페이지 데이터를 렌더링된 템플릿으로 변환

첫 번째 부분의 메인 페이지와 다른 페이지와 마찬가지로, 이 부분은GraphQL 데이터베이스에 대한 조회를 요구할 것입니다.질의는 React 어셈블리로 전달되는 객체gatsby clean && gatsby develop를 채웁니다.
이 질의는 홈 질의와 유사하지만 다음과 같은 몇 가지 차이점이 있습니다.

export const query = graphql`
  query($slug: String!) {
    aposCorePage(slug: { eq: $slug }) {
      title
      _rendered
    }
  }
`

data의 홈 페이지 조회 하드코딩index.jsslug입니다.앞의 '/' 방법에서 만들어진 상하문 대상에서 slug as$slug를 가져옵니다.이것도 타이틀 속성을 얻을 수 있지만 홈 페이지 조회가 없습니다.
내 페이지http://localhost:8000/about는 다음과 같습니다.

걸출하다이것은 한 페이지다!createPage 구성 요소의 코드 때문에 사이트 내비게이션에도 나타난다.(본 강좌의 나머지 부분을 완성한 후에 스스로 탐색하십시오.이렇게 하면 더욱 의미가 있지만 본 강좌에서 우리는 깊이 토론하지 않습니다.)
페이지가 하나 더 있습니다. http://localhost:8000/about/our-history 링크가 없습니다.이 정보 페이지는 마스터 사이트 탐색에 링크가 있지만 Google 히스토리 페이지를 정보 페이지의 하위 페이지로 인식하고 상위 페이지에 표시할 수 있습니다.
이를 위해 우리는 Header.js 조회를 전개하고 apos-page.js 상하문 속성을 사용할 것이다.

export const query = graphql`
  query($slug: String!, $slugregex: String!) {
    aposCorePage(slug: { eq: $slug }) {
      title
      _rendered
    }
    allSitePage(
      filter: { path: { regex: $slugregex } }
      sort: { fields: [path], order: ASC }
    ) {
      edges {
        node {
          context {
            title
            slug
          }
        }
      }
    }
  }
`

우리는 slugregex 을 도입한 다음 slugregex 검색에서 그것을 사용합니다. 이 검색은 필터를 거쳐 현재 페이지의 slug로 시작하는 경로만 되돌려줍니다.현재 구성 요소의 allSitePage 변수를 업데이트할 수 있습니다.만약 결과가 나타난다면, 우리는 페이지 제목과 slug를 포함하는 간단한 대상으로 그것을 채울 수 있습니다.

export default function AposPage({ data }) {
  const page = data.aposCorePage
  let subNav = []
  if (data.allSitePage && data.allSitePage.edges) {
    subNav = data.allSitePage.edges.map(e => {
      return {
        title: e.node.context.title,
        slug: e.node.context.slug,
      }
    })
  }
  //...
}

템플릿의 subNav 태그에 목록 항목과 링크 태그가 있는 하위 탐색 배열에 지도를 추가할 수 있습니다.

return (
  <Layout>
    <>
      <header>
        <h1 className="text-2xl mb-6">{page.title || ""}</h1>
        {!!subNav.length && (
          <nav className="mb-6">
            <ul>
              {subNav.map(item => {
                return (
                  <li className="mr-6" key={item.slug}>
                    <a
                      className="text-blue-500 hover:text-blue-800"
                      href={item.slug}
                    >
                      {item.title}
                    </a>
                  </li>
                )
              })}
            </ul>
          </nav>
        )}
      </header>
      {page._rendered && (
        <div dangerouslySetInnerHTML={{ __html: page._rendered }} />
      )}
    </>
  </Layout>
)

모든 것이 준비되면, 우리 하위 페이지는 이제 '정보' 페이지 제목 아래의 링크로 표시해야 한다.멋있어!

여정의 종점에서

이렇게!이제 게이츠비 페이지를 만드는 데 게이츠비 원본 플러그인을 사용하는 방법을 잘 이해할 수 있을 뿐만 아니라, 게이츠비 페이지를 채우고 만드는 방법도 잘 이해할 수 있기를 바랍니다.
프레젠테이션 코드에는 더 많은 내용을 탐색할 수 있습니다.ul 분기의 in the demo Gatsby site's repo with the finished code를 참조하십시오.
추가 링크:
질문이 있으시면 Twitter에서 저희 팀이나 저에게 연락하거나 Discord chat에 가입하십시오.https://chat.apostrophecms.com.
게이츠비 데모 사이트: https://github.com/apostrophecms/gatsby-demo-apostrophe
프리젠테이션 폼 팩터 3 사이트, 헤드 없는 CMS로 설정, 첫 번째 유형: https://github.com/apostrophecms/demo-a3-headless