How does AnQiCMS allow search results to be paginated on the page?

In AnQiCMS, implementing pagination for the website's search results is an important function for enhancing user experience and optimizing the website structure.AnQiCMS's powerful template tag system makes this process intuitive and efficient.By using reasonablyarchiveListandpaginationThese core tags allow you to easily build a fully functional search results page.

Core mechanism:archiveListTags and pagination types

AnQiCMS providesarchiveListTags act as a core tool to search and display all types of content on a website, including search results. When we need to implement pagination on the search results page, we just need toarchiveListSet in the labeltype="page"Parameter. The setting of this parameter enablesarchiveListIt not only returns the list of documents that meet the criteria, but also automatically handles the data required for pagination, laying the foundation for subsequent pagination navigation.

The handling of search keywords,archiveListBuilt-in tags,qParameter. You can directly specify the search term in the template, but a more intelligent and common practice is that when the user submits the keyword through the search form, AnQiCMS will extract it from the query parameters of the URL (such asq=关键词These search conditions are automatically recognized and applied, no additional manual handling is required in the template.This allows the content list to dynamically adjust according to the user's input keywords and provides an accurate data source for the subsequent pagination function.

Build a search form

A well-designed search function first requires a reasonable HTML search form.In AnQiCMS, the design of this form is similar to that of a conventional HTML form, the key is to set several core properties.

First, set themethodproperties of the"get"Make sure the search request is sent as GET to ensure that keywords can be passed through the URL. Second,actionThe property usually points to the system's search page path, for example"/search". Most importantly, the search keyword input box'snameattribute must be set to"q"This is the field name of the default search term recognized by AnQiCMS, ensuring that the system can correctly obtain the search term entered by the user.

Here is an example of a typical search form.

<form method="get" action="/search">
    <div>
        <input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
        <button type="submit">搜索</button>
    </div>
</form>

In this example,value="{{urlParams.q}}"The use can ensure that after the user submits the search, the search box still displays the keywords they entered previously, enhancing the user experience.

Display the search results list

The display of search results usually occurs in dedicated template files. According to the AnQiCMS template conventions, for the search results page, the system defaults to searching for/templateUnder the directorysearch/index.htmlFile. All of your search result display logic should be concentrated in this file.

In this template, we will use it again.archiveListTags to retrieve and render documents matching the search criteria. Combined with what was mentioned previouslytype="page"parameter,archiveListWill return a list of documents containing pagination information.limitParameters are used to control how many search results are displayed per page.

ByforLoop througharchivesVariables, we can show the title, description, and link information of each search result one by one. If the current search result is empty,{% empty %}The content within the tag will provide a friendly prompt.

The following is an example code snippet showing a list of search results:

<div>
{% archiveList archives with type="page" limit="10" %} {# q参数无需手动指定，系统会从URL自动获取 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        很抱歉，没有找到与您搜索关键词相关的结果。
    </li>
    {% endfor %}
{% endarchiveList %}
</div>

Implement elegant pagination navigation

After displaying the search results list, pagination navigation is an indispensable link to facilitate users to browse more results. AnQiCMS providespaginationtags, which can intelligently identify according toarchiveListThe tag returns pagination data, automatically generating complete page navigation.

paginationThe tag usually returns one.pagesAn object that contains the home page, previous page, next page, last page, and an array of middle page numbers. You can use this information to flexibly build pagination links.

showThe parameter allows us to control the number of page numbers displayed in the middle page number area. For example,show="5"it will display 5 page numbers around the current page to help users quickly locate. By traversingpages.Pagesthe array, combineditem.IsCurrentProperty, can highlight the current page number to provide a clear navigation experience.

Here is a typical code example of pagination navigation.

<div>
    {% pagination pages with show="5" %}
    <ul>
        <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {% if pages.PrevPage %}
            <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
        {% endif %}
        {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {% if pages.NextPage %}
            <li class="page-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
    </ul>
    {% endpagination %}
</div>

By following these steps, your AnQiCMS website can have a complete and user-friendly search result pagination display function. This not only improves the browsing experience of users on the website but also helps search engines