Add list pagination functionality

[flik1337]

Hi, I have added pagination functionality, as shown in the image.

Using the Aira template as an example, when adding pagination to the list on the /post page of Aira:

1. Add pagination information to static.json

   {
       "paginationList" : [
           {
               "route": "/posts",
               "pageSize": 2,
               "iteratorKey":"posts-loop"
           }
       ]
   }
   
   

• route: Specifies which route page enables the pagination feature.
• pageSize: The number of items displayed per page.
• iteratorKey: Specifies which <ForEach> to paginate.

2. Add iteratorKey to the <ForEach> element

   <ForEach content="post" as="post" count="{count}" iteratorKey="posts-loop" >
   

   Now, the posts page only displays 2 items.

3. Use paginator to implement page switching.

   Add a paginator structure inside <ForEach>. This structure must contain two <a> tags and use "prev" and "next" to specify the switching direction.

   <ForEach content="post" as="post" count="{count}" iteratorKey="posts-loop"> 
       <div class="relative border border-transparent border-dashed cursor-pointer p-7 group rounded-2xl" onClick="window.location='{post.link}'">
           xxxx
       </div>
       <paginator>
           <div class="w-full flex justify-between">
               <a prev>
                   Prev
               </a>
               <a next>
                   Next
               </a>
           </div>
       </paginator>
   </ForEach>
   

Here is how it works:

• During the dev phase, the parser will match the data that needs pagination and perform slicing.

• During the build phase, the builder will generate multiple subpages under the directory of the page.

  • when accessing /posts/pgn/X, it will load the data for page X. The paginator uses href for page navigation.

Although I modified some methods in the parser.js, this does not affect the current project.

All function calls remain the same as before.

[tnylea]

@flik1337 This is amazing!

Thanks for the contribution. Can you go ahead and add this to the docs in this repo here. https://github.com/thedevdojo/static.devdojo.com You can fork it and then submit a PR.

This would go great in the Configurations section below the Custom Build Directory and URL

Oh, I did have one question as well. Wouldn't it be better to remove the word /pgn/2 and instead just create the folder directly in that folder, so /posts/2, /posts/4, etc. I think that would be ideal.

Let me know what you think and go ahead and submit that to the docs and then I'll get this one merged in ;)

Appreciate it!

[flik1337]

@tnylea Hi, thank you for your suggestion!

I agree that removing the pagination folder prefix (/pgn) makes sense. I've already updated the code and removed that part.

I'm also taking the time to add this section to the static documentation as requested.

Thanks again!

[flik1337]

@tnylea I've submit a PR to the docs. thedevdojo/static.devdojo.com#6