As an experienced website operations expert, in my practice with AnQiCMS, I deeply understand that the flexible application of template tags is the key to improving website user experience and SEO performance. Today, let's delve into a seemingly simple but highly practical tag -prevArchiveas well as its most suitable placement in template development.

UnderstandingprevArchivethe core role

In AnQiCMS,archiverefers to various types of content, whether articles, products, cases, or other custom model content.prevArchiveBy definition, it is used to obtain the information of the 'previous' document of the current document.Its existence aims to provide users with a convenient navigation method, allowing them to easily jump to the previous article in the same series or chronological order after reading the current content.

The importance of this feature is self-evident:

  • Improve user experience:Users can continue to browse related content without returning to the list page, reducing the number of steps and making the content consumption process more smooth.
  • Optimize on-site SEO: prevArchiveand the corresponding:nextArchiveTags collectively build the internal link structure of a website. These links help search engine spiders delve deeper and more comprehensively into the website content, improving the inclusion rate and weight transmission of the pages.A good internal link structure is an indispensable part of SEO.
  • Increase the page stay time:Guide users to continuously browse multiple articles, which will naturally increase their time spent on the website and convey positive user signals to search engines.

prevArchiveConsider the **position** of tags on the page.

When we talk aboutprevArchiveThe placement of labels needs to be considered from two perspectives: user behavior path and content consumption habits. Usually, the most natural and most in line with the reading habits of users is the main content area of the current document (article or product detail page)Below.

To be specific, I suggest placing it in:

  1. Below the main content area of the document, adjacent to the related content recommendation area or comment section before:When a user finishes reading a document, they may have two needs: one is to delve deeper into the related topic, and the other is to continue browsing other content on the website.prevArchiveandnextArchiveThe tag meets the second requirement, seamlessly guiding users to discover the next or previous content.Place them below the main content to ensure that users notice these navigation options first after completing the core reading task.

    • Advantages are reflected:This position can guide users to browse the website content linearly, especially suitable for blogs, news reports, or tutorial series and other content.After the user finishes reading the current content, their gaze will naturally move downwards. At this point, providing "Previous/Next" navigation can effectively extend the user's stay on the website.At the same time, it also lays a good foundation for the recommendation of subsequent related content or comments section, forming a logically clear page flow.

  2. Implement specifically, it is recommended to present withnextArchivetags:The user experience is incomplete with only the 'Previous' navigation.Generally, 'Previous' and 'Next' appear as a navigation group.They are often in the form of

    The following is a simplified example of an AnQiCMS template that shows this placement:

    <div class="archive-content">
    <!-- 这里是当前文档的详细内容，比如文章正文、产品描述等 -->
    {% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}{% endarchiveDetail %}
</div>

<div class="archive-navigation">
    {% prevArchive prev %}
    {% if prev %}
    <a href="{{ prev.Link }}" class="prev-link">
        &laquo; 上一篇：{{ prev.Title }}
    </a>
    {% else %}
    <span class="prev-none">&laquo; 没有了</span>
    {% endif %}
    {% endprevArchive %}

    {% nextArchive next %}
    {% if next %}
    <a href="{{ next.Link }}" class="next-link">
        下一篇：{{ next.Title }} &raquo;
    </a>
    {% else %}
    <span class="next-none">没有了 &raquo;</span>
    {% endif %}
    {% endnextArchive %}
</div>

<div class="related-articles">
    <!-- 这里放置相关文章推荐列表 -->
    <h3>相关推荐</h3>
    {% archiveList archiveRelations with type="related" limit="5" %}
        {% for item in archiveRelations %}
            <p><a href="{{ item.Link }}">{{ item.Title }}</a></p>
        {% endfor %}
    {% endarchiveList %}
</div>

<div class="comment-section">
    <!-- 这里放置评论区 -->
    <h3>用户评论</h3>
    <!-- ... 评论表单和评论列表 ... -->
</div>

    In this example,archive-navigationThe block is locatedarchive-contentafter,related-articlesandcomment-sectionPreviously, this conforms to our recommended **practice. By using simple CSS styles, it can float to the left or stack on mobile devices to adapt to different devices.

Further thinking on improving user experience

  • Visual guidance:In addition to plain text links, consider adding thumbnails to the "Previous/Next" links ({{ prev.Thumb }}or{{ next.Thumb }}), to provide users with more intuitive visual cues to help them quickly identify the content.
  • Responsive design:Ensure that this navigation block displays well on different screen sizes.On mobile devices, it may be necessary to adjust the links that are aligned side by side to be stacked vertically, and provide sufficient click areas.
  • Prompt when there is no content:As shown in the above example, use{% if prev %}Determine if there is a previous/next article content, and display a prompt such as 'None' or 'It is the first/last article' when there is none, to avoid blank pages or incorrect link pointing.

In summary,prevArchiveandnextArchiveLabels are the details that should not be overlooked in AnQiCMS template development.By placing it logically below the main content of the document and combining it with good design, it can greatly enhance the user experience and SEO benefits of the website.

Frequently Asked Questions (FAQ)

1. If there is no previous document,prevArchiveWhat will the tag display? How should I handle this situation?

When there is no previous document (for example, the current document is the first in the series or the earliest published document on the entire site),prevArchiveThe content enclosed in tags will not be rendered. To provide a good user experience, we usually use it in templates.{% if prev %}Such conditional judgments to check.prevDoes the variable exist. If it does not exist, you can display a prompt like 'None' or 'It is the first one' instead of leaving it blank or showing an error.

2.prevArchiveandnextArchiveIs the document strictly categorized? For example, I only want to navigate to the 'previous/next article' within the same category.

By default,prevArchiveandnextArchiveusually based on the publication time order or ID order of the entire site.This means they will try to find the previous/next content adjacent to the current document, not necessarily limited to the same category.If you need to implement a strict "navigation within the same category", AnQiCMS may need to combinearchiveListThe tag performs more complex custom logic, or can be achieved through custom development.However, for most websites, the full-site previous/next navigation is already able to meet the basic user browsing needs.

3.prevArchiveandnextArchiveCan the tag be used on other pages, such as the homepage or list page?

No.prevArchiveandnextArchiveThe tag is designed forDocument detail pageThey operate based on the single document currently displayed to find the documents in the order before and after it.On the home page or list page, since there is no 'current document' context, these tags cannot retrieve data correctly, and therefore they are invalid on these pages.