Render Header Menu từ WordPress sang Gatbsy

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

Trong bài trước mình đã hướng dẫn các bạn cách kết nối Gatsby với WordPress và hướng dẫn cơ bản về cách sử đụng GraphQL. Thì với bài này chúng ta sẽ tiếp tục tìm hiểu và tạo header menu từ WordPress sang Gastby nhé.

Tạo Menu trên WordPress

Để tạo menu đưa từ WordPress sang Gatsby các bạn cần cái plugin WP API Menus để đưa data menu vào api của WordPress.  Sau khi activate plugin chúng ta sẽ bắt đầu tạo menu trên WordPress. Các bạn vào dashboard tạo menu nhé sau đó vào terminal  bật Gatsby:

gatsby develop

Sau đó chúng ta cùng bật GraphQL để kiểm tra bằng cách vào đường dẫn sau: http://localhost:8000/__graphql.  Các bạn query thoe dòng code sau nhé:

query MyQuery {
  allWordpressMenusMenusItems {
    edges {
      node {
        name
        items {
          slug
          title
        }
      }
    }
  }
}

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

{
  "data": {
    "allWordpressMenusMenusItems": {
      "edges": [
        {
          "node": {
            "name": "Main menu",
            "items": [
              {
                "slug": null,
                "title": "Home"
              },
              {
                "slug": "sample-page",
                "title": "Sample Page"
              }
            ]
          }
        }
      ]
    }
  }
}

Vậy là chúng ta đã hoàn thành xong bước đưa menu và xem kết quả trả về trên GraphQL. Tiếp theo chúng ta sẽ render trên Gatsby

Đưa menu từ WordPress lên Gatsby

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

import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby";
const Navbar = () =>(
   <div className="navbar">
     <div className="navbar__contain container">
       <ul className="navbar__list">
           <StaticQuery query={graphql`{
                   allWordpressMenusMenusItems {
                      edges {
                        node {
                           name
                            items {
                               slug
                                 title
                                    }
                                 }
                             }
                        }
                   }
             `} render={props =>props.allWordpressMenusMenusItems.edges[0].node.items.map((menuItem,index) =>(
                   <li className="navbar__item" key={index}>
                       <Link className="navbar__link" to={menuItem.slug}>{menuItem.title}</Link>
                    </li>
                    ))}/>
             </ul>
    </div>
  </div>
)
export default Navbar

Mình sẽ giải thích code như sau: trước nhất các bạn cần import module react và graphql, StaticQuery, Link để chúng ta sử dụng. Mình tạo một react component theo khai báo arrow function như ES6 và export component Navbar để có thể đưa vào component Layout trong layout.js mà theme mặc định đã tạo sẵn. Sau đó mình dùng thẻ StaticQuery để query dữ liệu mà chúng ta đã query mẫu trên GraphQL. Và dùng thuộc tính render để render array dữ liệu ra ngoài front page bằng cách dùng hàm map trong JavaScript. Khi render các bạn nhớ truyền vào key cho từng component con để tránh bị báo lỗi trên console. Ở đây mình dùng thẻ Link để làm navigator cho các trang nội bộ bên trong.

gatsby-header-render-res

Tổng kết

Qua bài này mình đã giúp các bạn các liên kết render header từ WordPress sang Gatsby. Bài kế tiếp mình sẽ hướng dẫn các bạn làm Hamburger buttonoverlay menu khi responsive trên Gatsby

Cảm ơn các bạn.

 

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

0
Would love your thoughts, please comment.x
()
x