In the previous post, I showed you how to create an archive template on Gatsby. In this article, you and I will continue to make pagination and sidebar into the archive template.
Add pagination in gatsby-node.js
To do pagination, go back to your project folder and turn on the file gatsby-node.js . You are looking for the following line of code:
<code>const webPageTemplate = path.resolve('./src/templates/archive.js');
</code><div><span>1</span></div>
Then above this line of code you add the following:
<code> const posts = result.data.allWordpressWpBlogs.edges; const postPerPage = 9; const numberOfPages = Math.ceil(posts.length / postPerPage); </code><div> <span>1</span><span>2</span><span>3</span><span>4</span> </div>
As you can see above, here I will set a variable to collect blog posts. Then I set one more variable to default to the number of posts I want to show on a page. Next in the numberOfPages variable , I will use the calculation formula to get the number of posts divided by the number of posts on 1 page, next I round up to get the number of pages. Next, look for this line below the lines we just wrote
<code>
Array.from({length: numberOfPages}).forEach((page, index) => {
_.each(result.data.allWordpressWpBlogs.edges, edge => {
createPage({
path: `/${edge.node.slug}`,
component: slash(webPageTemplate),
context: edge.node
});
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
</div>
You modify that function as follows:
<code>
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
}
})
});
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span>
</div>
I use the condition to determine if the index of the page is 0, the path will be archive and if the index is greater than 1, the path will be /archive/page-${index + 1} . Next, I pass in the pageContext some of the following calculations: currentPage, numberOfPages, isFirstPage to render pagination in archive.js.
Add pagination to archive.js
You open the archive.js template file and find the following:
<code>
export default ({data,pageContext}) =>{...
</code><div>
<span>1</span><span>2</span>
</div>
Add the following lines:
<code>
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;
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
I will create some default variables that can be called when doing pagination . Continue to drag down the last div tag of the template and add the following above:
<code> <div classname="pagination">
<div classname="pagination__container">
{!isFirstPage && (
<div classname="pagination__item">
<link to="{prevPage}" rel="prev" classname="pagination__number">
Prev Page
</div>
)}
{((currentPage === 1 )&&(numberOfPages !== 1))&& (
<div classname="pagination__item">
<link to="web-development" rel="current" classname="pagination__number active">
{currentPage }
</div>
<div classname="pagination__item">
<link to="{nextPage}" rel="nextPage" classname="pagination__number">
{currentPage + 1}
</div>
>
)}
{((currentPage === numberOfPages)&&(currentPage !== 1)) && (
<div classname="pagination__item">
<link to="{prevPage}" rel="prevPage" classname="pagination__number">
{currentPage - 1}
</div>
<div classname="pagination__item">
<link to="web-development" rel="current" classname="pagination__number active">
{currentPage }
</div>
>
)}
{((currentPage !== numberOfPages)&&(currentPage !== 1)) && (
<div classname="pagination__item">
<link to="{prevPage}" rel="prevPage" classname="pagination__number">
{currentPage - 1}
</div>
<div classname="pagination__item">
<link to="web-development" rel="current" classname="pagination__number active">
{currentPage }
</div>
<div classname="pagination__item">
<link to="{nextPage}" rel="nextPage" classname="pagination__number">
{currentPage +1}
</div>
>
)}
{!isLastPage && (
<div classname="pagination__item">
<link to="{nextPage}" rel="next" classname="pagination__number">
Next Page
</div>
)}
</div>
</div></code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span><span>47</span><span>48</span><span>49</span><span>50</span><span>51</span><span>52</span><span>53</span><span>54</span><span>55</span><span>56</span><span>57</span><span>58</span><span>59</span><span>60</span><span>61</span><span>62</span><span>63</span><span>64</span><span>65</span>
</div>
So we’re done adding pagination to the archive template . The returned result will be as follows:
However, you have to add more css to be like this!!!!. To add a sidebar to the archive template , you just need to import it and call the tag out.
summary
So I have finished guiding you to create additional pagination and sidebars in the archive template . Through the next post, you and I will make a post template to render the post detail page.
Thank you for watching
