How to display the title and link of the previous and next articles on the article detail page?

In website operation, the 'Previous' and 'Next' navigation function on the article detail page not only effectively improves the user's reading experience and guides them to continue browsing more content, but also has a positive impact on the website's SEO performance by building internal links.For AnQiCMS users, implementing this feature is simple and efficient.

AnQiCMS provides a直观and powerful template tag system, making it easy to display the title and link of the previous and next articles on the article detail page.You do not need to perform complex programming or database queries, just add the corresponding tags in the template file.

How to implement the previous/next navigation in AnQiCMS

AnQiCMS provides two special template tags for this:prevArchiveand the previous document"),nextArchive(The next document). The cleverness of these tags lies in their ability to intelligently identify adjacent articles based on the context of the current article, without the need to manually pass complex parameters, greatly simplifying the development and maintenance workload.

When you are using the article detail pageprevArchiveWhen the tag is used, it will automatically try to get information about the previous article of the current article; similarly,nextArchiveThe tag will retrieve the next article. If there is no previous or next article (for example, if the current article is the first or last in the category), these tags will return empty values, allowing us to flexibly handle this situation in the template, for example, by displaying a friendly prompt.

Add navigation code in the template

Generally, we would add the template code for the article detail page (for example, depending on your content model, it might bearticle/detail.htmlorproduct/detail.htmlAdd the following code snippet to the bottom of the content area or any location where you want to display navigation.

First, let's take a look at the simplest implementation, which will display the title and link of the previous and next articles:

<div class="article-navigation">
    {# 上一篇文档 #}
    <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>

Code explanation:

• {% prevArchive prev %}This tag is used to get the data of the previous article. Here we will assign the data obtained to a variable namedprevThe variable. You can choose other variable names to your liking, but make sure to keep them consistent in subsequent code.
• {% if prev %}: This is a conditional judgment statement. It checksprevDoes the variable have a value. If there is a value (i.e., there is an article from the previous one), then executeifThe code inside the statement block.
• <a href="{{prev.Link}}" title="{{prev.Title}}">上一篇：{{prev.Title}}</a>This line of code creates a hyperlink.{{prev.Link}}It will output the URL of the previous article, and{{prev.Title}}it will display the title.
• {% else %}If:prevIf the variable is empty (i.e., there is no previous article), then executeelseCode within the block, which shows “No previous article.”
• {% endprevArchive %}and{% endif %}: are used to endprevArchiveTags andifConditional judgment.
• nextArchiveThe way of using tags andprevArchiveExactly the same, but it processes the data of the next article and assigns it tonextVariable.

By this concise code, you can easily add navigation to the previous and next articles at the bottom of the article detail page.To enhance the user experience, it is recommended that you add appropriate CSS styles to the navigation of the previous/next article, making it more prominent and easy to click on the page.

Further customization and optimization

Provided by AnQiCMSprevArchiveandnextArchiveTags are not limited to displaying titles and links. They also support outputting other fields, making your navigation more rich and attractive.For example, you can display the thumbnail, publish time, and other information of the article.

• Show thumbnail:If you want to display the thumbnail of the article in the navigation, you can consider in<a>in the tag.<img src="{{prev.Thumb}}" alt="{{prev.Title}}">as long as your article has set the thumbnail in the background.
• Display the publish time:You can use{{stampToDate(prev.CreatedTime, "2006-01-02")}}Show the publication date of the previous article to make it more specific.
• Handle articles without adjacent articles:When there is no previous or next article, as shown in the example, display a friendly prompt message (such as "No previous article"), avoid blank pages or error display, and improve user experience.

By these flexible tags, you can freely customize the navigation style and content of the previous and next articles according to the overall design and content display requirements of the website.

Summary

In AnQiCMS, adding navigation functions for the previous and next articles on the article detail page is a simple and effective strategy to enhance user experience and website SEO. By utilizingprevArchiveandnextArchiveThese template tags allow you to build beautiful and practical content navigation with great efficiency, allowing your readers to navigate the website effortlessly.

Frequently Asked Questions (FAQ)

Q1: Why do some article detail pages show 'No previous article' or 'No next article'?

A1:This usually has several cases. First, if the current article is the first article in the category of your website, then there is no previous article content;On the contrary, if it is the last one, there is no 'next one'.Secondly, these navigation tags of AnQiCMS are sorted according to the publication time or ID of the articles. If adjacent articles are deleted, or the publication order is 'discontinuous', it may also cause the display of 'nothing'.

Q2: Can I customize the display order of the previous/next article, such as sorting by views?

A2: prevArchiveandnextArchiveThe tag itself mainly works based on the direct adjacent relationship of the current article in the time or ID sequence, without built-in parameters to directly change the sorting logic (such as by views). If you need a more complex sorting logic to get the previous or next recommended article, you may need to consider usingarchiveListLabel, combining the current article ID and category ID, get a list sorted according to specific rules, and then manually select adjacent articles. This will be more than using directlyprevArchiveandnextArchiveMore complex, usually the default order is sufficient in most cases.

Q3: Besides the title and link, can I display other information in the navigation of the previous/next article?

A3:Of course you can.prevandnextThe variable (defined in the template) is a complete article object, you can access its multiple fields, such as:

• {{prev.Thumb}}: Display the thumbnail of the previous article.
• {{stampToDate(prev.CreatedTime, "2006-01-02")}}: Display the publication date of the previous article.
• {{prev.Description}}: Display a brief description of the previous article. You just need to in<a>Labels or other HTML elements, introduce these fields according to your design requirements.