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

In website operation, the previous and next navigation function on the content detail page may seem minor, but it has a significant impact on user experience and the SEO performance of the website.It can not only guide users to continue browsing more related content, increase page visit depth and duration, but also provide clear page flow during search engine crawling, helping the inclusion and ranking of website content.For partners using AnQiCMS to manage content, achieving this function is very direct and efficient.

The Anqi CMS boasts its concise and efficient architecture and support for Django template engine syntax, making template customization very user-friendly.Add links and titles to the previous and next articles on the content detail page, which can be easily achieved through built-in template tags.

Overview of the previous and next function in the AnQi CMS

【en】The AnQi CMS provides two special template tags for content detail pages, respectively,prevArchiveused 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 automatically identifies the document on the current detail page and intelligently finds the previous and next documents adjacent to it.

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

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

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

Detailed steps to implement

To implement the 'Previous' and 'Next' navigation on the content detail page of your security CMS website, you usually just need to modify the corresponding template file of the content detail page.

First Step: Locate the content detail page template

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

Step 2: Insert navigation tags for previous and next articles

In the detail page template file found, you can add the following code block below the document content area or at any location you find appropriate to display 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 separately.prevArchiveandnextArchiveThe tags, and the information of the previous document will be stored in.prevThe variable, and the information of the next document will be stored in.nextthe variable.

Code example analysis:

  • {% prevArchive prev %}and{% nextArchive next %}This is the syntax for calling the built-in tags of AnQi CMS.prevandnextis the variable name we define for adjacent document data, and you can name it freely.
  • {% if prev %}and{% if next %}These two conditional judgments are very important. They checkprevornextDoes the variable have actual content. If the current article is the first in its category,previt will be empty; if it is the last article,nextWill be empty. Through this judgment, we can elegantly display prompts such as 'It is the first/last article' instead of displaying an empty link.
  • <a href="{{prev.Link}}" title="{{prev.Title}}">: Here is used<a>Create a hyperlink for the label.{{prev.Link}}It will output the URL of the previous document.{{prev.Title}}It will output its title and use it as the link'stitleattribute to enhance SEO and user experience.
  • <h3>{{prev.Title}}</h3>[en] 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.
  • &laquo;and&raquo;These two are HTML entity characters, representing double left arrow and double right arrow, commonly used to indicate the visual effect of previous page/next page.

Advanced Optimization and Precautions

  1. Aesthetic StyleThe 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, ensuring consistency with your website design, such as setting float, width, font color, margins, etc.

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

  3. Support for multiple modelsWhether your content is an article, product, or other custom model, as long as it is usingarchiveThis method is applicable for displaying on the detail page template.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 and user-friendly previous and next document navigation feature on the content detail page of the Anqi CMS.This not only enhances the professionalism of the website, but also effectively promotes deep reading of content and SEO optimization.

Common Questions (FAQ)

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

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

Q2: What is the order in which the previous/next article links are arranged?

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

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.prevandnextThe variable contains multiple pieces of information from adjacent documents, such asId/Title/Link/Thumbetc. You only need to{% if prev %}or{% if next %}in the code block, and refer to these variables as needed. For example, to display a thumbnail,<a>Add content inside the tag.<img src="{{prev.Thumb}}" alt="{{prev.Title}}">Please adjust flexibly according to your template design and available field information.