You have the option to paginate a list of collections and specify the desired number of items to display on each page of the collection list. This offers numerous advantages in terms of both collection design and page performance. Pagination allows you to:
- Show more than 100 collection Items from your collection in a single list
- Show fewer collection items per page to improve page performance and loading speed
- Establish custom dynamic sliders for showcasing latest arrivals, recent blog posts, products on sale, and more
What You Will Learn in this Tutorial
- Paginating a list of collections
- Understanding the structure of the pagination wrapper
- Configuring pagination settings
- Sharing the URL of a collection list page
- Adding a second pagination wrapper within the same collection list
- Exploring pagination and SEO
- Troubleshooting common issues and FAQs
- Creating a personalized pagination feature with numbered pages
Paginate a list of collections
To activate pagination for a specific collection list, navigate to the 元素設定面板 並選擇 Paginate items checkbox. Optionally, you can adjust the number of items to display per page.
Pagination Items (checkbox)
This checkbox provides the option to enable or disable pagination for the selected collection list. Disabling and re-enabling pagination will restore previous settings and component styles.
Page Count Indicator
This read-only text string displays the number of collection list pages to be generated based on the specified Items/page value.
Items/page (slider/number input)
This feature enables you to define the quantity of items to showcase per page in the collection list. The minimum value is 1, while the maximum is 100. Any changes made here will immediately reflect on the collection list in the workspace and update the page count indicator in the settings.
Understanding the structure of the pagination wrapper
Upon enabling pagination for a collection list, a new 分頁 component will be appended to the collection list wrapper. This can be viewed at any time in the Navigator. The component consists of two link blocks: the previous and next buttons.
When working on the canvas, the next button will appear if the collection list contains more items than the specified items/page value in the collection list settings. To view both the previous 和 next buttons, either switch to a different page using the pagination settings or click next in preview mode.
Configuring pagination settings
When the pagination wrapper is selected on the canvas, you can access the pagination settings 內 元素設定面板. Alternatively, you can directly interact with the settings on the canvas by pressing enter or double-clicking on the pagination wrapper.
Page Navigation
This pagination feature enables you to navigate to a specific page within the collection list using the dropdown menu, or move to the previous or next pages using the arrows. This functionality is beneficial for styling and customizing the previous and next buttons. It also facilitates previewing collection list pages directly on the canvas.
You can also preview and test the collection list pages along with the pagination buttons in preview mode.
Show Page Count
This setting allows you to display the current and total number of pages in your collection list. It introduces a new text block within your pagination wrapper that can be repositioned within the wrapper and styled like any other text block.
Sharing the URL of a collection list page
Each collection list page possesses a unique URL, enabling your website visitors to share a direct link to that specific page. For instance, if you encounter a friend’s image and information on an author’s page on a blog, and their details are located on page 3 of the authors’ list, you can easily share that precise page by copying the URL from the browser’s address bar.