AnQiCMS template development: The exquisite implementation of conditional rendering for the previous/next document
In content-based websites, guiding users to browse related content is one of the key strategies to enhance user experience and deepen the value of the website.Whether it is a blog article, product detail page, or news information, a reasonable 'Previous' and 'Next' navigation can effectively extend the user's stay on the site and encourage them to discover more interesting content.AnQiCMS as an efficient and customizable enterprise-level content management system, provides strong and intuitive template tag support.Today, let's delve into how to intelligently judge whether the current document in AnQiCMS template has a 'previous article' or a 'next article', and accordingly flexibly render content to make your website navigation more elegant.
Deep understanding of AnQiCMS template logic
AnQiCMS's template engine adopts a syntax style similar to Django, which is widely appreciated by developers for its simplicity and power. You will find that in the template files, variables are usually enclosed in double curly braces{{变量}}Package for outputting data; logical control and functional tags are defined using curly braces followed by a percent sign{% 标签 %}to define, and most functional tags require corresponding end tags, such as{% if ... %}...{% endif %}Used for conditional judgment,{% for ... %}...{% endfor %}Used for iteration. This design concept allows even non-professional developers to master the customization and modification of templates in a short period of time.
Core Function:prevArchiveWithnextArchivetags
To facilitate the connection between content pages, AnQiCMS has built-in two very practical template tags:)prevArchiveandnextArchive.Their function is obvious, that is, to obtain the "previous" and "next" document data of the current document.These tags do not require any parameters when used, they will intelligently find adjacent documents based on the current document context (usually the publishing time or ID sequence).
For example, when you are viewing a document detail page,{% prevArchive prev %}Label will try to find a document that was published earlier or has a smaller ID than the current document, and assign its data toprevvariable; Similarly,{% nextArchive next %}Then it will look for documents with a later release time or a higher ID and assign them tonexta variable.
It is worth noting that if the current document is the first in the series (without a previous one) or the last one (without a next one), then the correspondingprevArchiveornextArchiveThe label will not return any data, or in other words, the variables returned will be a 'null' value.While this 'empty' characteristic is the key to our conditional rendering.
The art of conditional renderingifstatement
In the template world of AnQiCMS,{% if ... %}标签是实现条件渲染的核心利器。它允许您根据某个条件的真假来决定哪些内容应该被渲染,哪些应该被隐藏或替换。当prevArchiveornextArchiveThe variables declared when tags do not find corresponding documents (such as the one mentioned above) will be empty, or evaluated as in boolean contextprevandnextempty, or evaluated as false in boolean contextfalseWe are using this point to determine whether to display the 'Previous' or 'Next' navigation links.
For example, if you use{% prevArchive prev %}Declared a namedprevvariable, then you can use{% if prev %}Check if this variable contains data. Ifprevthe variable has data,ifthe condition is true, you can render the link of the previous article, and use{{ prev.Link }}and{{ prev.Title }}to display its link and title; conversely, ifprevThe content inside the loop will not be rendered, instead, the content of the block will be displayed.ifCondition is false, you can choose not to render the link, or render a prompt text, such as 'None':
English
<a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇:{{ prev.Title }}</a>
{% else %} English
<span>上一篇