WordPress 기반 웹 사이트를 위한 Gatsby 테마 구축

Gatsby는 React를 기반으로 구축된 오픈 소스 프레임워크입니다. Gatsby를 사용하면 (거의) 어디에서나 데이터를 가져와 정적 또는 동적 웹 사이트를 생성하는 데 사용할 수 있습니다. 데이터는 확실히 WordPress를 테이블로 가져오는 CMS에서 가져올 수 있습니다. WordPress 대시보드를 통해 콘텐츠를 계속 관리하면서 정적 웹사이트(속도, 보안, 정적 호스팅)의 이점을 얻을 수 있습니다.

Gatsby 프레임워크의 특징 중 하나는 테마를 사용자 정의 도구로 제안한다는 것입니다. WordPress에 대한 배경 지식이 풍부한 사람으로서 Gatsby 테마의 개념이 특히 매력적입니다. WordPress 테마를 디자인하고 개발했습니다. 그러나 Jamstack 솔루션에 대한 관심이 높아지면서 점차 WordPress를 헤드리스 CMS로 사용하는 방향으로 전환했습니다. 이 기사에서는 이 전환을 통해 배운 몇 가지 개념을 공유하고 싶습니다.

참고: 더 진행하기 전에 사용할 도구에 중점을 두겠습니다. Gatsby는 공식 ​​gatsby-source-wordpress 플러그인을 제공합니다. 작동하게 하려면 WordPress 끝을 준비해야 합니다. 더 정확하게는 GraphQL API를 통해 Gatsby 풍의 WordPress 데이터를 노출해야 합니다. 실제로, 이는 두 개의 WordPress 플러그인 WPGraphQL 및 WPGatsby를 설치하는 것을 의미합니다. 둘 다 공식 WordPress 플러그인 저장소를 통해 사용할 수 있으며 구성이 필요하지 않습니다.

개츠비 테마란?

Gatsby 테마는 Node.js 패키지 내에서 추상화된 공유 기능 모음입니다. 따라서 테마는 (npm과 같은 레지스트리에) 게시되고 설치 가능한 종속성으로 재사용될 예정입니다.

여기서는 Gatsby와 WordPress 에 대해 이야기하고 있으므로 바로 명확히 하겠습니다. WordPress 테마와 유사점이 있지만 WordPress 테마의 개념을 Gatsby 테마와 동일시해서는 안 됩니다. WordPress 배경이 있는 사람(저와 같이)의 경우 처음에는 분리가 어려울 수 있습니다.

WordPress 테마 는 프런트 엔드에서 볼 수 있는 것을 정의하는 필수 템플릿 시스템입니다. 좋은 WordPress 테마의 책임은 여기에서 끝납니다. 기능은 플러그인의 영역이므로 기능을 도입해서는 안 됩니다. 따라서 WordPress 생태계에서는 테마와 플러그인이 엄격하게 분리됩니다. 테마는 프레젠테이션 계층을 처리해야 하고 플러그인은 기능적 측면을 처리해야 합니다.

Gatsby 정의에 따르면 테마는 기능을 담당합니다 . 그렇다면 플러그인이라고 불러야 하지 않을까요? 실제로 Gatsby는 WordPress와 마찬가지로 플러그인과 테마가 있습니다. 플러그인은 테마와 마찬가지로 Gatsby API를 구현하는 설치 가능한 Node.js 패키지입니다. 그리고 사실, Gatsby 테마는 Gatsby 플러그인입니다. 플러그인이 사이트의 섹션, 페이지 또는 페이지 일부를 소유하는 경우 이를 테마라고 합니다.

또한 WordPress와 달리 Gatsby는 사이트를 구축하기 위해 테마를 사용할 필요가 없습니다. 대신 아래와 같이 구성된 프로젝트를 설정하여 사이트 생성을 시작할 수 있습니다.

