diff --git a/content/docs/features/collections.md b/content/docs/features/collections.md index 8ec341b..3fe57d3 100644 --- a/content/docs/features/collections.md +++ b/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 `` loop. + +First, add a unique `iteratorKey` to the loop, for example: + +```html + +``` + +Next, include a `` within the `` loop. + +This structure must contain two `` tags and use "**prev**" and "**next**" to specify the switching direction, for example: + +```html + +
+ ... +
+ +
+
+
+``` + +> You are free to customize the content and style within ``, just ensure it contains two `` 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 `` 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. \ No newline at end of file diff --git a/content/docs/features/configurations.md b/content/docs/features/configurations.md index d851163..abcdda3 100644 --- a/content/docs/features/configurations.md +++ b/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 ``` -This is the **url** helper method. Learn more about helpers here. \ No newline at end of file +This is the **url** helper method. Learn more about helpers here. + + + +# 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 `` structure on the route page is assigned pagination logic.The `iteratorKey` must be manually specified within the `` 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. \ No newline at end of file