How to display the link to the previous and next article on the article detail page in AnQiCMS template?

In AnQiCMS, adding 'Previous Article' and 'Next Article' navigation links to the article detail page is a key factor in improving user experience and guiding users to delve deeper into the website content.The powerful template system of AnQiCMS makes this feature very intuitive and efficient, it adopts syntax similar to the Django template engine, allowing developers to easily handle it.

AnQiCMS template files are usually named with.htmlStored as a suffix,/templateUnder the directory. In these template files, we can call and display data using specific tags. Logical control (such as conditional judgment, loop) uses{% ... %}tags, and variable output is used.{{ ... }}Double curly braces. Understanding these basics, we can better utilize the tags provided by AnQiCMS to achieve the desired functions.

Core Tag Introduction:prevArchiveandnextArchive

To display the links to the previous and next articles on the article detail page, AnQiCMS has specially provided two core tags:prevArchiveandnextArchiveThe function of these is to get the data of the previous and next articles of the current article.These tags do not require additional parameters when used, the system will automatically find the adjacent articles in the database based on the article being viewed.

prevArchiveThe tag will assign the data of the previous article to a specified variable, for exampleprev），whilenextArchiveThe tag will assign the data of the next article to another specified variable, for examplenextThese variables contain rich article information, commonly used fields include:

• Id: The unique ID of the article
• Title: Article title
• Link: Article detail page link
• Description: Article Summary
• Thumb: Article Thumbnail
• CreatedTime: The article publication time (timestamp format, which needs to be配合stampToDateTag Formatting)
• Views: Article views

Actual operation: Add link to article details page

Add links to the previous and next articles in the template of the article detail page, you usually find a suitable position below the article content. Assuming your article detail page template isarticle/detail.htmlOr a similar path, you can follow the following steps:

1. Basic link implementation

First, you need to useprevArchiveandnextArchiveLabel to get adjacent article data and determine if it exists. If it exists, display the link; if not, you can display a prompt message.

<div class="article-pagination">
    <div class="prev-article">
        {%- prevArchive prev %} {# 获取上一篇文章数据，赋值给变量prev #}
            {%- if prev %} {# 判断是否存在上一篇文章 #}
                <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
            {%- else %}
                <span class="no-link">没有上一篇文章了</span>
            {%- endif %}
        {%- endprevArchive %}
    </div>
    <div class="next-article">
        {%- nextArchive next %} {# 获取下一篇文章数据，赋值给变量next #}
            {%- if next %} {# 判断是否存在下一篇文章 #}
                <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">下一篇：{{ next.Title }}</a>
            {%- else %}
                <span class="no-link">没有下一篇文章了</span>
            {%- endif %}
        {%- endnextArchive %}
    </div>
</div>

We used here{%- ... %}syntax, among which the-The symbol is used to remove the whitespace that may be generated by the tag line itself, making the final rendered HTML cleaner.

2. Enrich the display content of links (optional)

In addition to the title, you can also add thumbnails or article summaries to the link as needed to make navigation more intuitive. For example, you can add a thumbnail and a summarized excerpt to the link:

<div class="article-pagination">
    <div class="prev-article">
        {%- prevArchive prev %}
            {%- if prev %}
                <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}" class="pagination-link">
                    {%- if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="pagination-thumb" />{%- endif %}
                    <div class="link-content">
                        <span class="link-label">上一篇</span>
                        <h4 class="link-title">{{ prev.Title }}</h4>
                        {%- if prev.Description %}<p class="link-desc">{{ prev.Description|truncatechars:50 }}</p>{%- endif %}
                    </div>
                </a>
            {%- else %}
                <span class="no-link">没有上一篇文章了</span>
            {%- endif %}
        {%- endprevArchive %}
    </div>
    <div class="next-article">
        {%- nextArchive next %}
            {%- if next %}
                <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}" class="pagination-link">
                    <div class="link-content">
                        <span class="link-label">下一篇</span>
                        <h4 class="link-title">{{ next.Title }}</h4>
                        {%- if next.Description %}<p class="link-desc">{{ next.Description|truncatechars:50 }}</p>{%- endif %}
                    </div>
                    {%- if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="pagination-thumb" />{%- endif %}
                </a>
            {%- else %}
                <span class="no-link">没有下一篇文章了</span>
            {%- endif %}
        {%- endnextArchive %}
    </div>
</div>

In this example, we addedprev.Thumb