How to display the links and titles of the previous and next articles in AnQiCMS templates?

In website operation, providing visitors with a smooth navigation experience is crucial.When a user finishes reading an article, they naturally expect to find more related content, and the 'Previous' and 'Next' links are the key features that meet this need.They can not only enhance the user's stay time on your website, but also have a positive impact on search engine optimization (SEO) by building internal link structure.

AnQiCMS provides concise and efficient built-in tags for template developers, allowing you to easily display links and titles of the previous and next articles on the article detail page in English.Below, we will together learn how to implement this feature in the AnQiCMS template.

Understand the core tags:prevArchiveandnextArchive

AnQiCMS provides two special tags for retrieving adjacent article information:

  • prevArchive: used to retrieve information about the 'previous' article of the current article.
  • nextArchiveUsed to obtain the information of the "next article" of the current article.

These tags intelligently work in the context of the article detail page, they automatically judge the current article's ID and category, and find adjacent articles in the same category.

Basic Usage: Display link and title

The most common requirement is to display the title and corresponding link of the previous and next articles. You can add the following code snippet below the content area or above the comment area of the article detail page template.

<nav class="article-navigation">
    <div class="prev-article">
        {# 获取上一篇文章信息，并将其赋值给变量 'prev' #}
        {% prevArchive prev %}
            {# 检查是否存在上一篇文章 #}
            {% if prev %}
                <span>上一篇：</span>
                <a href="{{ prev.Link }}" title="{{ prev.Title }}">{{ prev.Title }}</a>
            {% else %}
                {# 如果没有上一篇文章，则显示提示信息 #}
                <span>上一篇：没有了</span>
            {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article">
        {# 获取下一篇文章信息，并将其赋值给变量 'next' #}
        {% nextArchive next %}
            {# 检查是否存在下一篇文章 #}
            {% if next %}
                <span>下一篇：</span>
                <a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
            {% else %}
                {# 如果没有下一篇文章，则显示提示信息 #}
                <span>下一篇：没有了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</nav>

Code analysis:

  • {% prevArchive prev %}This tag will try to get the previous article of the current article, if found, it will store all its information in a namedprev.{% endprevArchive %}It is the end mark of the tag.
  • {% if prev %}：This is a conditional judgment, used to checkprevwhether the variable has successfully obtained the content (i.e., whether there is an article from the previous one). If there is, then executeifCode within the block.
  • {{ prev.Link }}：FromprevVariable to obtain the link address of the previous article.
  • {{ prev.Title }}：FromprevVariable to obtain the title of the previous article.
  • {% else %}IfprevIf the variable is empty (i.e., there is no previous article), it will execute.elseBlock code, displaying a prompt of "no more".
  • nextArchiveThe usage method of the tag isprevArchiveExactly the same, but it retrieves the information of the next article and stores it innextthe variable.

Advanced Usage: Add More Information

In addition to the title and link, you may also want to display more details of the articles in the navigation, such as thumbnails (Thumb), description (Description) etc. to provide a richer preview.prevandnextThe variable contains various fields of the article, and you can call them as needed.

Here is an example of adding a thumbnail to the navigation:

<nav class="article-pagination">
    <div class="pagination-item prev-item">
        {% 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 %}
                    <span class="pagination-text">上一篇：{{ prev.Title }}</span>
                </a>
            {% else %}
                <span class="pagination-text no-more">上一篇：没有了</span>
            {% endif %}
        {% endprevArchive %}
    </div>
    <div class="pagination-item next-item">
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="{{ next.Title }}" class="pagination-link">
                    <span class="pagination-text">下一篇：{{ next.Title }}</span>
                    {% if next.Thumb %}
                        <img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="pagination-thumb">
                    {% endif %}
                </a>
            {% else %}
                <span class="pagination-text no-more">下一篇：没有了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</nav>

In this example, we added{% if prev.Thumb %}To determine if the previous article has a thumbnail and display it, which provides users with a more intuitive navigation cue.

How to apply the code to your template

  1. Confirm the template file:Generally, the template file of the article detail page is locatedtemplate/{您的模板目录}/{模型table}/detail.html. For example, if it is an article model, it may betemplate/default/article/detail.html。You can find and edit the corresponding template file online through the 'Template Design' -> 'Website Template Management' feature in the AnQiCMS backend.

  2. Select a suitable location:Indetail.htmlIn the file, find the position where you want to display the previous/next link. This is usually in thedivtag after, but before the comments section or related article list.

  3. Paste and adjust the code:Paste the above code snippet at the selected location. You can adjust it according to the actual design of your website.divThe class name of the label, and add the corresponding CSS style to keep it consistent with your website style.

  4. Save and preview:Save the template file and then visit any article detail page on the website. Check if the links to the previous and next articles are displayed normally.

Important hints and **practice

  • Automatically determine the context: prevArchiveandnextArchiveThe strength of tags lies in the fact that they do not require you to manually pass the current article ID or other parameters; they automatically recognize the article context of the current page.
  • Gracefully handle the case of no content:Always use{% if %}To determine if the previous or next article exists. This can prevent errors or blank links from appearing on the page when there are no adjacent articles.
  • Enhance user experience:A good previous/next navigation can guide users to deeply explore your website content, reducing the bounce rate.
  • Optimize internal links:These navigation links create natural internal links for your website, helping search engines better crawl and understand your website structure, thereby enhancing SEO effectiveness.

Through the use of AnQiCMS providedprevArchiveandnextArchiveLabels, you can easily add powerful and user-friendly navigation features to your website article detail pages, thus optimizing user experience and enhancing the overall performance of the website.

Common Questions and Answers (FAQ)

问1：Why doesn't the link to the previous/next article display on the page even though I added the code in the template? Answer:There may be several reasons.Make sure that the article you are viewing does indeed have a previous or next article (i.e., it is not the first or last article in the category).detail.htmlEnglish

问2：These tags can be used on the article list page or the homepage? Answer:Cannot.prevArchiveandnextArchiveTags are specifically designed for