Làm Post template và thêm sidebar vào Post Template

Ngày đăng: 09 - 06 - 2020 Lượt xem: 122 lượt

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

Cấu hình trong gatsby-node.js

Để cấu hình trước tiên cá bạn cần vào file gatsby-node.js. Ngay dưới phần cấu hình cho archive template các bạn thêm đoạn như sau:

.then(() => {
        graphql(
          `
            {
              allWordpressWpBlogs {
                edges {
                  node {
                    id
                    title
                    slug
                    content
                    date(formatString: "DD,MMMM, YYYY")
                    featured_media {
                      source_url
                    }
                    yoast_meta {
                     yoast_wpseo_metadesc
                   }
                   acf {
                    keyword
                   }
                  }
                }
              }
            }
          `
        ).then(result => {
          if (result.errors) {
            console.log(result.errors);
            reject(result.errors);
          }
          const postTemplate = path.resolve("./src/templates/post.js");
          _.each(result.data.allWordpressWpBlogs.edges, edge => {
            createPage({
              path: `/${edge.node.slug}`,
              component: slash(postTemplate),
              context: edge.node
            });
          });
        });
      })

Ở đây mình dùng GraphQL để query các bài post và mình chuyển ngày phát hành theo format “DD,MMMM, YYYY”. Tuy nhiên các bạn sẽ thấy kèm theo đó là các trường của yoast seo thì phần này mình sẽ nói rõ ở nhưng bài sau. Chủ yếu mục này để tối ưu SEO cho web. Thì các bạn cũng thấy rằng ở đoạn code trên mình cho mội bài post sẽ có template là post.js với đường dẫn là đường dẫn của post đó tại WordPress. Sau đó mình truyền các trường thông tin mình muốn dùng vào template. Các bạn tạo file ./src/templates/post.js mình và các bạn tiếp tục làm post template.

Làm Post Template và thêm sidebar

Trước tiên mình và các bạn sẽ import các module cần thiết cho template

Xem code tại đây: https://anotepad.com/notes/dwqyn9cg

Ở đây mình dùng dangerouslySetInnerHTML để render ra title và content để browser chuyển đổi các character HTML, này nó tương dương với innerHTML trong Vanilla JavaScript. Tiếp tục chúng ta chèn sidebar như các trang trước mình và các bạn đã làm. Vậy là chúng ta đã hoàn thành xong post template rồi.

Tổng kết

Vậy là mình đã hướng dẫn xong các bạn tạo các làm Post templatethêm sidebar vào Post Template. Qua bài kế tiếp mình hướng các cách deploy lên server nhé.

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

5 1 vote
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

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...

Làm Page template trên Gatbsy

Làm Page template trên Gatbsy

25 - 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 phần tin...

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
()
x