How to display links to the previous and next articles at the bottom of the article detail page?

In Anqi CMS, adding navigation links for 'Previous Article' and 'Next Article' at the bottom of the article detail page can not only optimize the browsing path of users on the website, enhance the user experience, but also effectively increase page transitions, and greatly benefit the internal link structure and SEO performance of the website.AnQiCMS's powerful template engine and rich tag system makes it intuitive and efficient to implement this feature.

Core feature analysis: Tags for the previous and next articles

AnQiCMS's template system provides a special function for obtaining tags of adjacent articles, respectivelyprevArchive(Tags of the previous document) andnextArchive(Next document tag).The design of these tags is very smart, they can automatically identify the context of the current article and find the corresponding preceding and following articles without us manually passing complex classification ID or article ID parameters.

prevArchiveTags will help us get the data of the previous article of the current article, andnextArchiveTags are used to get the data of the next article. They each encapsulate an article object, from which we can extract the title (Title) and the links(Link) and other information to build friendly navigation links.

It is noteworthy that these tags, when retrieving adjacent articles, will sort intelligently based on the current article's publication time, category, and other factors to ensure the logic and coherence of navigation.If the current article is the first article in the category, there is no previous article; if it is the last article, there is no next article.In this case, we can make judgments and process in the template.

Operation steps: Add the navigation code to the article detail page template

To implement the navigation function of the previous and next articles, the main operation is to add the corresponding code in the template file of the article detail page. According to the template conventions of AnQiCMS, the template file of the article detail page is usually located/template/{你的模板目录}/{模型table}/detail.htmlFor exampletemplate/default/archive/detail.htmlortemplate/default/product/detail.html.

Open your article detail page template file, locate to the bottom of the article content area, where you can insert the following code snippet:

<div class="article-pagination">
    <div class="prev-article">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}">
                    <span>上一篇：</span>
                    {{ prev.Title }}
                </a>
            {% else %}
                <span>上一篇：</span>
                <span class="no-entry">没有了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

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

Let us explain in detail the function of this code:

1. divContainer (article-pagination)This is an external container used to wrap the 'Previous' and 'Next' links, making it convenient for you to perform overall CSS layout and style control, such as displaying them side by side or each taking up a line.
2. {% prevArchive prev %}...{% endprevArchive %}This is the block to get the tags of the previous article. It will assign the data of the previous article toprevVariable.
3. {% if prev %}Here is a conditional judgment. If there is a previous article (i.e.prevThe variable has data, then the link is displayed.
   • <a href="{{ prev.Link }}">...</a>This will generate a hyperlink, the link address is the URL of the previous article ({{ prev.Link }}), and the link text is the title of the previous article ({{ prev.Title }})
   • {% else %}If the previous article does not exist, then display the prompt text "No more".
4. {% nextArchive next %}...{% endnextArchive %}: withprevArchiveSimilarly, this is to get the tag block of the next article and assign the data tonextVariable, and perform the corresponding judgment and link display.

Save this code to your article detail page template, refresh the page, and you will see the 'Previous Article' and 'Next Article' navigation links at the bottom of the article. You can use to.article-pagination,.prev-article,.next-article,.no-entryAdd CSS styles to class names to beautify their display effects, such as setting font color, size, alignment, and even adding small icons to enhance visual guidance.

Further: Customize the display style

You can also enrich the display content of the previous and next articles according to your needs, for example, showing the thumbnail or abstract of the article.prevandnextVariables are used toTitleandLink, also providedThumb(thumbnail),Description(Description),Views(View count) and other fields.

For example, if you want to display a thumbnail next to the link:

<div class="prev-article">
    {% prevArchive prev %}
        {% if prev %}
            <a href="{{ prev.Link }}">
                {% if prev.Thumb %}
                    <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb">
                {% endif %}
                <span class="nav-text">上一篇：{{ prev.Title }}</span>
            </a>
        {% else %}
            <span>上一篇：</span>
            <span class="no-entry">没有了</span>
        {% endif %}
    {% endprevArchive %}
</div>

By making such adjustments, you can create a more attractive article navigation experience based on the overall design style of the website.

Summary

In AnQiCMS, by utilizingprevArchiveandnextArchiveThese are two concise and powerful template tags that you can easily add navigation functions for the previous and next articles on the article detail page of the website.This not only improves the user's browsing experience, but also optimizes the internal link structure of the website, which is a very practical feature in content operation.Just a few simple template modifications, your website can have a more smooth and professional navigation experience.

Frequently Asked Questions (FAQ)

Q1: Why didn't the 'Previous Article' or 'Next Article' links show up on the article detail page after I added code?A1: There could be several reasons:

*   **文章不存在相邻内容**：如果当前文章是您网站上唯一的文章，或者是所属分类的第一篇/最后一篇文章，那么自然就不会有上一篇或下一篇文章。
*   **模板文件位置错误**：请确保您修改的是正确的文章详情页模板文件，通常是 `/template/{您的模板目录}/{模型table}/detail.html`。
*   **语法错误**：请仔细检查您添加的代码是否存在拼写错误或标签闭合不完整等问题。

Q2: What is the filtering logic for 'Previous article' and 'Next article'? Will they display articles from different categories?A2:prevArchiveandnextArchiveThe tag will prioritize the category of the current article when searching for adjacent articlesSame category and same content modelsearching is carried out, and it is usually determined according to the order of the publication time (or ID) of the articles.This means that by default, they will usually display the previous and next articles in the same category.archiveListTags and more complex custom logic to implement, but this goes beyond the default design scope of these two tags.

Q3: How to make the "no longerA3: If you do not want to display the prompt text 'No more' when there are no adjacent articles, you can completely remove theelsepart and keep onlyifthe block.

```twig
{% prevArchive prev %}
    {% if prev %}
        <a href="{{ prev.Link }}">
            <span>上一篇：</span>
            {{ prev.Title }}
        </a>
    {% endif %}
{% endprevArchive %}
```
如果您希望在没有任何相邻文章（即 `prev` 和 `next` 都不存在）时，隐藏整个 `.article-pagination` 区域，可以在外部再添加一个 `if` 判断来包裹整个区域。