기본 워드프레스 & Gatsby 설정 - Gatsby 워드프레스 입문 안내서 고급 미리보기 버전, i18n 등
카탈로그
Install WordPress and Plugins 💾
Create initial Gatsby site 💻
Create Pages & Posts
WordPress 및 플러그인 설치💾
네, WordPress를 설치하는 것부터 시작합시다.로컬이든 온라인이든 원하는 것을 사용하세요.사용하겠습니다Local by Flywheel.
플러그인
WPGraphQLDocumentation - GraphQL 끝점을 생성합니다.
WPGraphiQL - WP 관리자에게 GraphiQL을 추가하면 변경 사항을 신속하게 확인하고 조회할 내용을 찾을 수 있습니다.
git clone 작업을 수행합니다.git clone https://github.com/wp-graphql/wp-graphql
git clone https://github.com/wp-graphql/wp-graphiql
모든 것이 정상인지 확인하려면 WordPress 관리 영역의 GraphiQL 브라우저로 이동하여 다음을 사용합니다.
초기 개츠비 사이트 만들기💻
우선create a Gatsby 항목은 다음과 같습니다.
gatsby new gatsby-starter-wordpress-advanced
플러그인
dotenv - 환경 변수를 로드하는 데 사용됩니다.
gatsby-source-graphql - WordPress GraphQL 노드에서 데이터를 가져옵니다.
yarn add dotenv gatsby-source-graphql
프로비저닝
우리는
dotenv 환경 변수를 위해 두 개의 다른 파일을 만들 것입니다.개츠비 사이트 폴더의 루트 디렉터리에 .env.development 및 .env.production 을 만듭니다.사용gatsby develop 및 생산용gatsby build시 개발이라고 부른다..env.development에 추가:# .gitignore
.env.development
# .env.development
# This is in gitignore and should not be pushed to the repository.
WORDPRESS_URL=http://gatsby-starter-wordpress-advanced.local
.gitignore 를 로컬 설치의 URL로 바꿉니다.온라인 워드프레스 실례만 사용한다면 이 실례의 URL을 사용하십시오.# .env.production
# Don't put any sensible data here!!!
WORDPRESS_URL=https://your-online-wordpress-instance.dev
http://gatsby-starter-wordpress-advanced.local.Netlify에서는 변수use environment를 이 파일의 내용과 결합할 수도 있습니다.If you use Local By Flywheel, you can expose your local site by enabling
Live Link. You will get anngrok.ioURL, which you can use for the production WORDPRESS_URL.
이제
https://your-online-wordpress-instance.dev 의 맨 위에 추가합니다.let activeEnv =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"
console.log(`Using environment config: '${activeEnv}'`)
require("dotenv").config({
path: `.env.${activeEnv}`,
})
console.log(`This WordPress Endpoint is used: '${process.env.WORDPRESS_URL}'`)
gatsby-config.js 파일을 필요로 하는 데 도움이 될 것입니다.module.exports 내 구성에 다음 내용을 추가합니다.env. {
resolve: "gatsby-source-graphql",
options: {
typeName: "WPGraphQL",
fieldName: "wpgraphql",
url: `${process.env.WORDPRESS_URL}/graphql`,
},
},
module.exports 에 공개합니다.참고: 이 모드는 WordPress GraphQL 노드에 공개된 모드와 다릅니다.게이츠비에 사용하면 쿼리를 plugins:[...] 로 포장해야 합니다.실행
wpgraphql을 시도하고 wpgraphql{...}로 이동합니다.너는 이런 물건을 볼 수 있을 것이다.GraphiQL 브라우저를 사용하여 WPGraphQL 모드를 익히십시오.페이지 및 게시물 만들기
이제 WordPress 데이터에 따라 페이지와 게시물을 만드는 방법을 살펴봅시다.먼저 페이지 폴더의
gatsby develop 및 http://localhost:8000/___graphql 을 제거합니다.그리고 우리는 아주 간단한 템플릿부터 시작한다.페이지 템플릿
// src/templates/page/index.js
import React from "react"
import Layout from "../../components/layout"
import SEO from "../../components/seo"
const Page = ({ pageContext }) => {
const page = pageContext.page
return (
<Layout>
<SEO title={page.title} />
<h1>{page.title}</h1>
<div dangerouslySetInnerHTML={{__html: page.content}} />
</Layout>
)
}
export default Page
템플릿 게시
// src/templates/post/index.js
import React from "react"
import Layout from "../../components/layout"
import SEO from "../../components/seo"
const Post = ({ pageContext }) => {
const post = pageContext.post
return (
<Layout>
<SEO title={post.title} />
<h1> {post.title} </h1>
<div dangerouslySetInnerHTML={{__html: post.content}} />
</Layout>
)
}
export default Post
개츠비 노드
Gatsby 노드에서 다음 행을 추가합니다.
// gatsby-node.js
const createPages = require("./create/createPages")
const createPosts = require("./create/createPosts")
exports.createPagesStatefully = async ({ graphql, actions, reporter }, options) => {
await createPages({ actions, graphql, reporter }, options)
await createPosts({ actions, graphql, reporter }, options)
}
index.js 라는 폴더를 만듭니다.페이지 만들기
우선, Requires를 추가하고 GraphQL 쿼리를 정의했습니다.
// create/createPages.js
const pageTemplate = require.resolve('../src/templates/page/index.js');
const GET_PAGES = `
query GET_PAGES($first:Int $after:String) {
wpgraphql {
pages(
first: $first
after: $after
# This will make sure to only get the parent nodes and no children
where: {
parent: null
}
) {
pageInfo {
hasNextPage
endCursor
}
nodes {
id
title
pageId
content
uri
isFrontPage
}
}
}
}
`
page-2.js 및 create 을 사용하여 pageInfo를 볼 수 있습니다.이것은 페이지를 나누는 데 도움이 될 것이다. 왜냐하면 우리는 모든 페이지/게시물을 동시에 조회해서는 안 되고, 한 번에 10개를 조회해야 하기 때문이다.이것은 우리가 워드 프레스 백엔드에 큰 압력을 가하지 않을 것을 확보할 것이다.// create/createPages.js
const allPages = []
let pageNumber = 0
const itemsPerPage = 10
/**
* This is the export which Gatbsy will use to process.
*
* @param { actions, graphql }
* @returns {Promise<void>}
*/
module.exports = async ({ actions, graphql, reporter }, options) => {
/**
* This is the method from Gatsby that we're going
* to use to create pages in our static site.
*/
const { createPage } = actions
/**
* Fetch pages method. This accepts variables to alter
* the query. The variable `first` controls how many items to
* request per fetch and the `after` controls where to start in
* the dataset.
*
* @param variables
* @returns {Promise<*>}
*/
const fetchPages = async (variables) =>
/**
* Fetch pages using the GET_PAGES query and the variables passed in.
*/
await graphql(GET_PAGES, variables).then(({ data }) => {
/**
* Extract the data from the GraphQL query results
*/
const {
wpgraphql: {
pages: {
nodes,
pageInfo: { hasNextPage, endCursor },
},
},
} = data
/**
* Map over the pages for later creation
*/
nodes
&& nodes.map((pages) => {
allPages.push(pages)
})
/**
* If there's another page, fetch more
* so we can have all the data we need.
*/
if (hasNextPage) {
pageNumber++
reporter.info(`fetch page ${pageNumber} of pages...`)
return fetchPages({ first: itemsPerPage, after: endCursor })
}
/**
* Once we're done, return all the pages
* so we can create the necessary pages with
* all the data on hand.
*/
return allPages
})
/**
* Kick off our `fetchPages` method which will get us all
* the pages we need to create individual pages.
*/
await fetchPages({ first: itemsPerPage, after: null }).then((wpPages) => {
wpPages && wpPages.map((page) => {
let pagePath = `${page.uri}`
/**
* If the page is the front page, the page path should not be the uri,
* but the root path '/'.
*/
if(page.isFrontPage) {
pagePath = '/'
}
createPage({
path: pagePath,
component: pageTemplate,
context: {
page: page,
},
})
reporter.info(`page created: ${page.uri}`)
})
reporter.info(`# -----> PAGES TOTAL: ${wpPages.length}`)
})
}
hasNextPage 함수를 정의합니다. 이 함수는 더 많은 페이지가 없을 때까지 페이지를 계속 가져옵니다.이것은 그것들을 endCursor 진열에 추가합니다.fetchPages() 비추고 allPages 호출한다.Gatsby API(See docs here에서 제공하는 wpPages 함수로 전달되는 작업입니다.createPage()를 사용하여 경로를 조정해야 하는지 검사합니다.홈페이지에 대해 우리는 경로가 루트 경로 createPagesStatefully() 가 아니라 루트 경로 page.isFrontPage 가 되기를 희망합니다./ 에서 경로를uri로 설정합니다.이것은 한 페이지에slug를 만들 것입니다.이 구성 요소는 우리의 /home/ 분배를 받았고, 마지막으로, 우리는 페이지 데이터를 상하문에 전달한다.게시물 작성
createPosts는 기본적으로 같고 경로 앞에
createPage() 접두사를 붙였습니다.-> 여기에서 전체 파일 참조: createPosts.js
마지막 생각🏁
현재
pageTemplate 를 실행하고 있다면, http://localhost:8000/sample-page/ 아래에서 페이지를 볼 수 있을 것입니다.어떤 페이지를 만들었는지 확실하지 않으면무작위slughttp://localhost:8000/asdf/를 입력하면 모든 페이지의 개술을 얻을 수 있습니다.이것은 이 강좌의 후속 부분에 필요한 기본 설정을 제공할 것입니다.
여기서 코드 찾기: https://github.com/henrikwirth/gatsby-starter-wordpress-advanced/tree/tutorial/part-2
신용❤️
이 부분은 staticfuse's (gatsby-theme-publisher)의 높은 계발을 받았다.너는 마땅히 가서 보아야 한다!
다음은 무엇입니까➡️
다음은 WordPress 메뉴를 기반으로 내비게이션을 구축합니다.
제3부분 -
Reference
이 문제에 관하여(기본 워드프레스 & Gatsby 설정 - Gatsby 워드프레스 입문 안내서 고급 미리보기 버전, i18n 등), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nevernull/basic-wordpress-gatsby-setup-guide-to-gatsby-wordpress-starter-advanced-with-previews-i18n-and-more-44d8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
