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

When browsing website content, users often want to be able to jump between related articles conveniently.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 can not only improve user experience and reduce the bounce rate, but also has a positive effect on the internal link structure of the website and search engine optimization (SEO).

Preparation: Understand the template structure

In the 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 might betemplate/default/article/detail.html.

The template engine syntax of AnQi CMS is similar to Django templates, variables are enclosed in double curly braces{{变量}}Definition, 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 feature: previous and next article tags

The built-in Anqi CMS has tags specifically used to retrieve the previous and next articles, respectively.prevArchiveandnextArchive。These tags are very intelligent, they will automatically judge the context of the current article and obtain adjacent articles that are in the same category as the current article.

These tags have similar usage methods, both are block-level tags, and require配合{% endprevArchive %}and{% endnextArchive %}The end tag is used. Inside the tag, we can define a variable to receive the obtained article data.

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

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

Here,prevArchiveLabel assigns data from the previous articleprevthe 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 there is no such item, a prompt message is displayed, such as 'No previous article available'.

The display logic of the next article is completely the same:

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

Optimize display: Richer link display

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

prevandnextVariables are article objects, they contain various field information of the article, including common ones such as:

  • 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 of the previous and next articles, and assignprev-articleandnext-articleetc. class names for convenient styling design with CSS. We also addednav-labelandnav-titleTo distinguish prompt text and article title, and make use oftruncatechars:50The filter will truncate the description to 50 characters to avoid excessively long text affecting the layout.

Add the code to the template file

  1. Find the detail page template:Locate the article detail page template file under the theme you are using. For example, if it is the default theme's article detail, the path may be similar totemplate/default/article/detail.html.
  2. Choose insertion position:Generally, navigation to the previous and next articles is placed below the main content of the article, above the comment area, or in the sidebar of the article正文. Find{{archive.Content|safe}}(If used)archiveDetailThe label may be{{articleContent|safe}}A logical position after ), as well as before any existing comment 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 styles (optional but recommended):Based on the overall style of your website,article-navigation/prev-article/next-article/prev-next-thumbnail/nav-label/nav-title/no-articleadd corresponding CSS styles to such elements, making them look more beautiful and integrated with the website.

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

Common Questions (FAQ)

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