Added documentation related to pagination for #29PR of static.

content/docs/features/collections.md

@@ -180,6 +180,66 @@ This will render the following HTML:
 
 The **loop** variable will start at **1** and it will increment each time the loop iterates.
 
+## Pagination
+
+You can add pagination logic to any `<ForEach></ForEach>` loop.
+
+First, add a unique `iteratorKey` to the loop, for example:
+
+```html
+<ForEach content="post" as="post" count="{count}" iteratorKey="posts-loop">
+```
+
+Next, include a `<paginator>` within the `<ForEach></ForEach>` loop. 
+
+This structure must contain two `<a>` tags and use "**prev**" and "**next**" to specify the switching direction, for example:
+
+```html
+<ForEach content="post" as="post" count="{count}" iteratorKey="posts-loop">
+    <div>
+        ...
+    </div>
+    <paginator>
+        <div class="w-full flex justify-between">
+            <a prev>
+                Prev
+            </a>
+            <a next>
+                Next
+            </a>
+        </div>
+    </paginator>
+</ForEach>
+```
+
+> You are free to customize the content and style within `<paginator></paginator>`, just ensure it contains two `<a>` tags, with the keywords prev and next.
+
+Finally, specify the pagination logic in your `static.json` configuration file:
+
+```json
+{
+    "paginationList" : [
+        {
+            "route": "/posts",
+            "iteratorKey":"posts-loop",
+            "pageSize": 2
+        }
+    ]
+}
+```
+
++ `route` specifies the page where pagination logic needs to be added.
++ `iteratorKey` determines which `<Foreach>` structure on the route page is assigned pagination logic.
++ `pageSize` determines how many items to display per page. 
+
+For instance, if the `count` is 10 and `pageSize` is 5, it will generate 2 sub-pages. The first sub-page displays items 1-5, and the second displays items 6-10.
+
+
+
+Please consult the **/Configurations/Pagination** section for additional details.
+
+
+
 ## Conclusion
 
 Collections are a powerful feature that allow you to organize and loop through sets of data in your static website. If you want to create long copy **text** such as posts or articles, you'll probably want to use Statics **content** feature for that. Let's discuss that next.

content/docs/features/configurations.md

@@ -45,7 +45,7 @@ You can customize the directory your site will build to and you may also specify
         "directory" : "/directory/to/build/path"
     }
  }
- ```
+```
 
 > Notice that if you specify the `build.url`, you will also need to specify the `dev.url`.
 
@@ -55,4 +55,32 @@ The `directory` path is the folder your site will be generated when running `sta
 <script src="{ url('/assets/js/main.js') }"></script>
 ```
 
-This is the **url** helper method. Learn <a href="/docs/features/helpers">more about helpers here</a>.
+This is the **url** helper method. Learn <a href="/docs/features/helpers">more about helpers here</a>.
+
+
+
+# Pagination
+
+If you want to control the pagination logic of a loop list on your page, you can add a `paginationList` key to your `static.json` file, as shown below.
+
+```json
+{
+    "paginationList" : [
+        {
+            "route": "/posts",
+            "iteratorKey":"posts-loop",
+            "pageSize": 2
+        }
+    ]
+}
+```
+
++ `route` specifies the page where pagination logic needs to be added.
++ `iteratorKey` determines which `<Foreach>` structure on the route page is assigned pagination logic.The `iteratorKey` must be manually specified within the `<Foreach>` tags.
++ `pageSize` determines how many items to display per page. 
+
+For instance, if the `count` is 10 and `pageSize` is 5, it will generate 2 sub-pages. The first sub-page displays items 1-5, and the second displays items 6-10.
+
+
+
+In addition, you need to understand how to switch between pages to change the currently displayed items. Please refer to **Collections/Pagination** for more information.