How to implement the links and title display of the previous and next document pages on the content detail page?

In website operation, the navigation function of the previous and next pages on the content detail page seems minor, but it has a significant impact on user experience and the SEO performance of the website.It not only guides users to continue browsing more related content, improving the depth and duration of page visits, but also provides a clear page flow for search engine spiders to help the inclusion and ranking of website content.For partners using AnQiCMS to manage content, implementing this feature is very direct and efficient.

AnQi CMS, with its concise and efficient architecture and support for Django template engine syntax, makes template customization very friendly.Add previous and next article links and titles on the content detail page, which can be easily achieved through built-in template tags.

Anqi CMS overview of the previous and next document function

The AnQi CMS provides two special template tags for content detail pages, namelyprevArchiveused to get the previous document, as well asnextArchiveUsed to get the next document. The cleverness of these tags lies in the fact that they do not require manual specification of the current document ID or category. The system will automatically identify the document on the current detail page and intelligently find the adjacent previous and next documents.

These tags can conveniently obtain various information about adjacent documents, such as:

• Id: The unique ID of the document
• Title: Document title
• Link: The access link of the document
• Thumb: The thumbnail of the document (if available)

With this information, we can build user-friendly and informative navigation links.

Detailed steps of implementation

To implement the previous and next navigation on the content detail page of your Anqi CMS website, it usually only requires modifying the corresponding template file of the content detail page.

Step 1: Locate the content detail page template

According to the template making conventions of Anqi CMS, the template file for the content detail page is usually located under the current theme you are using{模型table}/detail.htmlFor example, if it is an article model, that might bearticle/detail.htmlIf you have a custom detail page template, please find the file you are using.

Step two: Insert previous and next navigation tags

In the detail page template file found, you can add the following code block at the bottom of the document content area or at any appropriate position to display the links and titles of the previous and next documents.

<nav class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{prev.Link}}" title="{{prev.Title}}">
                    <span>&laquo; 上一篇</span>
                    <h3>{{prev.Title}}</h3>
                </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}}">
                    <span>下一篇 &raquo;</span>
                    <h3>{{next.Title}}</h3>
                </a>
            {% else %}
                <span class="no-article">已经是最后一篇了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</nav>

This code will call separatelyprevArchiveandnextArchivetags, and store the information of the previous document obtained inprevvariables, and the information of the next document innextthe variable.

Code example analysis:

• {% prevArchive prev %}and{% nextArchive next %}This is the syntax for calling the built-in tags of Anqie CMS.prevandnextThis is the variable name we define for adjacent document data, you can name it freely.
• {% if prev %}and{% if next %}These two condition judgments are very important. They checkprevornextDoes the variable have actual content. If the current article is the first one in the category, thenprevit will be empty; if it is the last one,nextWill be empty. Through this judgment, we can elegantly display such prompts as 'It is the first/last article' instead of displaying an empty link.
• <a href="{{prev.Link}}" title="{{prev.Title}}">: Used here<a>Create a hyperlink with the label.{{prev.Link}}It will output the URL of the previous document,{{prev.Title}}and as the link of its title,titleattribute, enhancing SEO and user experience.
• <h3>{{prev.Title}}</h3>: Display the title of the previous document as visible text. You can choose to useh3/por other tags.
• <span class="no-article">已经是第一篇了</span>When there is no previous or next document, this prompt text will be displayed. You can adjust its content and style according to your website style.
• «and»These are HTML entity characters representing double left arrow and double right arrow, commonly used to indicate the previous/next page visual effect.

Advanced Optimization and Precautions

1. Style BeautificationThe above code only provides the structure, the specific visual effects need to be beautified through CSS. You canarticle-navigation/prev-article/next-article/no-articleAdd appropriate CSS styles to the class to keep it consistent with your website design, such as setting float, width, font color, margin, etc.

2. Contextual association: AnQi CMS'sprevArchiveandnextArchiveTags are very intelligent, they will automatically match based on the current document ID and publish time, inthe category or modelLooking for adjacent documents. This means that if your article belongs to the "Technology Articles" category, it will only find the previous or next article within the "Technology Articles" category, and will not jump to the documents in the "Product Introduction" category.This contextual relevance is very beneficial for maintaining the logic of the user's browsing path.

3. Multi-model support: Regardless of the content you are using, whether it is an article, product, or other custom modelarchiveThe detail page template is used to display, this method is applicable. The strength of Anqi CMS lies in its flexible content model, which makes it easy to apply these general functions to various types of content.

By following these steps, you can implement a fully functional, user-friendly previous and next document navigation feature on the content detail page of Anqi CMS.This not only improved the professionalism of the website, but also effectively promoted in-depth content reading and SEO optimization.

Frequently Asked Questions (FAQ)

Q1: If my article does not have a previous or next article, how will the navigation links display?

A1: As shown in the example code, we used{% if prev %}and{% if next %}such conditional judgment. If the current article does not have a previous one,prevthe variable will be empty, and the system will display where you are{% else %}Text defined within the block, for example, 'It is the first article already.'Similarly, if there is no next one, it will show 'This is the last one'.This ensures that the display of the navigation area always remains elegant and clear.

Q2: What is the order of the previous/next link?

A2: The previous/next feature of AnQi CMS usually sorts documents based on the publication time (CreatedTime) or document ID (Id) to find adjacent documents.Generally, documents released later or with larger IDs are considered as 'next', whereas the opposite is 'previous'.This default logic ensures the natural flow of content, in line with reading habits.

Q3: Can I customize the document information displayed in the previous or next navigation? For example, besides the title, I also want to display a thumbnail.

A3: Of course, you can.prevandnextThe variable contains various information from adjacent documents, such asId/Title/Link/Thumbetc. You just need to{% if prev %}or{% if next %}in the code block, and you can reference these variables as needed. For example, to display a thumbnail, you can<a>in the tag.<img src="{{prev.Thumb}}" alt="{{prev.Title}}">. Please adjust your template design flexibly according to the available field information.