Làm Page template trên Gatbsy

Ngày đăng: 25 - 05 - 2020 Lượt xem: 384 lượt

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render phần tin tức mới sang Gatsby. Thì hôm nay mình tiếp tục hướng dẫn sâu hơn về page template trong Gatsby.

Khởi tạo page và dữ liệu page

Mình vào dashboard trong WordPress và tạo page Giới thiệu. Để tổng hợp các thông tin liên quan đến trang web. Nhưng với bài này không đơn thuần là chúng ta chỉ việc render data từ WordPress sang Gatsby như những lần trước. Mà chúng ta phải làm một page template. Để khi bên dashboard WordPress tạo page mới. Thì trên Gatsby sẽ tự động render ra page đó. Mà chúng ta không cần phải tạo một file riêng cho nó.

page-template-gatsby

Tạo page template trong Gatsby

Trước tiên mình sẽ vào folder src/templates/ và tạo một file là page.js để tạo layout có sẳn render các trang mặc định từ WordPress.

import React from "react"
export default function Page({ pageContext:{edge.node}}) {
  return (
     <Layout>
      <SEO title={pageContext.title} />
       <h1>Hi people</h1>
     </Layout>
  )
}

Sau đó các bạn vào file gatsby-node.js để viết hàm tự động khởi tạo page trên gatsby

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

Chắc hẳn nhìn vào đoạn code sau các bạn một phần nào hiểu được cấu trúc tạo page của hàm này. Và các bạn nhìn thấy là trên hàm mình có truyền graphQL vào. Đúng rồi chúng ta sẽ lấy thông tin cũng như dữ liệu page bằng GraphQL. Các bạn khởi động Gatsby và vào GraphQL.

gatsby develop

Chúng ta cùng query thử đoạn sau, thì thấy kết quả trả về là data của các page có sẵn trong WordPress dashboard.

query MyQuery {
  allWordpressPage {
    edges {
      node {
        title
        slug
        content
      }
    }
  }
}

Sau đó chúng ta cùng vào lại file để đưa data vào hàm createPages.

const _ = require(`lodash`);
const Promise = require(`bluebird`);
const path = require(`path`);
const slash = require(`slash`);
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
 return new Promise((resolve, reject) => {
   graphql(
      `
        {
          allWordpressPage {
            edges {
              node {
                slug
                title
                content
              }
            }
          }
        }
      `
    ).then(result => {
        if (result.errors) {
          console.log(result.errors);
          reject(result.errors);
        }
        const pageTemplate = path.resolve("./src/templates/page.js");
        _.each(result.data.allWordpressPage.edges, edge => {
          createPage({
            path: `/${edge.node.slug}/`,
            component: slash(pageTemplate),
            context: edge.node
          });
        });
      }) 
     }
 }
}

Ở đây mình dùng cơ chể promise để lấy data từ graphQL. Sau khi lấy xong data từ graphQL thì mỗi phần tử trong array edge sẽ được tạo thành page thông qua template page.js mà chúng ta đã tạo trước đó. Với đường dẫn là slug của các page đã tạo ở dashboard WordPress.

Tổng kết

Như vậy là mình đã hướng dẫn xong phần tạo page template. Các bạn có thể thêm page và Gatsby sẽ tự động tạo page thông qua template chúng ta đã tạo trước đó. Trong bài kế tiếp mình sẽ cùng các bạn. Làm layout chi tiết cho page template.

Cảm ơn các bạn đã theo dõi

5 1 vote
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Thêm pagination và sidebar vào archive template trên Gatsby

Thêm pagination và sidebar vào archive template trên Gatsby

05 - 06 - 2020

Trong bài trước mình cùng mọi người cách tạo archive template trên Gatsby. Bài viết lần này mình và các...

Làm Archive template trên Gatsby

Làm Archive template trên Gatsby

02 - 06 - 2020

Trong bài trước mình cùng mọi người làm  sidebar cho page template trên Gatsby. Thì với bài viết này chúng...

Thêm sidebar vào page template trên Gatsby

Thêm sidebar vào page template trên Gatsby

27 - 05 - 2020

Trong bài trước mình cùng mọi người làm  page template trong Gatsby. Thì hôm nay mình tiếp tục hướng...

Render Tin tức mới của homepage trên Gatsby

Render Tin tức mới của homepage trên Gatsby

18 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render sang giao...

Render slider và CTA images của homepage trên Gatsby

Render slider và CTA images của homepage trên Gatsby

17 - 05 - 2020

Trong bài trước mình đã hướng dẫn các bạn render footer từ WordPress sang Gatsby. Nói đơn giản là các...

Render footer từ WordPress sang Gatsby

Render footer từ WordPress sang Gatsby

11 - 05 - 2020

Trong bài trước mình đã hướng dẫn các bạn làm overlay menu trên Gatsby. Thì với bài lần này...

0
Would love your thoughts, please comment.x