How to implement the previous/next document function using `prevArchive` and `nextArchive` tags?

When you operate a website, providing users with a smooth reading experience is one of the key factors in enhancing website stickiness.If a user finishes reading a document and can easily jump to the previous or next related one, it will undoubtedly greatly increase their stay time on your website.prevArchiveandnextArchiveLabel, helps you easily achieve this function.

Enable seamless navigation between documents.

The "Previous/Next" feature of the document is not just a simple content link, it is also a reflection of the content organization logic of your website, which is crucial for user experience and Search Engine Optimization (SEO).

From the perspective of user experience, continuous reading can effectively guide users to explore more content, reducing their likelihood of leaving the website.Imagine when a user is immersed in a series of tutorial articles, a clear 'Next' button allows them to continue learning effortlessly.

From an SEO perspective, this internal link structure can help search engine spiders better crawl and understand the relevance of your website's content, pass page authority, and possibly improve the ranking of related documents in search results.

Get to knowprevArchiveandnextArchiveTag

Of Security CMSprevArchiveandnextArchiveThe tag is designed very simply and efficiently.They are used to automatically retrieve the data of the previous and next documents of the current document.The best thing is that they do not require any additional parameters, the system will intelligently judge and obtain adjacent documents based on the context of the current document.

This means that you do not need to manually specify any ID or category information, just introduce these two tags in the template, and they will automatically complete the cumbersome search work.This greatly reduces the difficulty of template development, allowing you to focus more on content presentation.

How to implement the previous/next article feature in the template

Usually, you will be in the document detail page (such as, in the directory of your template){模型table}/detail.htmlBottom, which is after the main content, and add the navigation for 'Previous/Next articles.'

The following are the typical steps to implement this function:

  1. Introduce tags: You need to useprevArchiveandnextArchiveLabel to enclose the content you want to display.

    {% prevArchive prev %}
    {# 这里放置上一篇文档的显示逻辑 #}
{% endprevArchive %}


{% nextArchive next %}
    {# 这里放置下一篇文档的显示逻辑 #}
{% endnextArchive %}

  2. Conditional judgmentDue to the fact that the current document may be the first or last document in a series, there may not necessarily be a previous or next document, therefore, conditional judgment is used{% if prev %}and{% if next %}It is crucial to avoid displaying empty links.

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


    <div class="next-archive">
        {% nextArchive next %}
            {% if next %}
                <a href="{{next.Link}}" title="{{next.Title}}">
                    <span class="nav-label">下一篇：</span>
                    <span class="nav-title">{{next.Title}}</span>
                </a>
            {% else %}
                <span class="nav-label">没有下一篇了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

  3. Retrieve and display document informationIn{% if prev %}and{% if next %}Within the conditional block, you can accessprevandnextProperties of the variable, such as the document titleTitle, linksLink、ThumbnailThumbetc.

    • {{prev.Title}}or{{next.Title}}: Display the title of the previous/next document.
    • {{prev.Link}}or{{next.Link}}: Generate a link to the previous/next document.
    • {{prev.Thumb}}or{{next.Thumb}}: If you need to display a thumbnail, you can get the image URL.
    • {{stampToDate(prev.CreatedTime, "2006-01-02")}}Format the document's publication time.

    Here is a more complete example showing how to create navigation by combining text and thumbnails.

    <div class="archive-navigation d-flex justify-content-between">
    <div class="prev-archive">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{prev.Link}}" title="{{prev.Title}}" class="d-flex align-items-center">
                    {% if prev.Thumb %}
                        <img src="{{prev.Thumb}}" alt="{{prev.Title}}" class="thumbnail me-2">
                    {% endif %}
                    <div>
                        <small>上一篇</small>
                        <div class="title-ellipsis">{{prev.Title}}</div>
                    </div>
                </a>
            {% else %}
                <span class="text-muted">没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>


    <div class="next-archive text-end">
        {% nextArchive next %}
            {% if next %}
                <a href="{{next.Link}}" title="{{next.Title}}" class="d-flex align-items-center justify-content-end">
                    <div>
                        <small>下一篇</small>
                        <div class="title-ellipsis">{{next.Title}}</div>
                    </div>
                    {% if next.Thumb %}
                        <img src="{{next.Thumb}}" alt="{{next.Title}}" class="thumbnail ms-2">
                    {% endif %}
                </a>
            {% else %}
                <span class="text-muted">没有下一篇了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

    In this example, we added simple CSS classes liked-flex,justify-content-between,align-items-center,me-2,ms-2,text-end,title-ellipsisSimulate a navigation style aligned to the left with thumbnails and title truncation. When applying in actual web design, you can adjust the CSS style according to your own website design.

Available document information field

prevArchiveandnextArchiveThe document data accessible through tags is very rich, including common fields such as:

  • Id: The unique identifier of the document.
  • Title: The document title.
  • Link: The document access link.
  • Description: Document description.
  • CategoryId: ID of document's category.
  • Views: Document's view count.
  • Logo: URL of the document's cover image.
  • Thumb: The URL of the document thumbnail (usually more suitable for navigation).
  • CreatedTime: The timestamp of the document creation.
  • UpdatedTime: Document update timestamp.

Summary

Of Security CMSprevArchiveandnextArchiveThe tag, with its parameterless and intelligent judgment features, greatly simplifies the implementation process of website content navigation.By using a few lines of template code, you can provide users with a smooth and convenient reading jump experience, which not only improves the usability of the website but also benefits the internal link structure and SEO performance of the website.Make good use of these tags to make your website content more cohesive and attractive.

Frequently Asked Questions (FAQ)

1. What will the 'Previous/Next' link display if the current document is the first or last in a series?

When the current document is the first in its category or series,prevArchiveThe label will not find any content at this timeprevThe variable will be empty (nil). Similarly, if the document is the last one,nextArchiveLabels will also be like this. To avoid displaying empty links, we recommend always using{% if prev %}and{% if next %}Make a conditional judgment.When there is no corresponding document, you can choose not to display the link, or as shown in the example, display a prompt such as 'No previous article' or 'No next article' to clearly inform the user.

2. What is the basis for determining 'Previous/Next' articles? Is it sorted by publication time or ID?

prevArchiveandnextArchiveTags are usually based on the publication time of the document (CreatedTime) or sort by document ID, and find adjacent documents within the same category or model.This means that if you publish a series of documents under a category, the tags will find the previous and next document according to the default sorting rules (such as the most recently published one or ID incrementing).They are inferred from the context of the current document, no additional sorting parameters need to be specified.

3. Can you customize the filter conditions for the previous/next article, such as only displaying documents with specific tags?

prevArchiveandnextArchiveLabels are designed to simply and directly obtain adjacent documents, therefore they do not