How to display the title and link of the previous and next articles on the article detail page?

核心功能揭秘：prevArchive 与 nextArchive 标签 (English)

The template system of AnQi CMS is built-in with two tags specifically designed for handling article navigation:prevArchiveandnextArchive.They are self-explanatory—used respectively to retrieve the data of the previous and next articles of the current article.These tags are very intelligent, no complex parameter configuration is required, the system will automatically judge and obtain the corresponding previous and next article information based on the current article ID.

Operation steps: Integrate the previous/next article into the detail page

To add this feature to your website, you need to modify the template file of the article detail page.

  1. Find your article detail page templateIn most cases, the template file of the article detail page will be located/templatein a model folder under the catalog, for exampledefault/article/detail.htmlor in the template path you customized.

  2. Insert the core code snippetIndetail.htmlIn the file, find the position where you want to display the previous/next article. Typically, they are placed at the bottom of the article content.

    Firstly, let's add the link to the previous article. You can useprevArchivetags to get the data of the previous article, andifa statement to determine if there is a previous article.

    {% prevArchive prev %}
    {% if prev %}
        <a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
    {% else %}
        <span>上一篇：没有了</span>
    {% endif %}
{% endprevArchive %}

    Then, add the link to the next article in a similar manner. UsenextArchivetags to get the data of the next article:

    {% nextArchive next %}
    {% if next %}
        <a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }}</a>
    {% else %}
        <span>下一篇：没有了</span>
    {% endif %}
{% endnextArchive %}

Complete code example

integrate the two code snippets mentioned above into yourdetail.htmlTemplate, the effect may be as follows:

<article>
    <!-- 这里是文章详情页的其他内容，如标题、发布时间、文章内容等 -->
    <h1>{{ archive.Title }}</h1>
    <div>
        <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>

    <!-- 上一篇/下一篇文章导航 -->
    <nav class="article-navigation">
        <div class="prev-article">
            {% prevArchive prev %}
                {% if prev %}
                    <a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
                {% else %}
                    <span>上一篇：没有了</span>
                {% endif %}
            {% endprevArchive %}
        </div>
        <div class="next-article">
            {% nextArchive next %}
                {% if next %}
                    <a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }}</a>
                {% else %}
                    <span>下一篇：没有了</span>
                {% endif %}
            {% endnextArchive %}
        </div>
    </nav>
</article>

This code will first check if there is a corresponding previous or next article.If there is one, it will display the article title and link to the article; if not, it will display the prompt "Nothing here".divandaStyles of tags, even adding thumbnails and other additional information.

Understanding how tags work

prevArchiveandnextArchiveTags can automatically identify the current article and find adjacent articles according to the order of the article ID (usually in the same category).This means they can also automatically maintain correctness after your website content is updated, greatly reducing the cost of manual maintenance.They are a typical embodiment of the convenience provided by Anqi CMS in content operation efficiency.

Common Questions and Answers (FAQ)

1. What if my article does not have a previous or next article?In the above example code, we used{% if prev %}and{% if next %}Such condition judgment. If the current article does not have a previous (or next) one,prev(or}nextthe variable will be empty, and the display will beelseThe content within the block, for example "Previous: None." This ensures that the page displays gracefully without adjacent articles, and does not show any errors.

2. Can I customize the display style of the previous/next article? For example, add a thumbnail?Of course you can.prevandnextVariables not only containTitleandLink, but also provide other fields, such asThumb(article thumbnail),Description(Article summary) etc. You can add it according to your needs.{% if prev %}or{% if next %}block, add.<img>tags to display thumbnails, or display other additional information, such as:

{% if prev %}
    <a href="{{ prev.Link }}" title="{{ prev.Title }}">
        <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />
        <span>上一篇：{{ prev.Title }}</span>
    </a>
{% endif %}

3. These tags are judged based on what rules to determine the previous/next article? prevArchiveandnextArchiveTags are usually determined based on the publication order of the current article within its category (usually in ascending or descending order of ID or publication time) to determine the previous and next articles.If the article does not belong to any category or is searched globally, it will be searched according to the order of the global article ID.They are designed to provide the most direct, adjacent in sequence to the current article content.