What is the difference between the variable output and logic control tags in AnQiCMS templates?

In AnQiCMS template development, we often deal with two core template elements: variable output tags and logical control tags.They all serve to present dynamic content to the user, but there are essential differences in functional positioning, syntax form, and actual function.Understanding and mastering their similarities and differences is the key to efficiently building AnQiCMS website templates.

Variable output tags({{ ... }})：Direct window of data display

Imagine that your website is a beautifully crafted showcase, and the variable output tag is like the merchandise displayed in the showcase. Their main responsibility isdisplay data directly on the page. The tags in AnQiCMS are usually enclosed in double curly braces{{ ... }}in the form of.

When the AnQiCMS backend program passes data to the template, the data is organized into various variables.You can output labels through variables, easily printing the values of these variables to the HTML page.This data may come from system configuration, article content, classification information, user data, or even dynamic calculation results.

For example, if you want to display the title of the current article, you might see{{archive.Title}}If you need to display the name of the website, it is{{system.SiteName}}In the loop, the data of each item can be accessed through{{item.Link}}or{{item.CreatedTime}}.

It is worth mentioning that AnQiCMS also provides a powerful filter (Filter) function that can be used in conjunction with variable output tags.The filter allows you to process, format, or convert the data before output. For example,{{item.CreatedTime|stampToDate("2006-01-02")}}Then we can format the timestamp into the familiar date format, and{{archive.Content|truncatechars:100}}It can extract the first 100 characters of the article content and add an ellipsis. These filters enhance the flexibility of variable output, making the data presentation more in line with design requirements.

In addition, you can also use it inside the template{% set variable = value %}to temporarily define variables and use them in subsequent{{variable}}This provides convenience for data processing inside the template.

Logical control tags ({% ... %}Commander of the template structure

Different from the variable output tag, the logical control tag does not display content directly on the page. They are the 'commander' or 'architect' of the template, responsible forControl the structure, layout, and dynamic behavior of the templateIn AnQiCMS, these tags are usually enclosed in single curly braces and percentages{% ... %}The form appears. They determine what content is presented when and how, and are indispensable tools for building complex, dynamic templates.

AnQiCMS provides various logical control tags, each with its specific purpose:

1. Conditional judgment ({% if ... %}/{% elif ... %}/{% else %}/{% endif %}):This is the most basic control flow tag, used to display or hide content based on specific conditions.For example, you can determine if a user is logged in, or if a variable has a value, and then display different content blocks accordingly.{% if archive.Thumb %}The image tag is rendered only when the article has a thumbnail.

2. Loop through ({% for ... in ... %}/{% empty %}/{% endfor %}):When you need to display list data, such as article lists, category lists, friend links, etc., loop tags come into play.It will iterate over a collection (array or slice) and repeat the rendering of the internal code for each item.{% empty %}It can provide alternative content when the set is empty, improving the user experience.

3. The template includes ({% include "template_file.html" %}):To improve the reusability and maintainability of the template, we can split the common parts such as header, footer, sidebar, or reusable small components into independent files.includeThe tag can be used to include these code snippets into the current template as needed, reducing repetitive writing. It can also be usedwithKeywords can pass local variables to the included template.

4. Template inheritance ({% extends "base.html" %}/{% block ... %}/{% endblock %}):This is a powerful feature for building large website templates. By defining a basic skeleton template (usually calledbase.html），and useblockTags define reusable areas. Subtemplates simplyextendsthe parent template, and then rewrite the correspondingblockIt can be done, greatly simplifying the management of multi-page layouts.

5. Macro definition ({% macro ... %}/{% endmacro %}):Macros are similar to functions in programming languages, allowing you to define reusable code snippets and pass parameters.This is very useful for creating small, self-contained UI components that can be called multiple times in a template.

6. Variable assignment ({% with ... %}/{% endwith %}):AlthoughsetIt can also be assigned, butwithTags are often used to define a temporary variable scope, or inincludePass parameters in the tag.

Core differences and collaborative functions

The most core difference lies in:The variable output tag is "What to do" - display data; while the logical control tag is "How to do it" and "When to do it" - control the presentation logic and template structure.The variable isThe content itselfAnd the logical control tag isThe container and scheduler of the content.

You can imagine variables as raw materials (for example, the title, content, and image URL of an article), and logical control tags are like robotic arms and control panels on a production line. The robotic arms (forThe loop will fetch a batch of raw materials (article list), control panel (ifThe condition will judge the quality of each raw material (whether there is a thumbnail) and then decide whether to send it to the packaging processimgTags and{{item.Thumb}})

They always work together:

• You might use{% for item in archives %}Loop through the article list and then use{{item.Title}}Output the title of each article.
• You might use{% if system.SiteLogo %}Determine if the website has set a Logo, if it has been set, then use<img src="{{system.SiteLogo}}" alt="{{system.SiteName}}">Output the Logo image.

Proficiently using these two tags, you will be able to build a beautiful and functional AnQiCMS website template. Get a deeper understanding of the specific parameters and usage of each tag (especiallydesign-tag.mdandtag-*.mdWait for the document), follow the AnQiCMS template conventions, and make good use of filters, modularization, etc., which will make your template development work twice as effective. If you encounter variables that cannot be output normally, you can usedumpFilter comes in