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

AnQiCMS template basic review

The AnQiCMS template system is simple and efficient, using syntax similar to Django, allowing developers to build pages intuitively. All template files are usually written in.htmlsuffix and stored in/templateIn the corresponding subject folder{模型table}/detail.htmlFor example, the detail page of the article model might bearticle/detail.htmlIn these template files, we use double curly braces{{变量}}Output variable content, using single curly braces and percent signs{% 标签 %}Use built-in template tags for logical control and data calling

Call the title and link of the previous article

To display the title and link of the previous article on the article detail page, AnQiCMS provides a specialprevArchiveThe 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 the category or global list.

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

Here 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 will be 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, then there is no 'previous one', at this timeprevThe variable will be empty. Through this judgment, we can avoid page errors and display friendly prompts such as 'There is no previous article'.
  • {{ prev.Link }}Displays the URL link of the previous article.
  • {{ prev.Title }}Displays the title of the previous article.

Calls the title and link of the next article.

Similar to the calling method of the previous article, AnQiCMS also provides exclusive for the next articlenextArchiveThe working method of this tag is similar toprevArchiveThe same, it will also automatically find the next article's data according to the order of the current article.

You can usenextArchiveThe result of the tag is assigned to a variable, for examplenextThen operate likeprevThe variable is the same, accessing the title and link of the next article.

Here is the example code to call the next article.

{% 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's logic is exactly the same as that of the previous article, only the variable names have been changed fromprevtonext, and the link and title both point to the next article.{% if next %}It is used to determine if the next article exists, to handle the case at the end of the list.

Complete code example

Integrate the navigation of the previous and next articles to the bottom of the article detail page, which usually makes the page layout more reasonable and better guides users. Here is a complete example showing how to do it in yourdetail.htmlThese tags are used in the template:

{# 假设这是您的文章详情内容区域结束之后 #}
<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样式，以美化显示效果。 #}

By making such settings, your AnQiCMS website article detail page will have a convenient navigation function 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.

Frequently Asked Questions (FAQ)

  1. Why sometimes the 'Previous' or 'Next' links do not display 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 article';If it is the last one, there is no 'next one'. In the above code example, we use{% if prev %}and{% if next %}This condition judgment is used to handle this situation, when there is no corresponding article, it will display a prompt such as 'There is no previous article' or 'There is no next article' instead of a link.

  2. Can I also call other information from the previous/next article, in addition to the title and link?Of course you can.prevArchiveandnextArchiveThe variable returned by the tag (for exampleprevandnext) contains multiple article data, such asId(article ID),Description(article description),Thumb(thumbnail),Views(Views),CreatedTime(publish time) etc. You can use the template as needed by means of{{ prev.Thumb }}or{{ next.Description }}In order to call this information, further enrich the navigation display content, for example, displaying thumbnails or brief descriptions.

  3. How is the sorting logic for the previous and next articles? Can I customize it?AnQiCMS'prevArchiveandnextArchiveThe tag is usually determined by the order of the article's publication (usually by ID or publication time).This means they will automatically handle most of the cases. If your website has more complex sorting logic requirements (such as by page views, weight, etc.), and you want the 'Previous/Next' navigation to follow this logic, thenprevArchiveandnextArchiveIt may not be directly satisfied. In this case, you may need to combinearchiveListTag for more advanced custom queries, by specifyingorderParameters and manually calculate the current article's index to simulate the "previous/next" logic, but this is relatively complex. For most websites, the default order is sufficient.