As an experienced website operations expert, I know how common it is for users to need to quickly locate a specific page while browsing a large list of content.Especially in a highly efficient and flexible content management system like AnQiCMS, it provides users with a convenient navigation experience, which can significantly improve the usability and user satisfaction of the website.Today, let's delve into how to巧妙ly implement a function similar to 'jump to page X' in the AnQiCMS template.

Use AnQiCMS template to easily implement the "jump to page X" function

In websites with a large amount of content, traditional 'Previous Page', 'Next Page', and fixed page number lists are practical, but when the list of pages is too long, users often need to click repeatedly to reach the target page, which undoubtedly reduces the browsing efficiency.A direct 'jump to page X' input box allows users to enter the page number directly, quickly arriving at the desired content, greatly optimizing the user experience.AnQiCMS powerful template engine and rich tag system, providing a solid foundation for us to implement this feature.

AnQiCMS pagination mechanism overview

To implement the page jump function, you first need to understand how AnQiCMS handles pagination in templates. AnQiCMS's template system, especially when dealing with list data, will handle pagination byarchiveListLabel collaborationtype="page"Properties to retrieve pagination data and then usepaginationTags to render page navigation.

When we use{% pagination pages with show="5" %}Such a tag, it will generate a name calledpagesThe object contains all the information about the current pagination state, such as the total number of pages (pages.TotalPages), the current page (pages.CurrentPage) as well as the link information corresponding to each page number. These are the indispensable data sources for building the jump function.

By default,paginationLabels will output links similar to "HomeitemInpages.PagesAn array will have oneLinkA property pointing to the specific URL of this page. Our goal is to use this information, combined with JavaScript, to dynamically construct jump links.

The core idea of implementing the "jump to a specific page" feature

The core of implementing this function lies in:

  1. Get the total number of pages and the current page number:This will be used as themaxvalue andvalueThe default value, providing basic client validation and user-friendliness.
  2. Build an input box and a jump button:Allow users to enter the target page number and trigger the jump operation.
  3. Dynamically generate the target URL:When the user clicks the jump button, the page number in the input box is obtained through JavaScript, and then the target page number URL is dynamically concatenated according to the structure of the current page URL.
  4. Perform page jump:Redirect the browser to the newly generated URL.

The pseudo-static rules of AnQiCMS may vary, but the page number is usually followed by?page=XThe form is attached to the URL at the end, for exampleyourdomain.com/category/list.html?page=3Even if there are other query parameters, modern browsersURLobjects can handle it well too

Implementation step by step: embedding the function in the AnQiCMS template

Now, let's integrate this feature step by step into the AnQiCMS template.

First, make sure your content list page (usually) has already been used{模型table}/list.htmlor{模型table}/list-{文档分类ID}.htmletc.) has already been usedarchiveListandpaginationto paginate with tags.

  1. Locate the pagination control area:Generally, we would place the jump input box next to the existing pagination navigation to maintain the layout consistency. You can find the template that includes{% pagination pages with show="5" %}this part of the code'sdivor another container.

  2. Add an HTML element:In{% pagination %}Inside the label, or immediately following it, we can add an input box and a button.In order to enhance user experience, we will set the current page number as the default value for the input box and set the maximum page number.

    <div class="page-jump-container">
    <span>共 {{pages.TotalPages}} 页</span>
    <input type="number" id="jumpPageInput" min="1" value="{{pages.CurrentPage}}" max="{{pages.TotalPages}}">
    <button onclick="jumpToPage({{pages.TotalPages}})">跳转</button>
</div>

    here,id="jumpPageInput"in order to make it convenient for JavaScript to access,min="1"/value="{{pages.CurrentPage}}"andmax="{{pages.TotalPages}}"then it utilizes the provided by AnQiCMS.pagesObject data makes the input box smarter.onclick="jumpToPage({{pages.TotalPages}})"Pass the total number of pages as a parameter to the JavaScript function for internal verification.

  3. Write JavaScript logic:On the page<script>Add within the tag, or in your external JavaScript file, addjumpToPageThe function will be responsible for handling user input and page navigation.

    `javascript"