How to implement 'Previous Article' and 'Next Article' navigation on AnQiCMS article detail page?

How to implement 'Previous Article' and 'Next Article' navigation in AnQiCMS?

AnQiCMS has designed a series of convenient template tags, specifically for retrieving information about adjacent documents on article detail pages. Among them,prevArchiveandnextArchiveThese tags are the core tools to implement 'Previous' and 'Next' navigation.They can intelligently judge the position of the current article within its category or the entire model, and automatically extract the titles and links of adjacent articles, making it convenient for us to display them in the front-end template.

the usage analysis of core tags

Let us separately understand the specific usage and common fields of these two tags:

prevArchiveTag: Get the previous document

This tag is used to get the detailed information of the previous article of the current article.

  • Function: Display a link to the previous related article on the article detail page.
  • Example of usage: 
    
{% prevArchive prev %}
{% if prev %}
  <a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
  <span>没有了</span>
{% endif %}
{% endprevArchive %}
    In the above code,prevArchiveThe tag assigns the data of the previous article toprevthe variable. We use{% if prev %}To determine if the previous article exists. If it exists, you can access it through{{ prev.Link }}to get the article link, through{{ prev.Title }}Get article title.
  • The following fields can be obtained: prevThe variable provides various fields, which can be flexibly called as needed, such as:
    • Id: Article ID
    • Title: Article title
    • LinkArticle link
    • DescriptionArticle summary
    • ThumbArticle thumbnail
    • CreatedTime: Publishing time, etc.

nextArchiveTag: Get the next document

This tag corresponds toprevArchiveSimilar, used to get the detailed information of the next article of the current article.

  • Function: Show the link to the next related article on the article detail page.
  • Example of usage: 
    
{% nextArchive next %}
{% if next %}
  <a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
  <span>没有了</span>
{% endif %}
{% endnextArchive %}
    Here,nextArchiveThe tag assigns the data of the next article tonextVariables. Similarly, condition judgment is used to determine if there is the next article.
  • The following fields can be obtained: nextThe available fields of the variable are withprevThe variable is basically consistent with, includingId/Title/Link/Description/Thumb/CreatedTimeetc.

Integrate navigation in the template: practical example

[en] Usually, we will be in the AnQiCMS article detail page template file (for example,{模型table}/detail.htmlAdd these navigation codes in the bracket. Below is a more complete code example, demonstrating how to merge 'Previous Post' and 'Next Post' navigation, including considerations for thumbnail display and style control.

<div class="article-pagination">
    <div class="prev-article-nav">
        {% prevArchive prev %}
        {% if prev %}
            <a href="{{ prev.Link }}">
                <span class="nav-direction">← 上一篇</span>
                {% if prev.Thumb %}
                    <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb">
                {% endif %}
                <h4 class="nav-title">{{ prev.Title }}</h4>
            </a>
        {% else %}
            <span class="nav-direction">← 上一篇</span>
            <h4 class="nav-title">没有了</h4>
        {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-article-nav">
        {% nextArchive next %}
        {% if next %}
            <a href="{{ next.Link }}">
                <span class="nav-direction">下一篇 →</span>
                {% if next.Thumb %}
                    <img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb">
                {% endif %}
                <h4 class="nav-title">{{ next.Title }}</h4>
            </a>
        {% else %}
            <span class="nav-direction">下一篇 →</span>
            <h4 class="nav-title">没有了</h4>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

By this code, we not only achieved basic text navigation but also added thumbnail display, which can greatly enhance the user's visual experience.Of course, you also need to add the corresponding CSS styles according to your website design to beautify these navigation elements.

Optimize user experience and consider content operation

Implement the "Previous Article" and "Next Article" navigation for articles, which is not just a simple function addition, but also contains important content operation strategies:

  1. Enhance user stickiness:A smooth reading experience makes users more willing to stay on the website, continue browsing along related content, thereby extending the visit time and reducing the bounce rate.
  2. Optimize internal link structure:Each 'Previous' and 'Next' link is a high-quality internal link, which helps search engines better crawl and understand the structure of the website's content, and has a positive effect on the inclusion and ranking of articles.
  3. Content flow automation:For websites with frequent updates, such as news sites, blogs, or product update pages, this automatic navigation ensures that users can always find the latest or oldest related content without manual searching.

These tag features of AnQiCMS are designed to allow content operators to easily build websites that are fully functional and user-friendly, thereby enabling them to focus more on the creation and dissemination of high-quality content.

Common Questions (FAQ)

1. Why does my 'Previous' or 'Next' link show 'None'?

This usually means that the current article is already the first one in its category or the entire content model (for "Previous articleAnQiCMS will determine the adjacency of articles based on the publication time (or ID order, depending on the system default configuration).If the current article indeed does not have any earlier or later articles, it will display "No more."

2. How is the order of the 'Previous' and 'Next' navigation determined?

AnQiCMS usually determines the article's publishing time (CreatedTimeSort by time proximity, displaying documents closer in time first.If there is no clear publication time, it may revert to the order based on the article ID.This means that the latest published articles may appear adjacent in the navigation, making it convenient for users to track updates.

3. Can I customize the content displayed for 'Previous' and 'Next' buttons? For example, besides the title, can it also display an abstract or thumbnail?

Of course you can.prevandnextVariables provide rich fields, such as article title(Title)) link(Link)) thumbnail(Thumb)) even the article summary(Descriptionetc.You can freely combine these fields according to your design needs in the template to display them, such as showing an article thumbnail next to the title, or displaying a brief introduction when hovering over, to enhance the visual appeal and information volume of navigation.