How to use the `prevArchive` and `nextArchive` tags to navigate to adjacent documents in the article detail page?

In today's content-driven era, the user experience of a website's article detail page is particularly important.When the reader is immersed in an excellent article, if they can navigate smoothly to related or adjacent articles, not only can it extend their stay on the website and increase the page views, but it can also indirectly optimize the search engine crawling and ranking through the internal link structure.AnQi CMS is an efficient and SEO-friendly content management system that fully considers these details and provides simple and intuitive template tags to help us easily achieve this function.

Today, we will delve into how to cleverly utilize the built-in features in the Anqi CMS article detail page.prevArchiveandnextArchiveTags, providing seamless navigation to the previous and next document for your readers.

The importance of adjacent document navigation.

Imagine you've finished reading an interesting article and can't find the next recommended content, you might just close the page.If the bottom of the page has clear 'Previous' and 'Next' links, guiding you to continue exploring, you are likely to click and thus discover more interesting content.This design not only improves the fluidity of users within the website and reduces the bounce rate, but more importantly, it provides clear internal link paths for search engine spiders, which helps to better understand the website structure and is very beneficial for SEO optimization.Aanqi CMS is based on such thinking and provides these two powerful template tags.

Get to knowprevArchiveandnextArchiveTag

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

Basic syntax structure:

Anqi CMS template tags usually start with{%and ends with%}end, while variables are used.{{and}}.prevArchiveandnextArchiveAs a functional tag, an end tag is needed{% endprevArchive %}and{% endnextArchive %}to define its scope

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

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

Generally, we will变量名is set toprevandnextso that they can be clearly identified as representing the document

How to use them on the article detail page?

To be on the article detail page (usuallydetail.htmlOr customize the article detail template) add the previous/next navigation, simply insert these tags into the position where you want to display the navigation, such as the bottom of the article content.

The simplest navigation implementation: only display titles and links

The basic navigation usually only contains article titles and links to the articles.But please note that not all articles have a previous or next one (for example, the first article in a category does not have a previous one, and the last article does not have a next one).Therefore, we strongly recommend coordinating when using these tagsifUse logical judgments to handle these edge cases, to avoid displaying 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 separatelyprevArchiveandnextArchiveTag 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 document URL.
• {{ 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 utilizeprevArchiveandnextArchiveOther fields provided by the tag, such as document thumbnail (Thumb) and brief descriptionDescription)

Here is a navigation example that includes a thumbnail and a title:

<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.

prevArchiveandnextArchiveThe tags support a very rich set of fields, including:Id(document ID),Title(Title),Link(Link),Keywords(Keyword),Description(Description),CategoryId(Category ID),Views(Views),Logo(Cover main image),Thumb(Cover thumbnail),CommentCount(Number of comments),CreatedTime(Published time),UpdatedTime(Updated time) et al. You can freely choose and combine these fields according to the template design requirements.

Summary

Of Security CMSprevArchiveandnextArchiveThe tag provides an extremely convenient tool for website content operation, allowing you to implement professional-level adjacent document navigation functions on the article detail page without writing complex code.This can not only significantly improve the user's browsing experience and reduce the website bounce rate, but also effectively optimize the internal link structure, helping your website perform better in search engines.

Make good use of these tags,