As a senior CMS website operation person, I am well aware of the importance of content navigation for user experience and SEO.Today, with the content of the website becoming increasingly rich, how to guide users to browse related content smoothly is a key factor in enhancing user stickiness and reducing the bounce rate.Today, let's delve into how to cleverly call the links of the previous and next documents in AnQiCMS templates to optimize your website's content structure and user path.
Enhance User Experience and SEO: Previous and Next Document Navigation in AnQiCMS Templates
In a content management system, adding 'Previous' and 'Next' navigation to articles or product detail pages is a common and effective way to optimize the user browsing experience.This can not only encourage visitors to stay longer on your website, discover more relevant content, but also help search engine spiders better understand the hierarchy and relevance of website content, thereby improving the overall SEO performance of the website.AnQiCMS as an enterprise-level system focusing on efficient content management naturally also provides a simple and clear way to achieve this function.
Understand AnQiCMS Templates and Tag Syntax
In AnQiCMS, template development follows the syntax rules similar to Django template engine. This means variables are enclosed in double curly braces{{变量}}Define it, while control structures (such as conditional judgments, loops) use single curly braces and percent signs{% 标签 %}to mark. This clear syntax makes the writing and maintenance of templates relatively intuitive.
“Previous” and “Next” document links are usually placed on the detail page of a single document (such as an article detail page or a product detail page).AnQiCMS provides special template tags for this, which will automatically work in the context of the current document and intelligently find adjacent documents.
Call the link of the previous document
To display the link of the previous document of the current document, you can useprevArchiveLabel.This label is designed to be very simple, it does not require any parameters, and the system will automatically determine the previous document based on the sorting of the current document in the database (usually ID or publication time).
When you call a tag in a template and specify a variable name (such as){% prevArchive prev %}...{% endprevArchive %}If there is a previous document, it will be assigned to the variable you defined (for example, the variable here is theprev）。You can accessprevVariablesTitle(document title) andLink（Document link）and other properties to build your navigation elements.
The following is an example code snippet that calls a link to the previous document:
{% prevArchive prev %}
<div class="prev-document-navigation">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="navigation-label">上一篇：</span>
<span class="document-title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="no-document-indicator">已是第一篇</span>
{% endif %}
</div>
{% endprevArchive %}
In this code, we first use{% prevArchive prev %}Label to get the data of the previous document and assign it topreva variable. Then, through a{% if prev %}condition judgment, ensure that the link is displayed only when there is indeed a previous document.prevThe variable is empty (indicating that the current document is the first one), then display the prompt information 'It is the first one'.
In addition to the title and link, you can also call other available fields, such asThumb(Thumbnail) orDescriptionDescription, to enrich your navigation display.
Invoke the link to the next document.
Similar to the previous document, to display the link to the next document, you can usenextArchiveLabel. This label does not require any parameters, it will intelligently find the next document in the current document.
Used in the template{% nextArchive next %}...{% endnextArchive %}If there is a subsequent document, it will be assigned to the variable you define (for example, the variable herenext). You can also accessnextVariablesTitle(document title) andLink(document link) and other properties.
The following is an example code snippet that calls a link to the next document:
{% nextArchive next %}
<div class="next-document-navigation">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="navigation-label">下一篇：</span>
<span class="document-title">{{ next.Title }}</span>
</a>
{% else %}
<span class="no-document-indicator">已是最后一篇</span>
{% endif %}
</div>
{% endnextArchive %}
The logic of this code is the same as that of calling a link to the previous document, just that theprevArchivewithnextArchiveand is usednextThe variable carries the data of the next document. Similarly, a conditional judgment is also made before displaying the link to ensure the validity of the link.
Integrate navigation from the previous and next documents
In the actual document detail template, you usually will place these two navigation elements side by side, or layout according to design requirements.
An example of a complete document detail page navigation area may be as follows:
<section class="document-navigation-area">
{% prevArchive prev %}
<div class="prev-document">
{% if prev %}
<a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
<i class="icon-arrow-left"></i>
<span>上一篇:</span>
<span class="document-link-title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="disabled-link">无上一篇</span>
{% endif %}
</div>
{% endprevArchive %}
{% nextArchive next %}
<div class="next-document">
{% if next %}
<a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
<span>下一篇:</span>
<span class="document-link-title">{{ next.Title }}</span>
<i class="icon-arrow-right"></i>
</a>
{% else %}
<span class="disabled-link">无下一篇</span>
{% endif %}
</div>
{% endnextArchive %}
</section>
Summary
Provided by AnQiCMSprevArchiveandnextArchive
Common Questions (FAQ)
Why did I add the previous/next page tags on the document detail page, but they did not display any content?
In most cases, this may be due to the following reasons: First, please make sure that you are currently accessing a valid document detail page, not a list page or any other type of page.prevArchiveandnextArchiveLabels are designed to automatically retrieve adjacent documents in the context of a specific document.Secondly, check whether the current document is the first or last document in its category, if so, there will be no previous or next document to display.{% if prev %}or{% if next %}Such condition judgment is used to correctly handle cases without adjacent documents.
What rules are used to sort and select the previous and next documents?
AnQiCMSprevArchiveandnextArchive
Can I use these tags on non-document detail pages (such as the homepage or list page)?
It is not recommended to use tags directly on non-document detail pages (such as the homepage, category list page)prevArchiveandnextArchiveLabel.These tags depend on the current page having a clear 'current document' context to work properly.On the home page or list page, the system cannot determine which "current document" it is, so these tags will not be able to retrieve data.archiveListand cooperate withcategoryIdortagIdUsing parameters to flexibly call content.