How to display the 'Previous' and 'Next' documents of the current document on the front page to enhance the user's browsing experience?

In AnQiCMS (AnQiCMS), adding 'Previous' and 'Next' navigation links to the front-page document is an important means to enhance user browsing experience and prolong user stay time.When a user finishes reading a piece of content, these links can guide them naturally to discover more related content, avoid interruptions in page browsing, effectively reduce the bounce rate, and help enhance the overall weight of the website's content.

AnQi CMS is a feature-rich Go language content management system with a powerful template tag system, allowing website operators to flexibly control content display.Among them, the "Previous" and "Next" document tags are designed to achieve seamless content navigation.They can intelligently identify and display links to adjacent documents based on the current document's order in the category.

Core function: easily implement with built-in tags

The Anqi CMS template system providesprevArchiveand the previous document"),nextArchive(Next document) These two special tags. Their use is very intuitive, requiring no complex programming knowledge, just a simple configuration in the template file on the document detail page.They automatically retrieve information about the previous or next document in the same category of the current document and generate the corresponding link.

Implementation steps: Add 'Previous' and 'Next' links on the front page

To display the "Previous" and "Next" links on the front page, you usually need to modify the document detail page template. In Anqi CMS, the document detail page template file is usually located in the template directory under your directory.{模型table}/detail.htmlFor example, the detail page of the article model might bearticle/detail.html)

Here are the specific steps and code examples for adding these links:

1. Find the template file for your document detail page

First, you need to log in to the Anqi CMS backend, go to the 'Template Design' module, and find the template currently used on your website.Then, locate the document detail page template you want to modify in the template file list.usually it may be calleddetail.htmlOr name according to your content model, such asarticle/detail.htmlorproduct/detail.html.

2. Insert navigation code in the template file

In the found template file, select a suitable position to place the 'Previous' and 'Next' links, such as below the document content or above the footer. We will useprevArchiveandnextArchiveThese tags are used to retrieve information about adjacent documents.

Please note that these tags will try to retrieve the previous or next document, but if the current document is already the first or last in the category, then the corresponding 'previous' or 'next' will not exist. Therefore, we need to combineifJudge the tag to elegantly handle this situation, ensuring that the page does not appear with blank links or errors when there are no adjacent documents.

Here is a standard implementation example:

<div class="document-pagination">
    <div class="prev-document">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="« {{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>
            {% else %}
                <span>« 没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-document">
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="{{ next.Title }} »">下一篇：{{ next.Title }} »</a>
            {% else %}
                <span>没有下一篇了 »</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

3. Code Explanation

• <div class="document-pagination">: This is a wrapping element used for the overall layout and style control of the previous/next link.You can replace it with other HTML tags or classes according to your design.
• {% prevArchive prev %} ... {% endprevArchive %}: This is a label block to obtain the information of the previous document. It will try to find the previous document of the current document and assign its information to a temporary variable namedprev.
• {% if prev %} ... {% else %} ... {% endif %}This is a conditional judgment.
  • IfprevThe variable exists (i.e., there is a previous document), then execute.ifThe code within the block displays the link to the previous document.
  • IfprevThe variable does not exist (i.e., this document is the first one), then executeelseThe code within displays a prompt indicating “No previous post”.
• <a href="{{ prev.Link }}" title="« {{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>: This is the actual link to the previous document.
  • {{ prev.Link }}: It will be replaced with the URL address of the previous document.
  • {{ prev.Title }}This will be replaced by the title of the previous document.
  • title="..."AddtitleProperties can enhance user experience (displaying the title when hovering over the mouse) and SEO.
• {% nextArchive next %} ... {% endnextArchive %}This is related toprevArchiveThe tag is similar, used to obtain the information of the next document and assign it to a temporary variable namednextThe internal logic is also the same as that of the previous document.

4. Save the template and view the effect

After you finish modifying the code, save your template file and refresh the front-end page to see the effect. You will find that there are 'Previous' and 'Next' navigation links at the bottom of the document.

Optimization and personalization

• Add Style (CSS): The above code only provides the basic HTML structure. To make these links look more attractive, you need to add.document-pagination,.prev-document,.next-documentAdd the corresponding CSS styles to the class. For example, you can set them to float left and right, adjust the font size and color, or add borders and background colors.
• Display thumbnailsIf you want the link to be more attractive, you can display a thumbnail of the previous/next document next to it.prevandnextVariables also support thisThumbfield, used to get the document thumbnail address.

  
  {% if prev %}
      <a href="{{ prev.Link }}" title="« {{ prev.Title }}">
          {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="doc-thumb">{% endif %}
          « 上一篇：{{ prev.Title }}
      </a>
  {% endif %}
  

• Custom no document promptWhen there is no previous or next document,<span>« 没有上一篇了</span>This prompt can be customized according to your website style.For example, you can change it to "go back to the article list" and link to the category homepage, or simply do not display any content to keep the page simple.

By following these simple steps and flexible customization, you can provide users with a smooth and efficient content browsing experience on the front page of the website built with Anqi CMS, making visitors stay longer on your website and discover more valuable information.

Frequently Asked Questions (FAQ)

Q1: Why did I add the 'Previous'/'Next' code on the document detail page, but no links were displayed on the front page?

A1: