How to display the links and titles of the previous and next articles on the article detail page?

When a reader visits an article of interest, they often hope to browse related or continuous content seamlessly, rather than returning to the list page to search again.Provide navigation links to "Previous" and "Next" pages on the article detail page of the website, which is an effective way to enhance this reading experience and increase user stickiness.It can not only guide users to explore the website content in depth, but can also optimize the internal link structure of the website to some extent, and is friendly to search engines.

AnQiCMS (AnQiCMS) is a powerful content management system that fully considers the needs of content operation, and therefore provides a very convenient way to implement this function at the template tag level.Even if you are not familiar with complex programming, you can easily add navigation for the previous and next articles on your article detail page by calling simple tags.

Understanding the template mechanism of Anqi CMS

The AnQi CMS adopts a template engine syntax similar to Django, which means you can control the display logic and output data through specific tags. Template tags are usually followed by{% ... %}Wrap, used for control logic (such as conditional judgment, loop), and variable output is used{{ ... }}. The links and titles of the previous and next articles are implemented through the built-in template tags of the system, which automatically search and return information about adjacent articles based on the order of the current article in the database.

Find the article detail template file

To add the navigation for the previous and next articles on the article detail page, you first need to find the corresponding template file for the article detail page. In AnQi CMS, template files are usually stored in/templateIn the directory of the theme you are currently using.

Generally, the template file path of the article detail page will be similar./template/[你的模板目录]/[你的模型table]/detail.htmlThe structure. For example, if your article uses the "article" model and the template directory name isdefault, then the file may be intemplate/default/article/detail.html.

You can edit or download these template files online through the "Template Design" feature of the AnQi CMS backend to make modifications.

Add the previous and next navigation links: Core code implementation

AnQi CMS provides two special tags for obtaining information about the previous and next articles:prevArchive(Tags of the previous document) andnextArchive(Next document tag). These tags are very smart, they do not require additional parameters to automatically identify the current article and try to retrieve the data of the previous or next article.

Information obtained from these tags is an object containing multiple fields, from which you can extract the article ID, title, link, thumbnail, etc. Common fields include:

• Id: Unique identifier of the article
• Title: Article title
• Link: Access link of the article
• Thumb: Thumbnail address of the article (if available)
• Description: Article Summary

The following is an example of code to add previous and next navigation links to the article detail page:

<div class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %} {# 将上一篇文章信息赋值给变量prev #}
        {% if prev %} {# 判断是否存在上一篇文章 #}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                <span class="navigation-direction">&laquo; 上一篇</span>
                <h3 class="navigation-title">{{ prev.Title }}</h3>
                {% if prev.Thumb %} {# 如果有缩略图，则显示 #}
                    <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="navigation-thumbnail"/>
                {% endif %}
            </a>
        {% else %}
            <span class="navigation-direction no-more">&laquo; 没有了</span>
        {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-article">
        {% nextArchive next %} {# 将下一篇文章信息赋值给变量next #}
        {% if next %} {# 判断是否存在下一篇文章 #}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                <span class="navigation-direction">下一篇 &raquo;</span>
                <h3 class="navigation-title">{{ next.Title }}</h3>
                {% if next.Thumb %} {# 如果有缩略图，则显示 #}
                    <img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="navigation-thumbnail"/>
                {% endif %}
            </a>
        {% else %}
            <span class="navigation-direction no-more">没有了 &raquo;</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

In this code block:

1. {% prevArchive prev %}and{% nextArchive next %}Load the data of the previous article and the next article separately intoprevandnextthe variable.
2. {% if prev %}and{% if next %}This condition judgment is very important. It ensures that links are only rendered when there is indeed a previous or next article.If not found, it will display a prompt text like 'Not available', to avoid the page showing empty links.
3. The link<a>Tag, we usedhref="{{ prev.Link }}"andtitle="{{ prev.Title }}"Display the link and title of the article.titleProperties are very helpful for user experience and search engine optimization. When the mouse hovers over them, a tooltip is displayed, and the search engine can better understand the link content.
4. {% if prev.Thumb %}This code block allows you to optionally display a thumbnail of the previous/next article, which makes navigation more intuitive and beautiful.

Design and beautification

This code provides a basic HTML structure, you can enhance these navigation links by adding CSS styles.For example, you can place them side by side at the bottom of the page or design them as buttons with arrows. By usingarticle-navigation/prev-article/next-article/navigation-directionandnavigation-titleAdd class styles, you can integrate them into the overall design style of your website.

Summary

Provided by Anqi CMSprevArchiveandnextArchiveTemplate tag, you can integrate the previous and next navigation functions for the article detail page very flexibly and efficiently.This can greatly enhance the reading experience of users on the website, encouraging them to browse more content, and also has a positive impact on the internal link structure and SEO optimization of the website.

Frequently Asked Questions (FAQ)

1. Why did the page not display anything or only show 'none' after I added the previous/next article code?

This usually has several reasons: first, please check if the article you are currently browsing is really the first or last article in the category, if it is, then the corresponding "previous" or "next" article naturally does not exist. Second, please carefully check if the spelling of the tags and variable names in the template code is correct.{% prevArchive prev %}and{% endprevArchive %}Pair matching tags. Finally, if your website has enabled caching, please try clearing the website cache to ensure that your latest template changes have taken effect.

2. Can I display other information in the previous/next navigation besides the article title and link? For example, thumbnails or publication dates?

Of course you can.prevArchiveandnextArchiveTags retrieved from comments.prevandnextThe variable is an object that contains the complete information of the article. In addition,LinkandTitleyou can also accessThumb(thumbnail),Description(Summary),CreatedTime(Publication time) and other fields. In the code example, we have shown how to conditionally display thumbnails. You can also use them as needed,{{ stampToDate(prev.CreatedTime, "2006-01-02") }}This tag is used to format and display the publication date.

3. Does this previous/next navigation function automatically search articles across categories?

Of Security CMSprevArchiveandnextArchiveThe tag is set to find the previous and next articles in the category of the current article.This means it will maintain the relevance of the content, it will not jump to unrelated categories.If you need to implement navigation similar to cross-categories, you may need to combinearchiveList