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

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

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 dẫn các bạn làm thế nào để chèn thêm sidebar vào page template trong Gatsby. Như các bạn cũng đã biết. Do chúng ta làm page template cho các page mặc định. Nên việc để trang web trống là điều không thể tránh khỏi. Để khắc phục vấn đề đó. Thì một trong những cách dễ dàng là chen sidebar.

Thêm sidebar vào page template trong Gatsby

Trước tiên các bạn để tạo sidebar các bạn cần phải suy nghĩ là nên để gì trên sidebar. Mình thì sẽ để thông tin trang web cùng với các bài viết mới nhất. Sau khi đã xác định xong mình và các bạn cùng vào dashboard tạo custom field để đưa thông tin trang web vào GraphQL. Mình tạo như sau:

Gatsby-page-template-sidebar

Sau đó mình và các bạn cũng bât GraphQL lên để tạo câu query.

gatsby clean;gatsby develop

Các bạn thực hiện câu query như sau:

query MyQuery {
  allWordpressAcfOptions {
    edges {
      node {
        options {
          logo_pic {
            source_url
            slug
            alt_text
          }
          short_web_des
          social_list {
            social_item
            social_link
          }
        }
      }
    }
  }
}

Và các bạn sẽ thấy kết quả trả về như phần tạo custom field trên dashboard WordPress. Tiếp theo các bạn tạo file sidebar.js vào thư mục src\components và khởi tạo component sidabar:

import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby"
import SideItem from "./sideItem"
const Sidebar = () =>{  return(
<div className="sidebar">
    <StaticQuery query={graphql`{
  allWordpressAcfOptions {
    edges {
      node {
        options {
          logo_pic {
            source_url
            slug
            alt_text
          }
          short_web_des
          social_list {
            social_item
            social_link
          }
        }
      }
    }
  }
}
 render={props => props.allWordpressAcfOptions.edges.node[0].options.map(sideItem =>(
                 <div className="sidebar__logo">
                   <img class="d--none"  alt={sideItem.logo_pic.alt_text} src={sideItem.logo_pic.source_url}/>
                 </div>
                 <div className="sidebar__des">{sideItem.short_web_des}</div>
                 <div className="sidebar__social">
                        {sideItem.social_list.map(social=>(
                          <a href="{social.ssocial_link}" rel="nofollow" target="_blank">{social.social_item}</a>
                     ))}
                 </div>
     ))} />
export default Sidebar

Vậy là chúng ta đã xong các bước đầu tạo sidebar cho trang page template. Để render thêm các phần tin tức mới nhất các bạn cũng dựa trên câu query trên và query thêm allWordpressPost  sau đó thực hiên static query để render ra giao diện.

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 Archive template trên Gatsby

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

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

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