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

Ngày đăng: 18 - 05 - 2020 Lượt xem: 103 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 sang giao diện homepage của Gatsby. Thì với bài này chúng ta cùng nhau luyện tập thêm về thông qua render tin tức mới  trên homepage.

Render tin tức mới lên Gatsby

Để bắt đầu chúng ta cùng vào trong dashboard của WordPress. Mình sẽ tạo thêm 4 bài viết tạo data render trên gatsby.

gatsby-render-news

Sau đó mình bật Gatsby để kiểm tra dữ liệu đổ về GraphQL. Các bạn gõ lệnh:

gatsby develop

Sau đó các bạn vào vào GraphQL kiểm tra array object sau:

query MyQuery {
  allWordpressPost {
    edges {
      node {
        title
        slug
        featured_media {
          source_url
          alt_text
        }
      }
    }
  }
}

Và kết quả trả về như sau:

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "title": "Featured New",
            "slug": "featured-new",
            "featured_media": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
              "alt_text": ""
            }
          }
        },
        {
          "node": {
            "title": "Lastest New",
            "slug": "lastest-new",
            "featured_media": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
              "alt_text": ""
            }
          }
        },
        {
          "node": {
            "title": "News Post",
            "slug": "news-post",
            "featured_media": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
              "alt_text": ""
            }
          }
        },
        {
          "node": {
            "title": "Hello world!",
            "slug": "hello-world",
            "featured_media": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
              "alt_text": ""
            }
          }
        }
      ]
    }
  }
}

Tiếp theo chúng ta cùng tạo file news.js và import vào trong index.js sau đó khởi tạo và import các component cần thiết vào news.js:


import React, { Component } from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
import {Link } from "gatsby"

Tiếp theo cũng giống như bài trước các bạn đưa dữ liệu query vào biến data trong file index.js sau đó truyền props vào component News

const data = useStaticQuery(graphql`
    {
      allWordpressPost {
        edges {
          node {
            title
            slug
            featured_media {
              source_url
              alt_text
            }
          }
        }
      }
    }
  `)

Và truyền props vào component News

<News newList={data.allWordpressPost.edges} />

Sau đó các bạn vào news.js để lấy props

export default class News extends Component {
  state = {
    responsive: { 1024: { items: 4} },
  } render() {
    const { responsive} = this.state
    const handleOnDragStart = (e) => e.preventDefault();
    const{sliderNewsData} = this.props;
    const elm = sliderNewsData.map((sliderItem,index) => {
      return (
        <Link key={index} className="carousel" onDragStart={handleOnDragStart} to={sliderItem.node.slug}>
           <img data-src={sliderItem.node.featured_media.source_url} alt={sliderItem.node.featured_media.alt_text} className="lazyload"/>
           <h3>{sliderItem.node.title}</h3>
        </Link>
      );
    });
    return (
      <AliceCarousel
        buttonsDisabled={true}
        responsive={responsive}
        items={elm}
        autoPlayInterval={5000}
        autoPlayDirection="ltr"
        autoPlay={true}
        stopAutoPlayOnHover={true}
        mouseTrackingEnabled={true}
      />
    )
  }
}

Và các bạn reset lại gatsby các bạn sẽ thấy slider đã được render ra và việc còn lại là css cho phần news tin tức. Khi các bạn nhấn qua tin tức có thể sẽ bị báo lỗi 404.Vì hiện tại mình và các bạn chưa tạo page cho các bài post. Trong bài kế tiếp mình sẽ nói rõ hơn về cách tự động tạo page cho post.

Tổng kết

Qua bài này mình đã giúp các bạn render tin tức mới từ WordPress sang Gatsby. Và chắc hẵn cũng một phần nào giúp bản hiểu rõ hơn khi lấy dấy liệu từ WordPress thông qua GraphQL. Bài kế tiếp mình sẽ hướng dẫn các bạn làm Page template và post template  trên Gatsby.

5 1 vote
Article Rating

guest
0 Comments
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...

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