유지 관리할 사이트가 두 개 이상 있을 때까지는 괜찮습니다. 이 경우 프로세스의 공통 부분을 추상화하고 별도로 관리(버전 및 업데이트)할 수 있습니다.

Gatsby 테마 시스템 덕분에 공유 부분을 하나의 패키지(또는 여러 패키지)로 묶고 패키지를 게시하고 최종적으로 수많은 애플리케이션에 설치할 수 있습니다. 저는 복수형 패키지 를 사용했습니다. 프로젝트 내에서 여러 테마를 결합할 수 있습니다.

어린이 테마 및 섀도잉

Gatsby 및 WordPress로 작업할 때 모든 프로젝트에 공통적인 몇 가지 핵심 기능을 식별하게 됩니다. 내 말은 데이터를 소싱하고 페이지를 동적으로 작성하는 것입니다. 데이터 소싱 로직과 페이지 생성을 다루는 테마를 갖는 것은 가치가 있는 것 같습니다. 반면에 페이지를 표시하기로 결정하는 방법은 프로젝트마다 다를 수 있습니다. 핵심 수준에서 무엇을 설정하든 언젠가는 재정의해야 할 것입니다.

가능한 접근 방식 중 하나는 핵심(부모) 테마를 갖고 핵심 테마 위에 자식 테마 를 구축하는 것입니다.

개츠비 어린이 테마란 무엇을 의미합니까?

워드프레스 하위 테마 비교를 진행해 보겠습니다. WordPress 자식 테마를 사용하면 기능을 추가하고 템플릿을 재정의할 수 있습니다. 기존 테마를 강화하고 수정하는 안전한 방법을 제공합니다.

Gatsby 하위 테마는 상위 테마를 플러그인으로 사용합니다. 그런 다음 자식 테마에 부모 테마 파일을 재정의할 수 있는 기능을 제공하는 그림자 개념을 사용할 수 있습니다. 이는 하위 테마에서 WordPress 템플릿을 재정의하는 것과 유사합니다. 섀도잉은 웹팩 번들에 포함된 src 디렉토리의 파일을 재정의할 수 있음을 의미합니다. 프로젝트 수준(테마를 패키지로 사용하는 곳)에서 섀도잉이 가능하다는 점을 강조할 가치가 있습니다. 이 기사의 뒷부분에서 실제로 작동하는 것을 볼 수 있습니다.

WordPress를 사용하면 하나의 상위 테마와 하나의 하위 테마로 제한되며 더 이상의 연결은 불가능합니다. Gatsby 테마의 유연성으로 우리는 훨씬 더 나아갈 수 있습니다. 자식-부모 체인의 다양한 구성을 구축할 수 있습니다.

이제 Gatsby 테마가 작동하는 모습을 살펴보겠습니다. 우리의 예에서 우리는 두 개의 테마, gatsby-theme-wp-parent 와 자식 테마 gatsby-theme-wp-child 입니다. 단순함을 위해 이 설정을 선택했습니다. 실제 시나리오에서는 기능을 더 많은 테마로 분해하고 각각의 특정 책임이 있을 수 있습니다.

테마를 게시하고 프로젝트에 설치하고 프로젝트 수준 섀도잉을 통해 추가 사용자 지정을 추가합니다.

개발 설정

마지막 그림은 테마가 소비되는 최종 사용자의 프로젝트( site) 의 구조를 나타냅니다. 프로젝트의 종속성으로 설치됩니다. 이 설정은 일부 npm 저장소를 통해 테마를 사용할 수 있다고 가정합니다. 즉, 이미 게시했습니다. 우리는 아직 거기에 없습니다. 먼저 부모 및 자식 테마를 빌드 해야 합니다. 그러나 개발 설정은 어떻게 생겼습니까? 우리의 테마는 두 개의 독립적인 패키지이지만 개발하는 동안 단일 프로젝트 내에서 병렬로 작업해야 합니다. 또한 테마를 직접 구현하는 동일한 프로젝트 내에서 데모를 설정하려고 합니다.

