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 reading experience of users 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, this feature is both simple and efficient.

AnQiCMS provides a straightforward and powerful template tag system, making it effortless 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 introduce the corresponding tags in the template file.

How to implement the previous/next navigation in AnQiCMS?

AnQiCMS provides two special template tags for this:prevArchive(Previous document) andnextArchive(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 for us to manually pass complex parameters, greatly simplifying the development and maintenance workload.

When you use the tag in the article detail page:prevArchiveIt will automatically try to get the information of the previous article of the current article; similarly,nextArchiveTags will get 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 an empty value, allowing us to handle this situation flexibly in the template, for example, by displaying a friendly prompt.

Add navigation code in the template

Generally, we will add navigation code in the template file of the article detail page (for example, it may be based on your content model,article/detail.htmlorproduct/detail.htmlThe content area at the bottom, or any location where you want to display navigation, add the following code snippet.

Let's take a look at the most basic 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. We will assign the data obtained here to a variable namedprevThe variable. You can choose other variable names according to your preference, but make sure to keep consistent in the subsequent code.
  • {% if prev %}: This is a conditional judgment statement. It checksprevVariable has a value. If it has a value (i.e., there is an article before this one), then executeifCode 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.{{prev.Title}}It will display the title.
  • {% else %}IfprevIf the variable is empty (i.e., there is no previous article), it will execute.elseStatement block code, here displayed is “No previous article”.
  • {% endprevArchive %}and{% endif %}: Used to endprevArchiveTags andifcondition judgment.
  • nextArchiveThe usage method of the tag isprevArchiveExactly the same, just that it processes the data of the next article and assigns itnexta variable.

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

Further customization and optimization

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

  • Display thumbnails:If you wish to display a thumbnail of the article in navigation, consider doing so in<a>Add content inside the tag.<img src="{{prev.Thumb}}" alt="{{prev.Title}}">, provided that your article has a thumbnail set in the background.
  • Displaying 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"), to avoid leaving blank pages or displaying errors, and enhance the user experience.

Through 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 needs 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 enable you to build beautiful and practical content navigation with great efficiency, allowing your readers to navigate the website smoothly.

Common Questions (FAQ)

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

A1:This usually has several cases.If the current article is the first article in the category on your website, then it does not have 'Previous Article' content; conversely, if it is the last one, there is no 'Next Article'.其次，AnQiCMS的这些导航标签会根据文章的发布时间或ID进行排序，如果相邻的文章被删除，或者发布顺序“不连续”，也可能导致显示“没有了”。

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

A2: prevArchiveandnextArchiveThe tag primarily 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 view count). If you need a more complex sorting logic to get the previous/next 'recommended' article, you may need to consider usingarchiveListTags, combine the current article's ID and category ID to get a list sorted by a specific rule, and then manually select adjacent articles. But this will be more complicated than usingprevArchiveandnextArchiveComplex, usually the default order is enough in most cases.

Q3: Can I display other information in the navigation of the previous/next article, in addition to the title and link?

A3:Of course you can.prevandnextThe variable (defined in the template) is a complete article object, you can access 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 only need to in<a>In tags or HTML elements, you can introduce these fields according to your design requirements.