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

It is crucial to provide a smooth user experience in the operation of our website.When visitors finish reading a richly contented article, they often hope to follow the trail and continue browsing other content of the same category or related topics.In this case, it is particularly important to display the titles and links of the 'previous article' and 'next article' on the article detail page.This not only significantly improves the user's reading experience and reduces the likelihood of them leaving the website, but also effectively guides users to deeply browse within the website, indirectly helping to improve the website's SEO performance.

AnQiCMS (AnQiCMS) has fully considered these actual needs of content operation when designed, providing a set of simple and efficient template tags that allow you to easily navigate to the previous and next articles on the article detail page without writing complex code.

Understand the key template tags

In AnQi CMS, the implementation of this function mainly depends on two built-in template tags:prevArchive(Previous article) andnextArchive(Next article).

• prevArchiveTags:Used to get the data of the previous article of the current article.
• nextArchiveTags:Used to get the data of the next article of the current article.

These tags are designed to automatically identify the current article and intelligently find the previous and next articles in the same category based on their publication time.They are context-sensitive, which means you just need to place them in the template of the article detail page, and the system will automatically handle the search logic.

How to useprevArchiveandnextArchive

The use of these tags is very intuitive, following the syntax rules of the Django template engine. You usually find them in the template files of the article detail page (such asarticle/detail.htmlorproduct/detail.htmlAdd them depending on your content model configuration.

Let's look at a simple example to see how they work.

Basic structure:

<div class="article-navigation">
    <div class="prev-article">
        {%- 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">
        {%- nextArchive next %}
        {%- if next %}
            <span>下一篇：</span>
            <a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
        {%- else %}
            <span>没有下一篇了</span>
        {%- endif %}
        {%- endnextArchive %}
    </div>
</div>

Code analysis:

1. {%- prevArchive prev %}and{%- nextArchive next %}This is the start and end of the tag,prevandnextIt is the temporary variable name you define for the data of the previous and next articles.-symbols such as{%-and-%}This is used to remove the empty lines that may be generated by the template parsing itself, making the generated HTML cleaner.
2. {%- if prev %}and{%- if next %}: This is a conditional judgment.prevArchiveandnextArchiveThe label will return an empty value when there is no corresponding previous or next article. By thisifJudgment, you can elegantly handle this situation, choose to display a prompt such as 'There is no previous article' or completely hide the navigation item.
3. {{ prev.Link }}and{{ next.Link }}:prevandnextThe variable contains the complete information of the article.LinkField to retrieve the full link address of the article, which can be used directly.<a>label'shrefProperty.
4. {{ prev.Title }}and{{ next.Title }}:TitleField to retrieve the title of the article, which can be displayed directly to the user.
5. title="{{ prev.Title }}"andtitle="{{ next.Title }}": Add to the linktitleAttributes are a good practice that can display article titles when the user hovers, enhancing user experience and accessibility, and also providing some help to SEO.

More available article fields

exceptTitleandLink,prevandnextVariables also provide many useful fields that you can call as needed, for example:

• Id: The unique ID of the article.
• Thumb: The thumbnail address of the article, which will be very useful if you want your navigation to include images.
• Description: The introduction of the article.
• CreatedTime: The publication time of the article (timestamp format, you need to usestampToDateFormat, for example{{ stampToDate(prev.CreatedTime, "2006-01-02") }})
• Views: Page views of the article.

For example, if you want to display thumbnails in navigation at the same time, you can modify it like this:

<div class="article-navigation">
    <div class="prev-article">
        {%- prevArchive prev %}
        {%- if prev %}
            <span>上一篇：</span>
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                {%- if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb">{% endif %}
                {{ prev.Title }}
            </a>
        {%- else %}
            <span>没有上一篇了</span>
        {%- endif %}
        {%- endprevArchive %}
    </div>

    <div class="next-article">
        {%- nextArchive next %}
        {%- if next %}
            <span>下一篇：</span>
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                {%- if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumb">{% endif %}
                {{ next.Title }}
            </a>
        {%- else %}
            <span>没有下一篇了</span>
        {%- endif %}
        {%- endnextArchive %}
    </div>
</div>

Remember that the above code only provides the HTML structure, and you can give it a beautiful style according to the overall style of your website, making it perfectly integrate with your website design.

ByprevArchiveandnextArchiveThese simple yet powerful tags make the navigation function of the article detail page accessible.It not only optimizes the user experience, but also indirectly helps the in-depth reading of website content and SEO performance.

Frequently Asked Questions (FAQ)

Ask: Why doesn't the link to my previous/next article display?

Answer: There may be several reasons. First, please confirm that the current article indeed has a previous or next article (for example, it is the first or last article in a category, or there is only one article in the category).Next, check if the template code uses{% if prev %}or{% if next %}This condition judgment, if the condition is not met, the navigation section may be hidden. In addition, make sure that your article has been published and the correct category has been set.

Question:prevArchiveandnextArchiveDoes the tag support specifying a model ID or category ID to get the previous/next article?

Answer:prevArchiveandnextArchiveTags are context-sensitive. They automatically identify the model and category of the current article and search for the previous/next article within the scope of that model and category.Therefore, they do not support additional inputmoduleIdorcategoryIdSpecify the parameters. This design simplifies usage and ensures the logic of navigation.

Ask: Can I display other information in the link of the previous/next article, such as the publication date or view count?

Answer: Absolutely.prevArchiveandnextArchivewithin the tag,prevornextThe variable is a complete article object, you can access all its available fields as you would on an article detail page. For example, you can display{{ prev.CreatedTime }}(Publish time) or{{ next.Views }}(Page views). It should be noted that,CreatedTimeis a timestamp, you need to use the formatting function provided by Anqi CMS to format it, for example,stampToDatefor example,{{ stampToDate(prev.CreatedTime, "2006-01-02") }}.