How to display the previous and next article links on the article detail page in AnQiCMS templates?

Adding 'Previous Article' and 'Next Article' navigation links to the article detail page in AnQiCMS is a key factor in enhancing user experience and guiding users to delve deeper into the website's content.AnQiCMS powerful template system makes this feature very intuitive and efficient, adopting syntax similar to Django template engine, allowing developers to easily master it.

AnQiCMS template files are usually named with.htmlStored as a suffix, it is located in/templatethe directory. In these template files, we can call and display data using specific tags. Logical controls (such as conditional judgments, loops) use{% ... %}Tags, while variables output is used.{{ ... }}Understanding these basics, we can better utilize the tags provided by AnQiCMS to achieve the desired functionality.

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:prevArchiveandnextArchive.Their functions are to obtain 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 currently.

prevArchiveTags will assign the data of the previous article to a specified variable (for exampleprev), whilenextArchiveTags 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
• DescriptionArticle summary
• ThumbArticle thumbnail
• CreatedTime: The article release time (timestamp format, requires配合)stampToDateTag formatting)
• ViewsArticle views

Actual Operation: Add Link to Article Detail Page

To add links to the previous and next articles on the article detail page template, 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 steps below:

1. Basic link implementation

First, you need to useprevArchiveandnextArchiveLabel to retrieve data for adjacent articles, and determine if they exist. If they exist, 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>

Here we used{%- ... %}of the syntax, in which the-The symbol is used to remove any whitespace characters that may be generated by the label line itself, making the final rendered HTML cleaner.

2. Richen the link display content (optional)

You can also add a thumbnail or article summary to the link as needed to make navigation more intuitive. For example, you can add an article thumbnail and a summarized summary 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