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.