How to display the link to the previous and next document in the AnQiCMS template?
As an experienced Anqi CMS website operator, I fully understand the importance of website content navigation for user experience and search engine optimization.A clear and convenient navigation can not only guide users to explore the website content deeply, effectively extend the stay time, but also build a perfect internal link structure, improve the crawling efficiency and content weight of search engines.Today, we will discuss in detail how to flexibly display the previous and next document links of the current document in the AnQiCMS template.
Template Basic Review
In AnQiCMS, the template engine uses syntax similar to Django, with the core being variables{{变量}}of form and tags{% 标签 %}Form. For scenarios where specific data or logical operations need to be performed, we rely on built-in template tags.The display of the previous and next document links is achieved through the specific tags provided by AnQiCMS.
realizing the link to the previous document
To display the link to the previous document of the current document, AnQiCMS providesprevArchivethe tag. This tag is designed to retrieve the data of the previous document in the same category as the current document.
The use of this tag is very intuitive, no additional parameters need to be passed, it will intelligently identify the document being viewed and try to obtain information about the previous document.When there is no previous document, the tag will not return any data, so a conditional judgment needs to be made in the template to avoid displaying blank links.
prevArchiveThe tag can return the following commonly used fields of the previous document:
Id：Document IDTitle：Document titleLink：Document linkKeywords: Document keywordsDescription: Document descriptionCategoryId: Document category IDViews: Document viewsLogo: Document cover main imageThumb: Document cover thumbnailCommentCount: Document comment countCreatedTime: Document added time (timestamp, formatted)UpdatedTime: Document updated time (timestamp, formatted)
The following is used in the AnQiCMS templateprevArchiveLabel example:
<div class="prev-article-link">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<i class="fas fa-chevron-left"></i> 上一篇: {{ prev.Title }}
</a>
{% else %}
<span>没有了，这已经是第一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
In this example, we first use{% prevArchive prev %}Define a variable namedprevto store the data of the previous document. Next,{% if prev %}Check if this variable exists, make sure to render the link only when there is indeed a previous document. The attributes and display texthrefattribute usage{{ prev.Link }},titleare used{{ prev.Title }}.
to implement the link to the next document
Similar to the previous document, AnQiCMS providesnextArchivetags to get the link to the next document of the current document.
nextArchiveThe label does not require any parameters to be passed. It automatically identifies the current document and searches for the next document in the same category. If the current document is already the last one in the category,nextArchiveThe tag will not return any data, so it also needs to be combined with conditional judgment to ensure the robustness of the template.
nextArchiveThe fields returned by the tag are withprevArchiveThe tag is completely consistent, includingId/Title/Linketc.
The following is used in the AnQiCMS templatenextArchiveLabel example:
<div class="next-article-link">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
下一篇: {{ next.Title }} <i class="fas fa-chevron-right"></i>
</a>
{% else %}
<span>没有了，这已经是最后一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
In this example, we use{% nextArchive next %}Define a variable namednextThe variable is used to store the data of the next document. Similarly,{% if next %}it is checked if the variable exists and the corresponding link is rendered.
Complete example with **practice
In the document detail page template, it is usually displayed side by side the navigation links of the previous and next articles to provide a complete navigation experience.
A typical implementation is to place them at the bottom of the document content area, forming a simple pagination area.When designing, in addition to displaying the title, you can also display thumbnails or publication dates and other information according to the requirements, further enriching the navigation content.
The integrated template code snippet may look like this:
<nav class="document-pagination">
<div class="prev-archive">
{% prevArchive prev_doc %}
{% if prev_doc %}
<a href="{{ prev_doc.Link }}" title="{{ prev_doc.Title }}">
<div class="nav-label">上一篇</div>
<div class="nav-title">{{ prev_doc.Title }}</div>
{% if prev_doc.Thumb %}
<img src="{{ prev_doc.Thumb }}" alt="{{ prev_doc.Title }}" class="nav-thumbnail">
{% endif %}
</a>
{% else %}
<span class="no-nav-item">没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-archive">
{% nextArchive next_doc %}
{% if next_doc %}
<a href="{{ next_doc.Link }}" title="{{ next_doc.Title }}">
<div class="nav-label">下一篇</div>
<div class="nav-title">{{ next_doc.Title }}</div>
{% if next_doc.Thumb %}
<img src="{{ next_doc.Thumb }}" alt="{{ next_doc.Title }}" class="nav-thumbnail">
{% endif %}
</a>
{% else %}
<span class="no-nav-item">没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
Please note the code in the aboveprev_docandnext_docIs a custom variable name, which can be named according to personal preference.In this way, we not only provide users with a convenient document browsing path, but also build a denser internal link for search engines, which is crucial for the overall SEO performance of the website.
Considerations for SEO and user experience
A clear previous/next link not only enhances the browsing experience of users on the website, allowing them to smoothly transition from one piece of content to another related content, but also reduces the bounce rate and has a positive impact on the website's search engine optimization.
From an SEO perspective, these links build an important internal link network.Search engine crawlers will follow these links to better discover and index all content on the website.This helps pass the page weight and expose more deep content.At the same time, the structured internal link structure is also considered a feature of a high-quality website, which helps to improve the overall ranking of the website in search engines.
Frequently Asked Questions (FAQ)
1. What will be displayed on the page if the current document is the first or last in the category?
If the current document is the first in the category,prevArchiveThe label will not return data, the template in your{% if prev %}The judgment will fail, thus displaying the custom prompt "No previous article" or similar. Similarly, if the current document is the last one,nextArchiveThe tag also displays the prompt "No next article" and this is a practice to ensure that users do not see invalid links.
2. Can I display a thumbnail or other information of the document in the previous/next link besides the title?
Yes,prevArchiveandnextArchiveThe data object returned by the tag contains rich document fields, such asThumb(Thumbnail) andCreatedTime(Creation time). You can{% if prev %}or{% if next %}use in the block{{ prev.Thumb }}/{{ next.CreatedTime }}in order to display this additional information and make navigation more attractive.
3. Does the previous/next link affect the SEO weight of the document?
I will, the previous/next link is an important internal link.They help search engine crawlers explore your website content more deeply, passing 'link juice' from one page to another, which helps improve the weight and visibility of the linked page.A well-constructed internal link structure is very beneficial to the overall SEO performance of a website.