가능한 솔루션 중 하나는 원사 작업 공간입니다. 원사 작업 공간을 사용하여 프로젝트 루트 수준에서 단일 잠금 파일을 사용하여 단일 모노 리포지토리 내에서 작업합니다. 또한 종속성을 함께 연결할 수 있습니다. 즉, 작업 공간이 서로 의존하고 개발 중에 로컬 버전을 사용합니다.

원사 작업 공간을 설정하는 방법은 무엇입니까? 먼저 전역에 yarn이 설치되어 있는지 확인하십시오. 다음으로 monorepo의 루트에 작업 영역을 지정하는 package.json 파일을 추가합니다.

 { "private": true, "workspaces": [ "packages/*", "demo" ] }

이제 각 테마는 자체 package.json 파일과 빈 기본 항목 index.js 가 있는 packages 내의 하위 폴더입니다. 추가하는 각 테마에 대해 다음과 같이 진행합니다.

 mkdir packages/gatsby-theme-wp-parent touch packages/gatsby-theme-wp-parent/package.json packages/gatsby-theme-wp-parent/index.js

다음과 같이 package.json 을 사용합니다.

 { "name": "@pehaa/gatsby-theme-wp-parent", "version": "1.0.0", "license": "MIT", "main": "index.js" }

우리는 테마 퍼블리싱에 대해 조금 더 논의할 것입니다. 그러나 당분간은 테마를 범위가 지정된 패키지로 게시할 예정입니다. 여기에서 내 별명 @pehaa 를 범위로 사용합니다. 범위 지정 패키지를 공개 npm 레지스트리 https://registry.npmjs.org에 게시하기로 결정한 경우 공개 액세스를 명시적으로 명시하고 package.json 파일에 다음을 추가해야 합니다.

 "publishConfig": { "access": "public" }

테마 외에도 코드를 시험해 볼 demo 작업 공간도 필요합니다. 데모는 게시되어서는 안 되므로 "private" 패키지여야 합니다.

 // demo/package.json { "private": true, "name": "demo", "version": "1.0.0", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "clean": "gatsby clean" } }

작업 공간 설정을 사용하면 다음과 같이 스크립트와 작업 공간을 지정하여 모노레포의 어느 곳에서나 개발 또는 빌드 스크립트를 실행할 수 있습니다.

 yarn workspace demo develop

그건 그렇고, 당신은 단일 demo 로 제한되지 않습니다. 예를 들어 GatsbyWPThemes 레포에는 examples 디렉토리에 추가하는 여러 데모가 포함되어 있습니다. 이 경우 루트 수준 package.json 파일은 다음과 같이 작업 영역을 정의합니다.

 "workspaces": [ "packages/*", "examples/*" ]

개츠비 테마 만들기

먼저 react , react-dom 및 gatsby 를 설치해야 합니다. 이 세 가지를 각 테마에 피어 종속성( -P )으로 설치하고 데모에서는 종속성으로 설치해야 합니다. 또한 부모 테마를 자식 테마 종속성으로 설치하고 자식 테마를 데모 종속성으로 설치합니다.

 yarn workspace @pehaa/gatsby-theme-wp-parent add -P react react-dom gatsby yarn workspace @pehaa/gatsby-theme-wp-child add -P react react-dom gatsby yarn workspace @pehaa/gatsby-theme-wp-child add "@pehaa/gatsby-theme-wp-parent@*" yarn workspace demo add react react-dom gatsby "@pehaa/gatsby-theme-wp-child@*"

참고 : 버전 번호 없이 @pehaa/gatsby-theme-wp-parent 또는 @pehaa/gatsby-theme-wp-child 를 추가할 수 없습니다. @* 또는 @1.0.0 으로 지정해야 합니다. 이것이 없으면 npm은 로컬 패키지를 사용하는 대신 리포지토리에서 패키지를 가져오려고 시도합니다. 나중에 Lerna로 패키지를 게시하면 모든 * 가 자동으로 현재 테마 버전으로 업데이트되고 동기화 상태로 유지됩니다.

