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

In Anqi CMS, implementing the 'Previous' and 'Next' navigation function on the article detail page is a key link in improving user experience and guiding users to delve deeper into the website's content. It also helps optimize the internal link structure of the website and is very beneficial for SEO performance.AnQiCMS has a powerful template system and flexible tag functions, making this operation intuitive and efficient.

How to implement 'Previous' and 'Next' document navigation in AnQiCMS

AnQiCMS has designed a series of convenient template tags, specially used for obtaining information about adjacent documents in article detail pages. Among them,prevArchiveandnextArchiveThese tags are the core tools for implementing 'previous article' and 'next article' navigation.They can intelligently judge the position of the current article in the category it belongs to or in 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 the core tags

Let's understand the specific use and common fields of these two tags:

prevArchiveTag: Get the previous document

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

  • Function:In the article detail page, display a link to the previous related article.
  • 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 will assign the data of the previous article toprevthe variable. We use{% if prev %}To determine if the previous article exists. If it exists, it can be accessed through{{ prev.Link }}Retrieve article link through{{ prev.Title }}Get the article title.
  • Fields that can be obtained: prevThe variable provides multiple fields that can be flexibly called according to the need, for example:
    • Id: Article ID
    • Title: Article title
    • Link: Article link
    • Description: Article Summary
    • Thumb: Article Thumbnail
    • CreatedTime:Publish time, etc.

nextArchiveLabel: Get the next document

This label is similar toprevArchiveIt is used to get the details of the next article of the current article.

  • Function:In the article detail page, display a link to the next related article.
  • 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 tonexta variable. Similarly, use conditional judgment to handle whether there is a next article.
  • Fields that can be obtained: nextVariable fields available withprevVariables are essentially consistent, includingId/Title/Link/Description/Thumb/CreatedTimeetc.

Integrate navigation in the template: practical examples

Generally, we will be in the AnQiCMS article detail page template file (such as{模型table}/detail.html）Add these navigation codes. Below is a more complete code example showing how to merge 'Previous' and 'Next' 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 to beautify these navigation elements according to your website design.

Optimize user experience and content operation considerations

Implement the "Previous" and "Next" navigation of articles, not just a simple addition of features, 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 content structure of the website, and has a positive effect on the inclusion and ranking of articles.
  3. Content flow automation:For websites that are updated frequently, 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 manually searching.

These tag features of AnQiCMS are exactly to enable content operators to easily build a feature-rich, user-friendly website, so that they can focus more on creating and spreading high-quality content.

Frequently Asked 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" it means the first one, and for "next" it means the last one).AnQiCMS will determine the adjacent relationship of articles based on the publication time (or ID sequence, depending on the system default configuration).If the current article does not have any earlier or later articles, it will display "none."

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

AnQiCMS usually determines the publication time of articles based on (CreatedTimeSort by time proximity first, showing the documents closer in time.If there is no explicit 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" articles? For example, besides the title, can I also display a summary or thumbnail?

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