Easy to master: How to make use of in the Anqi CMS?prevArchiveandnextArchiveTag implementation for smart article navigation
As experienced website operators, we know that website content is not just about publishing. How to enable users to browse smoothly through a vast amount of information and find the next piece of content they are interested in is crucial for improving user experience, extending their stay, and even optimizing SEO. In the powerful and flexible content management system, AnQiCMS (AnQiCMS),prevArchiveandnextArchiveThese template tags are the tools that enable seamless navigation.
AnQi CMS provides an efficient and customizable content solution for small and medium-sized enterprises and content operation teams with its high-performance architecture based on the Go language and modular design.The SEO-friendly features, as well as the flexible template engine syntax, allow content creators and developers to easily build outstanding websites.Today, we will delve into the navigation of the two-part document in question, which is a microcosm of its excellent user experience design.
Why is the navigation between parts so important?
Imagine a user coming to your website's article through a search engine.If the content quality of this article is high, users are likely to be interested in continuing to read related content.An eye-catching 'Previous' and 'Next' navigation, just like building a bridge over the river of content for users.It not only guides users to deeply browse the website, reduce the bounce rate, but also naturally increases the page PV (Page View), forming a good internal link structure, which is greatly beneficial for search engine crawling and weight transfer.
For self-media operators, it can effectively improve the internal circulation efficiency of the content matrix; for corporate websites, it can help potential customers understand the product or service details systematically, from introduction to application, and then to case studies, forming a complete cognitive path.
UnveilingprevArchiveandnextArchivetags
The template system of Anqi CMS adopts syntax similar to Django template engine, which is concise and powerful.prevArchiveandnextArchiveThe design of the tag is more than just adhering to the philosophy of 'user-centricity' to the end. Their biggest feature is intelligence and simplicity:No parameters are requiredThese two tags can automatically identify the context of the current document and intelligently find the previous and next documents in the category or timeline.
This means that when you use these tags on the document detail page, the system will automatically determine the relationship between the current document and provide the corresponding document data, greatly simplifying the complexity of template development.
Let's take a look at their basic usage:
{# 获取上一篇文档 #}
{% prevArchive prev %}
{# 在这里编写上一篇文档的HTML结构 #}
{% endprevArchive %}
{# 获取下一篇文档 #}
{% nextArchive next %}
{# 在这里编写下一篇文档的HTML结构 #}
{% endnextArchive %}
Between these two tag pairs, you can access the objects representing the previous or next document (in the example, respectively)'}
]prevandnext），and through periods（.）to access various attributes of these documents.
Learn more about the available data fields.
prevandnextThe object provides rich documentation information, enough for us to build a beautiful and practical navigation link. The following are some commonly used fields:
Id: The unique ID of the document.TitleThe title of the document. This is the most commonly used and most important display content.LinkThe URL link of the document. The address to which the user navigates when clicking on the navigation.Description[en]: The introduction or description of the document. It can be displayed as supplementary information in navigation.Thumb[en]: The thumbnail address of the document. If the design allows, displaying a thumbnail can enhance visual appeal.CategoryIdThe ID of the document's category.ViewsThe number of views of the document.
Combining these fields, we can easily build personalized navigation blocks. It is worth noting that not all documents have 'Previous' or 'Next' (for example, the first article in a category does not have 'Previous', and the last article does not have 'Next'), and we usually combine these tags when using them.ifEnsure navigation is displayed only when data exists with condition checks.
Practice Case: Create an elegant navigation block.
Assuming we want to add a left-right split navigation block at the bottom of each article, with 'Previous Article' on the left and 'Next Article' on the right. If there are no more articles in a direction, display 'No More' or 'Back to List'.
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="nav-label">上一篇：</span>
<h4 class="nav-title">{{ prev.Title }}</h4>
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb">
{% endif %}
</a>
{% else %}
<span class="no-more">没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="nav-label">下一篇：</span>
<h4 class="nav-title">{{ next.Title }}</h4>
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb">
{% endif %}
</a>
{% else %}
<span class="no-more">没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Through such code structure, we not only achieve the basic previous and next navigation function, but also provide users with a richer and more user-friendly browsing experience through conditional judgment and flexible field invocation. When the mouse hovers over the navigation link, its title attribute (title）Can also provide more information, balancing accessibility and user-friendliness.
Summary
Anqi CMS'sprevArchiveandnextArchive
Common Questions (FAQ)
Q1: If a category has only one article, or if the current article is the first/last in the category,prevArchiveandnextArchiveHow will the tag behave?
A1: As described in the article,prevArchiveandnextArchiveThe tag will not return any data when there is no corresponding document. Therefore, **it is always recommended to use{% if prev %}or{% if next %}Such conditional judgment wraps the output of navigation links.If the judgment is false (i.e., there is no previous or next article), you can choose to display a prompt text (such as 'No more') or provide a link back to the current category list page to guide the user to continue browsing.
Q2:prevArchiveandnextArchiveCan the tag achieve cross-category navigation? For example, if the current article belongs to 'A Category', do I want the 'next article' link to an article in 'B Category'?
A2:prevArchiveandnextArchiveTags are usually in thecontext (such as the same category, the same model)Locate the previous and next chapters.They are designed to provide navigation in a logically continuous content stream.archiveListTag for more advanced customization development.This usually involves querying a list of documents under specific conditions, and then manually calculating the target document's ID and link based on the current document's ID and sorting rules, which is much more complex than using these two tags directly.
Q3: UseprevArchiveandnextArchivetags will affect website performance?
A3: Not. Anqiy CMS is developed based on Go language, known for its excellent high concurrency processing capability and lightweight features.prevArchiveandnextArchiveThe tag has been highly optimized in the underlying design, allowing for efficient querying and returning of data.In addition, Anqi CMS also supports various optimization measures such as static caching, further ensuring that the website can maintain extremely fast loading speed and response performance when handling these dynamic contents, with a negligible impact on the overall website performance.