Thêm pagination và sidebar vào archive template trên Gatsby

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

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 sẽ tiếp làm pagination và sidebar vào archive template.

Thêm pagination trong gatsby-node.js

Để làm pagination các bạn vào lại folder project của mình và bật file gatsby-node.js. Các bạn kiếm dòng code như sau:

const webPageTemplate = path.resolve('./src/templates/archive.js');

Sau đó phía trên dòng code này các bạn thêm vào như sau:


const posts = result.data.allWordpressWpBlogs.edges;
const postPerPage = 9;
const numberOfPages = Math.ceil(posts.length / postPerPage);

Như các bạn cũng thấy ở trên ở đây mình sẽ đặt một biến để tập hợp các bài post trong blog lại. Sau đó mình đặt thêm 1 biến nữa để mặc định số post mình muốn hiện trên một trang. Tiếp theo ở biến numberOfPages mình sẽ dùng công thức tính toán lấy số lượng bài post chia cho số lượng post trên 1 trang, tiếp theo mình làm tròn lên để có được số trang. Tiếp các bạn kiếm dòng này nằm phía dưới các dòng chúng ta mới viết


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 điều chỉnh lại hàm đó như sau:


          Array.from({length: numberOfPages}).forEach((page, index) => {
            createPage({
              component: slash(webPageTemplate),
              path:index === 0 ? '/archive' : `/archive/trang-${index + 1}`,
              context: {
                posts: posts.slice(index * postPerPage, (index * postPerPage) + postPerPage),
                numberOfPages,
                currentPage: index + 1,
                isFirstPage: index === 0
              }
            })
          });

Mình dùng điều kiện để xác định nếu như index của trang bằng 0 thì đường dẫn sẽ là archive còn nếu như index lớn hơn 1 thì đường dẫn sẽ là /archive/trang-${index + 1}. Tiếp theo mình truyền vào pageContext  mốt số  thuốc tính sau: currentPage, numberOfPages, isFirstPage  để render pagination trong archive.js.

Thêm pagination vào archive.js

Các bạn mở file template archive.js và kiếm chỗ sau:


export default ({data,pageContext}) =>{...

Các bạn thêm một số dòng sau:


  const {currentPage, isFirstPage,numberOfPages} = pageContext;
  const nextPage = `/archive/trang-${currentPage +1}`;
  const prevPage = currentPage - 1 === 1 ? '/' : `/archive/trang-${String(currentPage-1)}`;
  const isLastPage = currentPage === numberOfPages;

Mình sẽ tạo mốt số biến mặc định để có thể gọi ra khi làm pagination. Tiếp tục các bạn kéo xuống dưới thẻ div cuối cùng của template và thêm vào ở trên như sau:

             <div className="pagination">
                <div className="pagination__container">
                  {!isFirstPage && (
                    <div className="pagination__item">
                      <Link to={prevPage} rel="prev" className="pagination__number">
                        Prev Page
                      </Link>
                    </div>
                  )}
                  {((currentPage === 1 )&&(numberOfPages !== 1))&& (
                    <>
                    <div className="pagination__item">
                      <Link to="web-development" rel="current" className="pagination__number active">
                        {currentPage }
                      </Link>
                    </div>
                    <div className="pagination__item">
                      <Link to={nextPage} rel="nextPage" className="pagination__number">
                        {currentPage + 1}
                      </Link>
                    </div>
                    </>
                  )}
                  {((currentPage === numberOfPages)&&(currentPage !== 1)) && (
                    <>
                    <div className="pagination__item">
                      <Link to={prevPage} rel="prevPage" className="pagination__number">
                        {currentPage - 1}
                      </Link>
                    </div>
                    <div className="pagination__item">
                      <Link to="web-development" rel="current" className="pagination__number active">
                        {currentPage }
                      </Link>
                    </div>
                    </>
                  )}
                  {((currentPage !== numberOfPages)&&(currentPage !== 1))  && (
                    <>
                    <div className="pagination__item">
                      <Link to={prevPage} rel="prevPage" className="pagination__number">
                        {currentPage - 1}
                      </Link>
                    </div>
                    <div className="pagination__item">
                      <Link to="web-development" rel="current" className="pagination__number active">
                        {currentPage }
                      </Link>
                    </div>
                    <div className="pagination__item">
                      <Link to={nextPage} rel="nextPage" className="pagination__number">
                        {currentPage +1}
                      </Link>
                    </div>
                    </>
                  )}
                  {!isLastPage && (
                    <div className="pagination__item">
                      <Link to={nextPage} rel="next" className="pagination__number">
                        Next Page
                      </Link>
                    </div>
                  )}
                </div>
             </div>

Vậy là chúng ta đã xong phần thêm pagination vào archive template. Kết quả trả về sẽ như sau:

wordpress-gatsby-archive-pagination-1 wordpress-gatsby-archive-pagination-2 wordpress-gatsby-archive-pagination-3

Tuy nhiên các bạn phải thêm css nữa thì mới được như vầy nhé!!!!. Để thêm sidebar vào archive template thì các bạn chỉ cần import vào và gọi thẻ ra là xong.

Tổng kết

Vậy là mình đã hướng dẫn xong các bạn tạo các thêm pagination và sidebar vào archive template rồi. Qua bài kế tiếp mình và các bạn sẽ làm post template để render trang chi tiết bài post nhé.

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

4 3 votes
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

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

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