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, grammatical 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 for data display
Imagine that your website is a beautiful showcase, and variable output tags are like the items displayed in the showcase. Their main responsibility isdisplay data directly on the pageIn AnQiCMS, these tags usually appear in double curly braces{{ ... }}.
When the backend program of AnQiCMS passes data to the template, these data will be organized into various variables.You can output labels through variables, easily 'print' the values of these variables to the HTML page.This data may come from system configuration, article content, category 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}}to access.
It is worth mentioning that AnQiCMS also provides a powerful filter (Filter) function that can be used in combination with variable output tags.The filter allows you to process, format, or convert the data before outputting it.{{item.CreatedTime|stampToDate("2006-01-02")}}It can format the timestamp into the date format we are familiar with, and{{archive.Content|truncatechars:100}}Then the first 100 characters of the article content can be truncated and an ellipsis can be added. 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}}parts, which provides convenience for data processing inside the template.
Logical control tag ({% ... %}）：Template structure commander
Different from variable output tags, logical control tags do 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 represented by single curly braces and percent signs{% ... %}The form of appearance. They determine what content is presented, when, and how, and are indispensable tools for building complex, dynamic templates.
AnQiCMS provides various logic control tags, each with its specific purpose:
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 there is a thumbnail in the article.Loop through (
{% for ... in ... %}/{% empty %}/{% endfor %}):When you need to display list data, such as article list, category list, friend links, etc., the loop tag comes into play.It will traverse a collection (array or slice) and repeatedly render its internal code for each item in the collection.{% empty %}Blocks can provide fallback content when the collection is empty, enhancing user experience.Template includes (
{% include "template_file.html" %}):To improve the reusability and maintainability of the template, we can break down the common parts or reusable small components such as the header, footer, and sidebar into independent files.includeLabels can be used to insert these code snippets into the current template as needed, reducing repetition. It can also pass local variables to the included template.withKeywords can pass local variables to the included template.Template inheritance (
{% extends "base.html" %}/{% block ... %}/{% endblock %}):This is a powerful function for building large-scale website templates. By defining a basic skeleton template (usually calledbase.html) and usedblocktag definitions for areas that can be overwritten. The child template onlyextendsthe parent template, then rewrite the corresponding ones.blockEnglish, greatly simplifies the management of multi-page layout.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.Variable assignment (
{% with ... %}/{% endwith %}):Althoughsetcan also be assigned, butwithtags are more often used to define a temporary variable scope, or inincludeto pass parameters.
The core difference and synergy
The most core difference lies in:The variable output label is 'What to do' - displaying data; while the logical control label is 'How to do it' and 'When to do it' - controlling the presentation logic and template structure of the data.Variables areThe content itselfAnd the logic 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 as the robotic arms and control panels on the production line. The robotic arms (forLoop) will grab a batch of raw materials (article list), control panel (ifCondition) will judge the quality of each raw material (whether there is a thumbnail) and then decide whether to send it to the packaging process (imgTags and{{item.Thumb}}).
They always work together:
- You might use
{% for item in archives %}Loop through the article list and then{{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<img src="{{system.SiteLogo}}" alt="{{system.SiteName}}">Output the Logo image.
Familiarize yourself with these two tags, and you will be able to build AnQiCMS website templates that are both beautiful and functional. Get a deeper understanding of the specific parameters and usage of each tag (especiallydesign-tag.mdandtag-*.mdEnglish document), follow the template conventions of AnQiCMS, and make good use of filters, modularization, and other techniques, which will greatly improve the efficiency of your template development work. If you encounter variables that cannot be output normally, you can usedumpFilterer to