As an experienced website operation expert, I know that every detail in a content management system can affect the user's visit experience and the overall performance of the website.Especially on the document detail page, users expect to be able to browse related content smoothly.When the previous document is missing for various reasons (such as being deleted, archived, or being the first one), how to elegantly provide a fallback option instead of letting the user get stuck in a dead end, this is the problem that AnQiCMS's flexibility can solve.
AnQiCMS content operation: How to elegantly guide users back to the list or homepage when the previous document is missing?
In modern website operation, user experience is the core. When users browse the article detail page, they usually expect to have 'Previous' and 'Next' navigation for continuous reading.However, there are always some documents that are the first in the category, or the previous document has been removed.In this case, if the 'Previous Article' link simply disappears or displays a non-functional blank area, it will confuse the user and may even cause them to leave the website.AnQiCMS (AnQiCMS) provides us with a clever solution to this problem with its flexible template tag system.
Our goal is to no longer allow links to hang in the air when the "previous" document does not exist, but instead to intelligently display a "return to list" or "return to homepage" link, thereby enhancing the continuity of user browsing.
Understand the working principle of the "Previous Article" tag
The template engine of AnQiCMS is very powerful and intuitive, it providesprevArchiveLabel to get the previous content of the current document. The way to use this label is{% prevArchive prev %}...{% endprevArchive %}. When you call it in the template, if there is a previous document,prevThe variable will contain the details of the document, such as the title, link, etc. However, the key is,When the previous document is not found,prevThe variable will be an empty value (in the AnQiCMS Go template engine, it can beifjudged asfalse). It is this feature that provides the foundation for us to implement intelligent fallback.
Core Strategy: Conditional Judgment and Default Fallback Link
To implement smart fallback, we just need to utilize the conditional judgment capability of the AnQiCMS template engine. WhenprevWhen the variable has a value, we normally display the 'Previous' link; whenprevthe variable is empty, we then enterelseBranch, at this point, you can provide a link back to the current category list based on actual operational needs, or more broadly, return to the homepage of the website.
Let us demonstrate how to elegantly implement this strategy through a specific template code example.
Plan one: Return the current category list first, followed by the homepage of the website.
This plan is more detailed in terms of user experience. Since users are on the article detail page of a certain category, when there is no previous article, they are more likely to want to return to the list page of this category to continue browsing similar content.If category information cannot be obtained, the safest course of action is to guide them back to the homepage of the website.
We willprevArchiveThe tag call is wrapped in a conditional judgment. Inelseblock, we first try to get the link of the current document's category. AnQiCMS providesarchiveDetailTag to get the details of the current document, which includesCategoryfield, which can directly obtain the object of the current category and its link.
Here is the template code snippet to implement this strategy:
<div class="pagination-section">
{% prevArchive prev %}
{% if prev %}
<div class="pagination-link prev-link">
<a href="{{ prev.Link }}" title="上一篇: {{ prev.Title }}">
« 上一篇: {{ prev.Title|truncatechars:30 }}
</a>
</div>
{% else %}
<div class="pagination-link default-link">
{# 尝试获取当前文档所属分类的链接 #}
{% archiveDetail currentCategory with name="Category" %}
{% if currentCategory.Link %}
<a href="{{ currentCategory.Link }}" title="返回{{ currentCategory.Title }}列表">
« 返回{{ currentCategory.Title }}列表
</a>
{% else %}
{# 如果无法获取分类链接,则回退到网站首页 #}
<a href="{% system with name='BaseUrl' %}" title="返回网站首页">
« 返回网站首页
</a>
{% endif %}
</div>
{% endif %}
{% endprevArchive %}
</div>
Code analysis:
{% prevArchive prev %}Attempt to retrieve information about the previous document.{% if prev %}If:prevIf the variable has a value (i.e., there is a previous document), then a normal link is displayed. Here, it is used to truncate the title and keep the page tidy.prev.Title|truncatechars:30to truncate the title and keep the page tidy.{% else %}If:prevThe variable is empty (no previous document), enter fallback logic.{% archiveDetail currentCategory with name="Category" %}In the context of the current document, obtain its category object and assign it tocurrentCategoryVariable.{% if currentCategory.Link %}:Check if the category link is successfully obtained. If obtained, display the link of 'Return [Category Name] List.'currentCategory.LinkandcurrentCategory.TitleDirectly provided the category URL and name.{% else %}If the category link cannot be obtained (for example, the document may not have associated categories, or there is an error in the data), then perform the final fallback and display the link to return to the website homepage.{% system with name='BaseUrl' %}: AnQiCMS'systemTags can conveniently obtain the global configuration of the website, including the URL of the homepage.
By such layer-by-layer judgment, we ensure that in any case, the user can always obtain a valid navigation direction, greatly improving the user experience. In practical applications, you can design for the website's UI/UX based on.pagination-link/.prev-linkand.default-linkAdd the corresponding CSS styles to make it visually more harmonious and beautiful.
Option two: directly return to the homepage of the website (simpler, suitable for all situations)
If you prefer a simple and direct fallback solution, that is, to return to the website homepage directly in any case where there is no previous one, then the code can be more concise:
`twig
{% prevArchive prev %}
{% if prev %}
<