Development of AnQiCMS template: A skillful implementation of conditional rendering for 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, 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 powerful and intuitive template tag support in this aspect.Today, let's delve into how to intelligently judge whether the current document exists in the AnQiCMS template, and based on this, 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 loved by developers for its simplicity and power. You will find that in template files, variables are usually enclosed in double curly braces{{变量}}A wrapper used for outputting data; logical control and functional tags are represented by single 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 looping. This design concept allows even non-professional developers to master the customization and modification of templates in a short period of time.

Core function:prevArchivewithnextArchiveTag

To facilitate the connection between content pages, AnQiCMS is built with two extremely practical template tags:prevArchiveandnextArchive. Their function is self-evident, it is used to obtain the data of the 'previous' and 'next' documents of the current document.These tags do not require any parameters when used, they will intelligently search for adjacent documents based on the current document context (usually the publication time or ID sequence).

For example, when you are viewing a document detail page,{% prevArchive prev %}The tag tries to find a document that was published earlier or has a smaller ID than the current document and assigns its data toprevthe variable; similarly,{% nextArchive next %}The system will look for documents with a later publication date or a larger ID and assign them tonextVariable.

It is noteworthy that if the current document is the first in the series (without a previous one) or the last (without a next one), then the correspondingprevArchiveornextArchiveThe tag will not return any data, or, the variables returned will be an 'empty' value.It is this 'empty' characteristic that has become the key to our conditional rendering.

The art of conditional rendering: skillfully usedifStatement.

In the world of AnQiCMS templates,{% if ... %}The tag is the core tool for conditional rendering. It allows you to decide which content should be rendered, which should be hidden or replaced based on the truth value of a certain condition. WhenprevArchiveornextArchiveWhen a label does not find the corresponding document, the variables it declares (such as the one mentioned above) will be empty, or will be evaluated as in boolean contextprevandnext)}falseThis is the point we are using to determine whether to display the 'Previous' or 'Next' navigation links.

For example, if you use{% prevArchive prev %}Declared a namedprevvariable, then you can go through{% if prev %}Check if this variable contains data. IfprevThe variable has data,ifThe condition is true, you can render the 'Previous Article' link, and use{{ prev.Link }}and{{ prev.Title }}to display its link and title; conversely, ifprevIt is empty,ifIf the condition is false, you can choose not to render the link or render a prompt text, such as 'none':

`twig {# Get previous document data #} {% prevArchive prev %} {% if prev %}

<a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇：{{ prev.Title }}</a>

{% else %}

<span>上一篇