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

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:

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