In AnQiCMS, adding navigation for the previous and next articles on the article detail page is an important step to enhance the user reading experience and optimize the internal link structure of the website.This feature can not only guide readers to continue browsing related content, but also help search engines better understand the structure of the website.AnQiCMS powerful template system provides a very convenient way to meet this requirement.

AnQiCMS Template Basics Review

AnQiCMS's template system is simple and efficient, using syntax similar to Django, allowing developers to build pages intuitively. All template files are usually with.htmlas a suffix, and stored in/templatethe corresponding topic folder under the directory. The template of the article detail page is usually named{模型table}/detail.html, for example, the detail page of the article model might bearticle/detail.htmlIn these template files, we output variable content through double curly braces{{变量}}using single curly braces and the percent sign{% 标签 %}to use built-in template tags for logical control and data retrieval.

Translate the previous article's title and link

AnQiCMS provides a special function to display the title and link of the previous article on the article detail page,prevArchiveThis tag does not require any additional parameters. It will automatically find and return the data of the previous article based on the order of the current article in its category or the global list.

UseprevArchiveWhen labeling, we usually assign its result to a variable, for example,prevThen, we can access various properties of the previous article through this variable, such as the title and link.

Below is an example of calling the previous article in a template:

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

In this code block:

  • {% prevArchive prev %}: means that the data obtained from the previous article is assigned to a variable namedprev.
  • {% if prev %}: is a conditional judgment, checkingprevDoes the variable exist. This is an important step, because if the current article is the first in the list, it does not have a previous one, at this timeprevThe variable will be empty. Through this judgment, we can avoid the page from showing errors and display friendly prompts like 'There is no previous article'.
  • {{ prev.Link }}：Will output the URL link of the previous article.
  • {{ prev.Title }}：Will output the title of the previous article.

Call the title and link of the next article

Similar to the calling method of the previous article, AnQiCMS also provides a dedicated for the next article,nextArchiveThe way this tag works withprevArchiveIt is completely consistent, and it will automatically find the data of the next article based on the order of the current article.

You can setnextArchiveThe result of the tag is assigned to a variable, for examplenextThen, operate like thisprevVariables are the same, access the title and link of the next article.

The following is an example of calling the next article's code:

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

This code logic is exactly the same as the logic in the previous article, just changing the variable name fromprevtonext, and the link and title both point to the next article.{% if next %}Similarly used to determine if the next article exists, to handle the end of the list.

Complete code example

Integrate the navigation of the previous and next articles into the bottom of the article detail page usually makes the page layout more reasonable and better guides the users. Here is a complete example showing how to in yourdetail.htmlTemplate uses these tags:.

{# 假设这是您的文章详情内容区域结束之后 #}
<div class="article-navigation">
    {% prevArchive prev %}
    <div class="prev-article">
        {% if prev %}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                <span class="icon">←</span> 上一篇：{{ prev.Title }}
            </a>
        {% else %}
            <span class="no-entry">← 没有上一篇文章了</span>
        {% endif %}
    </div>
    {% endprevArchive %}

    {% nextArchive next %}
    <div class="next-article">
        {% if next %}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                下一篇：{{ next.Title }} <span class="icon">→</span>
            </a>
        {% else %}
            <span class="no-entry">没有下一篇文章了 →</span>
        {% endif %}
    </div>
    {% endnextArchive %}
</div>

{# 您可能还需要为 .article-navigation, .prev-article, .next-article, .no-entry, .icon 等类添加CSS样式，以美化显示效果。 #}

Through such settings, your AnQiCMS website article detail page has convenient navigation for the previous/next article.The introduction of these tags not only simplifies the template development process, but also provides strong support for building a user-friendly and SEO-optimized content platform.

Common Questions (FAQ)

  1. Why are the 'Previous' or 'Next' links sometimes not displayed on the article detail page?This is usually because the current article is at the beginning or end of its list.If the current article is the first one in the list, there is no 'Previous'; if it is the last one, there is no 'Next'.{% if prev %}and{% if next %}This condition judgment is used to handle this situation, when there is no corresponding article, it will display the prompt 'No previous article' or 'No next article' instead of a link.

  2. Can I also call other information from the previous/next article, besides the title and link?Of course you can.prevArchiveandnextArchiveThe variable returned by the tag (for example)prevandnext) contains multiple article data, such asId(Article ID),Description(article description),Thumb[Thumbnail],Views（Views）、CreatedTime（Publish time）等。You can adjust this according to the needs of the template design, through{{ prev.Thumb }}or{{ next.Description }}etc. to call up this information, further enriching the display content of navigation, for example, displaying thumbnails or brief descriptions.

  3. What is the sorting logic for the previous and next articles? Can I customize it?AnQiCMSprevArchiveandnextArchiveThe tag is usually determined according to the order of the article's release (usually by ID or publication time).This means they will automatically handle most of the cases for you.prevArchiveandnextArchiveIt may not be able to meet the requirements directly. In this case, you may need to combinearchiveListLabel for more advanced custom queries, by specifyingorder参数并手动计算当前文章的索引来模拟“previous/next”的逻辑，但这会相对复杂。对于大多数网站而言，默认的顺序已经足够。