As an experienced CMS website operation person, I am well aware of the importance of website content navigation for user experience and search engine optimization.Clear and convenient navigation not only guides users to deeply explore the website content, effectively extending their stay time, but also constructs a perfect internal link structure, enhancing the crawling efficiency and content weight of search engines.Today, we will discuss in detail how to flexibly display the links to the previous and next documents of the current document in the AnQiCMS template.
Template Basic Review
In AnQiCMS, the template engine uses syntax similar to Django, with its core being variables{{变量}}and tags{% 标签 %}Form.For scenarios that require fetching specific data or performing logical operations, we rely on built-in template tags.The display of the previous and next document links in the current document is achieved through specific tags provided by AnQiCMS.
to implement the link to the previous document
To display the link to the previous document of the current document, AnQiCMS providesprevArchivetags. This tag is intended to retrieve the data of the previous document in the same category as the current document.
The usage of this tag is very intuitive, no additional parameters need to be passed. It will intelligently recognize the document being viewed at the moment 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.
prevArchiveTags can return the following commonly used fields of the previous document:
Id: Document IDTitle: Document TitleLink: Document LinkKeywords: Document KeywordsDescription：Document DescriptionCategoryId：Document Classification IDViews：Document ViewsLogo：Document Cover First ImageThumb：Document Cover ThumbnailCommentCount：Document comment countCreatedTime：Document added time (timestamp, needs formatting)UpdatedTime：Document updated time (timestamp, needs formatting)
The following is used in the AnQiCMS templateprevArchivea tag in a template:
<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, ensure that the link is rendered only when there is indeed a previous document.hrefProperty usage{{ prev.Link }},titleProperty and display text use{{ prev.Title }}.
Implementation of the next document link
Similar to the previous document, AnQiCMS providesnextArchivetags to get the next document link of the current document.
nextArchiveThe label does not require any parameters, it will automatically identify the current document and find the next document in the same category. If the current document is the last one in the category,nextArchiveThe label 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 label areprevArchivecompletely consistent with the label,Id/Title/Linketc.
The following is used in the AnQiCMS templatenextArchivea tag in a template:
<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 namednextto store the data of the next document. Similarly, through{% if next %}we judge whether the variable exists and render the corresponding link.
Complete example with **practice
In the actual document detail page template, it is usually necessary to display the navigation links for the previous and next articles side by side to provide a complete navigation experience.
An example implementation is to place them at the bottom of the document content area, forming a simple page turning area.In design, in addition to displaying the title, thumbnails or publication dates and other information can be displayed according to requirements to further enrich the navigation content.
The comprehensive 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, in the above code,prev_docandnext_docIs a custom variable name, which can be named according to personal preference.By this means, we not only provide users with a convenient document browsing path, but also build denser internal links for search engines, which is crucial for the overall SEO performance of the website.
Considerations for SEO and user experience
The 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, reducing the bounce rate, but also 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 the content on the website.This helps to pass page authority, allowing more deep content to gain exposure.At the same time, the organized 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.
Common Questions (FAQ)
1. If the current document is the first or last in a category, what will be displayed on the page?
If the current document is the first in a category,prevArchiveThe label will not return data, what you have in your template,{% if prev %}The judgment will fail, thus displaying the custom message 'No previous post' or similar. Similarly, if the current document is the last one,nextArchiveLabels will also display the prompt "No next post" as well. This is**practical**, ensuring that users do not see invalid links.
2. Can I display a thumbnail or other information of the document in the previous/next link, in addition to the title?
Yes,prevArchiveandnextArchiveThe data object returned by the tag contains rich document fields,ThumbThumbnail andCreatedTime（Creation time）。You can{% if prev %}or{% if next %}use{{ prev.Thumb }}/{{ next.CreatedTime }}to display this additional information, making navigation more attractive.
3. Does the previous/next link affect the SEO weight of the document?
The, previous/next link is an important internal link.They help search engine crawlers explore your website content more deeply, passing the 'link juice' from one page to another, which helps to enhance the weight and visibility of the linked page.An well-constructed internal link structure is very beneficial for the overall SEO performance of the website.