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

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 template và thê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