Làm Archive template trên Gatsby

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 ta cùng tìm hiểu cách thực tạo archive template từ WordPress sang Gatsby.

Archive template trên Gatsby

Trước tiên các bạn vào folder templates tạo file archive.js và sau đó khởi tạo component template.

import React from 'react'
const Archive = () =>{  return()}
export default Archive;

Sau đó các bạn tạo custom post type trong WordPress. Mình sẽ lấy ví dụ là tạo Blog trong WordPress với đoạn code như sau:

function theme_products(){
    $label = array(
        'name' => 'Blogs',
        'singular_name' => 'Blogs' ,
		'add_new'               => __( 'Thêm blog', 'textdomain' ),
        'add_new_item'          => __( 'Tên blog', 'textdomain' ),
        'new_item'              => __( 'Blog mới', 'textdomain' ),
        'edit_item'             => __( 'Chỉnh sửa blog', 'textdomain' ),
        'view_item'             => __( 'Xem blog', 'textdomain' ),
        'all_items'             => __( 'Tất cả blog', 'textdomain' ),
        'search_items'          => __( 'Tìm kiếm blog', 'textdomain' ),
	'featured_image'        => _x( 'Hình ảnh blog', 'textdomain' ),
        'set_featured_image'    => _x( 'Chọn hình ảnh blog', 'textdomain' ),
        'remove_featured_image' => _x( 'Xóa hình ảnh blog', 'textdomain' ),
    );
    $args = array(
        'labels' => $label,
        'description' => 'Phần blog theme',
        'supports' => array(
            'title',
            'editor',
            'thumbnail',
            'custom-fields'
        ),
        'hierarchical' => false,
        'order' => 'DESC',
        'orderby' => 'date',
        'posts_per_page' => 30,
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'show_in_nav_menus' => true,
        'show_in_admin_bar' => true,
        'show_in_rest' => true,
        'rest_base'          => 'blogs',
        'menu_position' => 5,
        'menu_icon'           => 'dashicons-book-alt',
        'can_export' => true,
        'has_archive' => true,
        'publicly_queryable' => true,
        'capability_type' => 'post'
    );
    register_post_type('theme_products', $args);
}
add_action('init', 'theme_products');

Điều đặt biết ở đây là mình thêm vào dòng

'show_in_rest' => true

Dòng này giúp đưa custom post type vừa tạo vào api mặc định của WordPress các bạn kiểm ta bằng cách  bật GraphQL trong Gatsby

gatsby develop

Sau đó các bạn query như sau:

 {allWordpressWpBlogs(sort: {fields: date, order: DESC}) {
                   edges {
                     node {
                       id
                       title
                       slug
                       content
                       date(formatString: "DD,MMMM, YYYY")
                       featured_media {
                         source_url
                       }
                     }
                   }
                 }
               }

Sau khi thêm dòn show-in-rest trên GraphQL hiện các thành phần liên quan đến custom post type blog  trong đoạn query trên mình có thêm thuộc tính sắp xếp giảm dần theo thời gian. Tức là bài blog nào đăng gần nhất sẽ được xếp ở đầu. Tiếp theo mình thêm thuôc tính date formate cho trường thông tin date của Blog. Có rất nhiều kiểu date format trong GraphQL các bạn có thể tham khảo thêm tại đây. Bước tiếp theo chúng ta sẽ vào file gatsby-node.js để truyền các bài Blog vào archive.js:

.then(()=>{
      graphql(`
                {
                 allWordpressWpBlogs(sort: {fields: date, order: DESC}) {
                   edges {
                     node {
                       id
                       title
                       slug
                       content
                       date(formatString: "DD,MMMM, YYYY")
                       featured_media {
                         source_url
                       }
                     }
                   }
                 }
               }
      `).then(result =>{
          if (result.errors) {
            console.log(result.errors);
            reject(result.errors);
          }
          const webPageTemplate = path.resolve('./src/templates/archive.js');
          Array.from({length: numberOfPages}).forEach((page, index) => {
            _.each(result.data.allWordpressWpBlogs.edges, edge => {
            createPage({
              path: `/${edge.node.slug}`,
              component: slash(webPageTemplate),
              context: edge.node
            });
          });
      });
    })

Các bạn thêm đoạn này  nối đuôi  phần .then() của phần tạo page trong bài trước. Vậy là chúng ta bước đầu đã xong việc còn lại là các bạn vào lại archive.js truyền pageContext và render giao diện theo ý muốn.

Tổng kết

Vậy là mình đã hướng dẫn xong các bạn tạo trang archive cho custom post type Blog. Qua bài kế tiếp mình sẽ hướng dẫn các bạn các chèn thêm pagination.

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