How to navigate to adjacent documents using `prevArchive` and `nextArchive` tags on the article detail page?

In today's content-driven era, the user experience of website article detail pages is particularly important.When readers are immersed in an exciting piece of content, if they can smoothly navigate to related or adjacent articles, it not only extends their time on the website, boosts page views, but also indirectly optimizes the crawling and ranking of search engines through the internal link structure.AutoCMS is an efficient and SEO-friendly content management system that takes these details into account and provides simple and intuitive template tags to help us easily achieve this function.

today, let's take a deep dive into how to cleverly use the built-inprevArchiveandnextArchiveTags, providing seamless previous and next document navigation experience for your readers.

The importance of adjacent document navigation

Imagine that when you finish reading an interesting article and cannot find the next recommended content, you might directly close the page.If the page bottom has clear "Previous" and "Next" links that guide you to continue exploring, you are likely to click, thus discovering more interesting content.This design not only improves user mobility within the website and reduces the bounce rate, but more importantly, it provides clear internal link paths for search engine spiders, which helps them better understand the website structure and is highly beneficial for SEO optimization.The security CMS is based on such thinking, providing these two powerful template tags.

KnowprevArchiveandnextArchivetags

The template system of Anqi CMS adopts syntax similar to Django template engine, which is concise and powerful.prevArchiveandnextArchiveThis is a built-in template tag specifically used for article detail pages, which is used to obtain the data of the adjacent documents of the "previous" and "next" documents of the current document.These tags are intelligent, they will automatically determine the previous and next articles based on the sorting of the current article within the category, without the need for us to manually pass any article ID or category information.

Basic syntax structure:

The template tags of Anqi CMS are usually:{%Start, with%}End, while variables use{{and}}Package.prevArchiveandnextArchiveA functional tag requires an end tag.{% endprevArchive %}and{% endnextArchive %}To define its scope of action.

{# 获取上一篇文档 #}
{% prevArchive 变量名 %}
    {# 在这里处理上一篇文档的数据 #}
{% endprevArchive %}

{# 获取下一篇文档 #}
{% nextArchive 变量名 %}
    {# 在这里处理下一篇文档的数据 #}
{% endnextArchive %}

Usually, we will 变量名setprevandnextTo clearly identify the documents they represent.

How to use them in the article detail page?

To be used in the article detail page (usually)detail.htmlor add a custom article detail template) and add the previous/next navigation, simply insert these tags at the position where you want to display the navigation, such as at the bottom of the article content.

The simplest navigation implementation: only show titles and links

The basic navigation usually only includes article titles and links to the articles.Please note that not all articles have a previous or next article (for example, the first article in a category does not have a previous article, and the last article does not have a next article).ifUse logical judgment to handle these edge cases, avoiding empty links or unnecessary placeholders on the page.

<div class="article-pagination">
    <div class="prev-article">
        {% prevArchive prev %}
            {% if prev %}
                上一篇：<a href="{{ prev.Link }}" title="{{ prev.Title }}">{{ prev.Title }}</a>
            {% else %}
                <span>没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article">
        {% nextArchive next %}
            {% if next %}
                下一篇：<a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
            {% else %}
                <span>没有下一篇了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

In this code block:

  • We use separatelyprevArchiveandnextArchiveLabel to get adjacent documents.
  • prevandnextIs the variable we define for these document data.
  • {% if prev %}and{% if next %}Ensure that the link will be rendered only when there are adjacent documents.
  • {{ prev.Link }}and{{ next.Link }}Used to output the URL of the document.
  • {{ prev.Title }}and{{ next.Title }}Used to output the document title.

Enhance user experience: Add thumbnails and descriptions

To make navigation more intuitive and attractive, you can further utilizeprevArchiveandnextArchiveTags provide other fields, such as document thumbnails (Thumb) and brief descriptions (Description).

Here is a navigation example that includes thumbnails and titles:

<div class="article-pagination-enhanced">
    <div class="prev-article-item">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
                    {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />{% endif %}
                    <span>上一篇：{{ prev.Title }}</span>
                    {% if prev.Description %}<p>{{ prev.Description|truncatechars:50 }}</p>{% endif %}
                </a>
            {% else %}
                <span class="no-article">没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-article-item">
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
                    {% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" />{% endif %}
                    <span>下一篇：{{ next.Title }}</span>
                    {% if next.Description %}<p>{{ next.Description|truncatechars:50 }}</p>{% endif %}
                </a>
            {% else %}
                <span class="no-article">没有下一篇了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

In this enhanced example, we added:

  • {% if prev.Thumb %}and{% if next.Thumb %}To determine if there is a thumbnail and display{{ prev.Thumb }}or{{ next.Thumb }}.
  • {% if prev.Description %}and{% if next.Description %}To display the document description and usetruncatechars:50The filter truncates it to the first 50 characters to maintain formatting.

prevArchiveandnextArchiveLabel supports a very rich set of fields, including:Id(Document ID)Title(Title),Link(Link),Keywords(Keywords),Description(Description),CategoryId(Category ID),Views(Views),Logo(Cover first image),Thumb(Cover thumbnail),CommentCount(Comments),CreatedTime[Publish time],UpdatedTime(Update time) etc. You can freely select and combine these fields according to your template design requirements.

Summary

Anqi CMS'sprevArchiveandnextArchiveTags provide extremely convenient tools for website content operations, allowing you to implement professional-level adjacent document navigation functionality on article detail pages without writing complex code.This not only can significantly improve the user's browsing experience and reduce the website bounce rate, but also can effectively optimize the internal link structure, helping your website perform better in search engines.

Make good use of these tags,