상위 테마

이제 상위 테마와 해당 종속성에 초점을 맞추겠습니다.

 yarn workspace @pehaa/gatsby-theme-wp-parent add gatsby-source-wordpress gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp gatsby-awesome-pagination

상위 테마의 책임은 이미지를 처리하고 표시하는 데 필요한 소스 플러그인과 세 개의 플러그인을 로드하는 것입니다. 우리는 그것들을 모두 gatsby-config.js 파일에 로드합니다.

 // gatsby-config.js module.exports = (options) => { return { plugins: [ 'gatsby-plugin-sharp', // must have for gatsby 'gatsby-transformer-sharp', // must have for gatsby images 'gatsby-plugin-image', { resolve: 'gatsby-source-wordpress', options: { url: `${options.wordPressUrl}/graphql`, }, }, ], } }

콘텐츠를 소싱하는 것 외에도 WordPress 콘텐츠에 대한 경로를 동적으로 구축해야 합니다. WordPress 정적 페이지, 개별 게시물, 블로그 아카이브, 카테고리 아카이브 및 태그 아카이브에 대한 경로를 생성해야 합니다. Gatsby는 Gatsby Node API의 일부로 createPages API를 제공합니다. 개별 게시물 생성을 담당하는 코드를 살펴보겠습니다.

 exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions const postsQuery = await graphql(` query GET_POSTS { allWpPost(sort: {order: DESC, fields: date}) { edges { node { uri id } } } } `) const posts = postsQuery.data.allWpPost.edges posts.forEach(({ node }) => { createPage({ path: node.uri, component: path.resolve('../src/templates/post-query.js'), context: { // Data passed to context is available in page queries as GraphQL variables // we need to add the post id here // so our blog post template knows which blog post it should display id: node.id }, }) }) }

이 GitHub 리포지토리에서 전체 코드를 찾을 수 있습니다. 페이지 유형에 따라 다름을 알 수 있습니다. 게시물, 페이지 또는 아카이브, 특히 후자를 위해 구현된 페이지 매김과 다릅니다. 그래도 동일한 패턴을 따릅니다.

• 비동기 graphql "항목 가져오기" 쿼리를 실행합니다.
• 결과 항목을 반복하고 각 항목에 대해 createPage 도우미 함수를 실행하여 다음을 전달합니다.
  • 경로,
  • component — 템플릿 파일 Gatsby는 각 페이지에 표시되어야 하는 내용을 알아야 합니다.
  • context — 템플릿( component 필드에 제공)에 필요할 수 있는 모든 데이터.

부모 테마 내의 UI 부분에 대해 걱정하고 싶지 않기 때문에 자식 테마에서 그림자를 만들 구성 요소에 위임합니다.

 // src/templates/post-query.js import { graphql } from "gatsby" import Post from "../components/Post" export default Post export const pageQuery = graphql` query ($id: String!) { wpPost(id: { eq: $id }) { # query all usefull data } } `

Post 구성 요소는 템플릿 파일에 정의된 graphql 페이지 쿼리의 데이터에 액세스할 수 있습니다. 컴포넌트는 props를 통해 쿼리 결과를 props.data 로 수신합니다. 구성 요소 파일은 템플릿과 분리되어 있지만 해당 데이터에 액세스할 수 있습니다. 이 설정을 사용하면 쿼리를 다시 작성할 필요 없이 Post 구성 요소를 섀도잉할 수 있습니다.

 // src/components/Post.js import React from 'react' const Post = (props) => { return <pre>{JSON.stringify(props.data, null, 2)}</pre> } export default Post

하위 테마

이제 하위 테마로 이동하여 종속성을 추가해 보겠습니다.

참고 : Chakra UI를 구성 요소 라이브러리로 사용하기로 선택했습니다. 감정을 기반으로 하며 자체 Gatsby 플러그인과 함께 제공됩니다. @wordpress/block-library 에서 WordPress 콘텐츠별 스타일도 설치해야 합니다.

 yarn workspace @pehaa/gatsby-theme-wp-child add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled @wordpress/block-library framer-motion gatsby-plugin-webfonts html-react-parser

자식 테마의 책임은 UI 부분이며 부모 테마에서 생성된 베어 본 출력을 재정의해야 합니다. 섀도잉이 작동하려면 상위 테마의 파일 구조를 따라야 합니다. 예를 들어, gatsby-theme-wp-parent/src/components/Post.js 의 Post 컴포넌트를 재정의하려면 gatsby-theme-wp-child/src/@pehaa/gatsby-theme-wp-parent/components 에 Post.js 파일을 생성해야 합니다. gatsby-theme-wp-child/src/@pehaa/gatsby-theme-wp-parent/components . @pehaa 중간 폴더는 gatsby-theme-wp-parent 패키지의 범위에 해당합니다.

테마에 옵션 전달

gatsby-config.js 파일에서 gatsby 플러그인을 로드하고 구성합니다. 설정에는 세 가지 구성 파일이 있습니다. 각 수준마다 하나씩, 상위 테마, 하위 테마 및 데모입니다.

 ├── demo │ └── gatsby-config.js ├── packages │ ├── gatsby-theme-wp-child │ │ └── gatsby-config.js │ └── gatsby-theme-wp-parent │ └── gatsby-config.js └── ...

데모 수준에서 구성은 다음과 같이 하위 테마를 로드합니다.

 // demo/gatsby-config.js module.exports = { plugins: [ { resolve: '@pehaa/gatsby-theme-wp-child', options: { wordPressUrl: process.env.GATSBY_WP_URL, /* other options */ }, }, ], }

위에서 볼 수 있듯이 자식 테마에 옵션을 전달합니다. 하위 테마 수준의 구성 파일 내에서 사용할 수 있습니다. Gatsby 플러그인에 기능으로 내보낸 구성이 있기 때문에 가능합니다. 따라서 몇 가지 옵션을 제공하는 플러그인을 로드할 때 플러그인은 이를 config 함수의 인수로 받습니다. 특히 테마에 전달하는 옵션은 다음과 같이 상위 수준 테마에 "전달"될 수 있습니다.

 // gatsby-theme-wp-child/gatsby-config.js const defaultFonts = ... module.exports = (options) => { // destructure option to extract fonts const {fonts, ...rest} = options return { plugins: [ { resolve: `@pehaa/gatsby-theme-wp-parent`, options: { // "forward" the options gatsby-theme-wp-child options to its parent theme ...rest } }, '@chakra-ui/gatsby-plugin', { resolve: `gatsby-plugin-webfonts`, options: { fonts: fonts || defaultFonts }, }, ], } }

위의 코드를 다시 살펴보자. 우리는 자식 테마 수준에서 글꼴을 정의하지만 테마 옵션을 통해 글꼴을 수정할 수 있습니다.

 // demo/gatsby-config.js module.exports = { plugins: [ { resolve: `@pehaa/gatsby-theme-wp-child`, options: { wordPressUrl: process.env.GATSBY_WP_URL, fonts: { google: [{family: "Rubik"}], }, }, }, ], }

테마를 구성할 때 테마는 패키지일 뿐이며 최종 사용자는 해당 코드에 직접 액세스하지 않는다는 점을 기억해야 합니다. 따라서 미리 생각하고 적절한 설정을 노출하는 것이 좋습니다. 테마가 구성이 필요한 플러그인을 로드하는 경우 프로젝트(데모) 수준에서 플러그인 옵션을 끝까지 전달해야 합니다.

예를 들어 보겠습니다. 상위 테마는 WordPress에서 데이터를 가져오는 gatsby-source-wordpress 플러그인을 사용합니다. 이 플러그인에는 많은 옵션이 제공되며 그 중 일부는 schema.requestConcurrency 또는 schema.timeout 과 같이 빌드 프로세스에 중요할 수 있습니다. 그러나 다시, 상위 테마는 패키지일 뿐이며 최종 사용자는 해당 gatsby-config 파일을 편집할 수 없습니다. 당연해 보이지만 Gatsby WP Themes의 초기 릴리스에서는 이를 놓쳤습니다. 그러나 빠른 수정으로 사용자는 프로젝트 구성에서 gatsby-plugin-source-wordpress 옵션을 전달할 수 있습니다…

 // user's project gatsby-config.js module.exports = { plugins: [ { resolve: `@pehaa/gatsby-theme-wp-child`, options: { wordPressUrl: process.env.GATSBY_WP_URL, gatsbySourceWordPressOptions: {}, // ... }, }, ], }

... 하위 및 상위 테마를 통해 대상 플러그인으로:

 // packages/gatsby-theme-wp-parent/gatsby-config.js module.exports = (options) => { return { plugins: [ // ... { resolve: `gatsby-plugin-source-wordpress`, options: { url: `${options.wordPressUrl}/graphql`, ...options.gatsbySourceWordPressOptions }, }, ], } }

CSS 테마

테마를 지원하는 CSS-in-JS 솔루션은 Gatsby 테마에 적합합니다. Gatsby 자식 테마는 Chakra UI 프레임워크를 사용하고 CSS 테마를 약간 사용자 정의합니다. 예, Chakra UI는 "테마"라는 개념도 사용합니다. 이 컨텍스트에서 테마는 디자인 시스템 스타일 값, 척도 및/또는 디자인 토큰을 저장하는 JavaScript 개체입니다. 혼동을 피하기 위해 "CSS 테마"라고 부르겠습니다. Gatsby 플러그인 @chakra-ui/gatsby-plugin 과 함께 필수 @chakra-ui 패키지를 이미 설치했습니다. 플러그인의 코드를 탐색하여 작동 방식을 알아보겠습니다. 실제로 Gatsby 애플리케이션을 ChakraProvider 로 래핑하고 섀도잉을 위해 src/theme.js 파일을 노출하므로 다음과 같이 진행할 수 있습니다.

 /* packages/gatsby-theme-wp-child/src/@chakra-ui/gatsby-plugin/theme.js */ import { extendTheme } from "@chakra-ui/react" const theme = { fonts: { body: "Karma, sans-serif", heading: "Poppins, sans-serif", }, styles: { global: { body: { color: "gray.700", fontSize: "xl", }, }, }, components: { Button: { baseStyle: { borderRadius: "3xl", }, defaultProps: { colorScheme: "red", }, }, }, } export default extendTheme(theme)

다시 한 번, 우리는 섀도잉의 개념을 사용했습니다. 여기서 중요한 측면은 theme.js 파일을 생성한 위치입니다.

나중에 사용자의 프로젝트 수준에서 CSS 테마를 음영 처리하는 방법을 살펴보겠습니다.

Lerna로 테마 게시하기

테마가 준비되면 게시해야 합니다. 코드를 공개적으로 공유하려면 아마도 공개 npm 레지스트리에 공개할 것입니다. 그리고 이전에 패키지를 게시한 적이 없다면 로컬 컴퓨터에서 Verdaccio를 사용하여 프로세스에 익숙해질 수 있습니다.

Gatsby WP Themes에서는 Cloudsmith의 프리미엄 서비스를 사용합니다. Cloudsmith는 비공개 레지스트리를 위한 프리미엄 옵션과 공개 레지스트리를 위한 무료 솔루션을 통해 npm 패키지에 대한 모든 기능을 갖춘 레지스트리를 지원합니다. 계속해서 무료 Cloudsmith 솔루션을 사용하겠습니다. 계정을 만든 후에는 새 저장소를 만드십시오. 내 것은 pehaa/gatsby-wp-theming 입니다.

명령줄을 통해 Cloudsmith 레지스트리를 변경하려면 이 레지스트리에 대한 로그인 자격 증명을 제공해야 합니다. 다음을 입력하세요.

 npm login --registry=https://npm.cloudsmith.io/organistion/repository_name/

사용자 이름, 비밀번호(API KEY) 및 이메일을 묻는 메시지가 표시됩니다.

다중 패키지 git 저장소를 사용하면 Lerna를 사용하여 게시를 용이하게 할 수 있습니다. Lerna는 원사 작업 공간과 잘 어울립니다. npm install --global lerna 를 사용하여 Lerna CLI를 전역적으로 설치할 수 있습니다. 프로젝트 내에서 시작하기 위해 다음 명령을 실행합니다.

 lerna init --independent

위의 명령은 monorepo의 루트에 lerna.json 파일을 생성합니다. "useWorkspaces" : true 및 "npmClient": "yarn" 을 수동으로 추가해야 합니다. 기본 공개 npm이 아닌 경우 command.publish.registry 를 지정해야 할 수도 있습니다.

 { "npmClient": "yarn", "useWorkspaces": true, "version": "independent", "command": { "publish": { "registry": "https://cloudsmith.io/organisation/repository_name" } } }

그런 다음 lerna publish 명령은 마지막 릴리스 이후 변경된 패키지를 게시합니다. 기본적으로 Lerna는 업데이트되는 각 패키지의 버전 변경에 대한 프롬프트를 실행합니다. 다음을 실행하여 프롬프트를 건너뛸 수 있습니다.

 lerna publish [major|minor|patch|premajor|preminor|prepatch|prerelease] --yes

또한 기존 커밋 사양을 사용하여 버전 범프를 결정하고 CHANGELOG.md 파일을 생성하도록 Lerna를 구성할 수 있습니다. 모든 옵션을 사용할 수 있으므로 Lerna를 사용하는 방식을 워크플로에 맞게 조정할 수 있어야 합니다.

프로젝트에서 테마 사용하기

이제 개발 서버를 중지하고 사용자의 관점에서 살펴보겠습니다. npm 저장소에서 설치된 패키지로 gatsby-theme-wp-child 를 구현하는 새 프로젝트 gatsby-wp-site 를 생성합니다. 프로젝트 폴더 내에서 gatsby , react , react-dom 및 테마 자체의 네 가지 종속성을 설치합니다. Cloudsmith를 사용하여 @pehaa 범위 패키지를 게시했으므로 다음과 같이 @pehaa 범위 저장소를 지정하는 .npmrc 파일을 추가해야 합니다.

 mkdir gatsby-wp-site cd gatsby-wp-site echo "@pehaa:registry=https://npm.cloudsmith.io/pehaa/gatsby-wp-theming/" >> .npmrc yarn init -yp yarn add react react-dom gatsby @pehaa/gatsby-theme-wp-child

사이트가 거의 준비되었습니다. 테마를 로드하고 WordPress URL을 제공하기 위해 gatsby-config.file 을 생성하기만 하면 됩니다. 완료되면 gatsby build 를 실행할 준비가 됩니다.

 // gatsby-config.js module.exports = { plugins: [ { resolve: "@pehaa/gatsby-theme-wp-child", options: { wordPressUrl: "https://yourwordpress.website" } } ] }

우리 사이트가 준비되었습니다.

커스터마이징은 어떻습니까? 우리는 여전히 그림자를 이용할 수 있습니다. 또한, 프로젝트 레벨은 항상 섀도잉 측면에서 우선합니다. Footer 구성 요소를 재정의하여 실제로 작동하는지 보겠습니다. 현재 바닥글은 @pehaa/gatsby-theme-wp-child/src/components/Footer.js 에 정의되어 있습니다. src 폴더를 만들고 다음 파일 구조를 다시 만들어야 합니다.

 gatsby-wp-site ├── src │ └── @pehaa │ └── gatsby-theme-wp-child │ └── components │ └── Footer.js

위의 파일 구조로 사이트 바닥글의 새 버전을 제공할 준비가 되었습니다. 예를 들어:

 import React from "react" import { useStaticQuery, graphql } from "gatsby" import { Box } from "@chakra-ui/react" const Footer = () => { const data = useStaticQuery(graphql` query { wp { generalSettings { title } } } `) return ( <Box as="footer" p="6" fontSize="sm" bg="gray.700" color="white" mt="auto" textAlign="center" > <b>{data.wp.generalSettings.title}</b> - Built with WordPress and GatsbyJS </Box> ) } export default Footer

마지막으로 CSS 테마로 작업하는 방법을 살펴보겠습니다. 아래와 같은 코드로 src/@chakra-ui/gatsby-plugin/theme.js 에 적절히 위치하여 프로젝트 내에서 기본 테마를 확장할 수 있습니다.

 // src/@chakra-ui/gatsby-plugin/theme.js import { extendTheme } from "@chakra-ui/react" const theme = { /* ... */ } export default extendTheme(theme)

대부분의 경우 이것이 정확히 필요한 것은 아닙니다. 새로운 CSS 테마는 gatsby-theme-wp-child 의 테마를 무시하는 반면 Gatsby 자식 테마에 설정된 CSS 테마를 확장하는 것이 좋습니다. 후자는 extendTheme 함수를 사용하여 여러 객체를 전달할 수 있기 때문에 가능합니다. 작동하게 하려면 gatsby-theme-wp-child 에서 CSS 테마를 가져와서 두 번째 인수로 extendTheme 함수에 전달해야 합니다.

 // src/@chakra-ui/gatsby-plugin/theme.js import theme from "@pehaa/gatsby-theme-wp-child/src/@chakra-ui/gatsby-plugin/theme" import { extendTheme } from "@chakra-ui/react" const extendedTheme = { fonts: { body: "Rubik, sans-serif", heading: "Rubik, sans-serif", }, /* ... */ } export default extendTheme(extendedTheme, theme)

여기에서 사이트를 라이브로 볼 수 있으며 이 GitHub 리포지토리의 기본 분기에서 배포됩니다.

마무리

방금 Gatsby 테마가 작동하는 것을 보았습니다. 테마 접근 방식을 사용하면 대부분의 코드가 테마 패키지 내에서 유지되는 여러 Gatsby 사이트를 빠르게 설정할 수 있습니다. 또한 프로젝트의 일부를 패키지로 분리하는 방법과 섀도잉을 활용하는 방법도 보았습니다.

이 예에서는 테마 간의 부모-자식 관계가 있는 두 가지 테마 설정을 따랐습니다. 이것이 항상 이상적인 선택은 아닐 수 있습니다.

때로는 UI 사용자 정의로 꽤 멀리 가고 싶을 수도 있습니다. 이 경우 자식 테마를 사용하는 대신 부모 테마를 직접 로드하고 섀도잉하는 것을 고려할 수 있습니다. 실제 시나리오에서는 UI의 다른 재사용 가능한 부분(예: 주석, 양식 또는 검색)을 담당하는 몇 가지 하위 수준 테마를 선택할 수 있습니다.

스매싱 매거진에 대한 추가 정보

• Gatsby 함수로 API 빌드
• Gatsby 서버리스 기능과 국제 우주 정거장
• Gatsby Functions 및 Stripe로 오픈 소스 소프트웨어로 수익 창출
• Marcy Sutton과 함께하는 스매싱 팟캐스트 에피소드 20: 개츠비란?