How to display the links to the previous and next articles on the document detail page?

When browsing website content, users often want to be able to navigate easily between related articles.For example, after reading a news article or tutorial, you can quickly click to go to the 'previous' or 'next' article to maintain the continuity of reading.This not only improves the user experience and reduces the bounce rate, but also has a positive effect on the internal link structure of the website and search engine optimization (SEO).

AnQiCMS (AnQiCMS) is an efficient content management system that provides a very simple and intuitive way to achieve this function.We do not need complex backend programming, just by reasonably using the built-in tags in the front-end template, we can easily realize the display of the previous and next article links on the article detail page.

Preparation: Understand the template structure

In AnQi CMS, the display of article detail pages is usually controlled by a specific template file. According to the AnQi CMS template design conventions, the template file for the document detail page is generally located in your template directory, for exampletemplate/您的模板目录/{模型table}/detail.htmlFor example, if it is an article model, it may betemplate/default/article/detail.html.

The Anqi CMS template engine syntax is similar to Django templates, variables are enclosed in double curly braces{{变量}}Define, while conditional judgment and loop control tags use single curly braces and percent signs{% 标签 %}Definition, and it must have an end tag. Understanding this will help us understand the subsequent code snippets.

Core Function: Tags for the previous and next article

The AnQi CMS is built-in with special tags to retrieve the previous and next articles, respectivelyprevArchiveandnextArchive. These tags are very smart, they automatically judge the context of the current article and obtain adjacent articles that are in the same category as the current article.

These tags are used in a similar way, both are block tags and require配合{% endprevArchive %}and{% endnextArchive %}Use the end tag. Inside the tag, we can define a variable to receive the article data obtained.

For example, the basic structure of displaying the previous article is as follows:

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

here,prevArchiveThe tag assigns the data of the previous article toprevthe variable. We use{% if prev %}To determine if there is a previous article. If it exists, display its link{{ prev.Link }}and the title{{ prev.Title }}If not found, display a prompt message, such as 'No previous article.'.

The display logic for the next article is also the same:.

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

Optimize display: More link display

It may be too simple to just display the title and link, in order to provide richer visual and information cues, we can add more elements such as thumbnails and descriptions to the links of the previous and next articles.

prevandnextVariables are article objects, they contain various field information of the articles, including commonly used ones:

• Id: Article ID
• Title: Article title
• Link: Article link
• Thumb: Article thumbnail URL
• Description: Article description

We can flexibly use these fields to beautify the display of links. Here is a more detailed code example showing how to add thumbnails and truncated descriptions.

<div class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="上一篇: {{ prev.Title }}">
                    {% if prev.Thumb %}
                        <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="prev-next-thumbnail"/>
                    {% endif %}
                    <p class="nav-label">上一篇</p>
                    <p class="nav-title">{{ prev.Title }}</p>
                    {% if prev.Description %}
                        <small>{{ prev.Description|truncatechars:50 }}</small> {# 使用truncatechars过滤器截取前50个字符 #}
                    {% endif %}
                </a>
            {% else %}
                <span class="no-article">没有上一篇文章了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-article">
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="下一篇: {{ next.Title }}">
                    {% if next.Thumb %}
                        <img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="prev-next-thumbnail"/>
                    {% endif %}
                    <p class="nav-label">下一篇</p>
                    <p class="nav-title">{{ next.Title }}</p>
                    {% if next.Description %}
                        <small>{{ next.Description|truncatechars:50 }}</small>
                    {% endif %}
                </a>
            {% else %}
                <span class="no-article">没有下一篇文章了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

In this example, we usedivelements to wrap the links to the previous and next articles, and assignprev-articleandnext-articlesuch class names for convenient CSS styling later. We also addednav-labelandnav-titleUse to distinguish prompt text and article titles, and take advantage oftruncatechars:50The filter will truncate the description to 50 characters to avoid overly long text affecting the layout

Add the code to the template file

1. Find the detail page template:Locate the template theme under which you are using the article detail page template file. For example, if it is a default theme article detail, the path may be similar totemplate/default/article/detail.html.
2. Select the insertion position:The navigation to the previous and next articles is usually placed below the main content of the article, above the comment area, or in the sidebar of the article. Find{{archive.Content|safe}}(If usingarchiveDetailLabel, possibly{{articleContent|safe}}After that, and possibly before any comments section.
3. Paste the code:Copy and paste the optimized code snippet into the selected location.
4. Save and test:Save the template file and then visit any article detail page on the website to check if the links to the previous and next articles are displayed normally.
5. Add CSS style (optional but recommended):According to the overall style of your website, addarticle-navigation/prev-article/next-article/prev-next-thumbnail/nav-label/nav-title/no-articleCSS styles to such classes, making them look more beautiful and integrated with the website.

By following these steps, you can elegantly display the links to the previous and next articles on the article detail page of Anqi CMS.

Frequently Asked Questions (FAQ)

1. Why did I add tags but the link to the previous/next article did not display?
   • First, please check if your template syntax is correct, including tag names and variable names