In AnQiCMS templates, we often need to handle various data, whether it is the name of the website, the title of the article, or the product details, these dynamic contents need to be carried and displayed through variables.Understanding how to define and display variables in templates is the core of AnQiCMS template development.
AnQiCMS uses a syntax similar to the Django template engine, making variable usage intuitive and easy to learn. In the template file (usually.htmlFormat, and placed in/templateDirectory), we mainly use two symbols to operate content: double curly braces{{ }}Used to output the value of variables, while single curly braces and percentage signs{% %}It is used to define logical structures, such as conditional judgments or loops, and is also sometimes used to call specific data tags and define variables.
Display of basic variables
The most direct way to display a variable is to enclose the variable name in double curly braces. For example, if you want to display the current article title on a page and the backend has already passed the article data to the template and named itarchiveAn object, you can display it like this easily:
<h1>{{ archive.Title }}</h1>
HerearchiveIt is an object,TitleThen it is the attribute of this object. Through.The dot operator, we can delve into the properties of the object layer by layer. AnQiCMS usually follows the camel case naming convention for variable names, that is, the first letter of each word is capitalized, for examplearchive.Id/archive.Link.
Define a new variable in the template
Sometimes, we may need to create some temporary variables inside the template for subsequent calculations, combinations, or use in local code blocks. AnQiCMS providessetandwithDefine variables in two ways.
setThe tag is used to define a new variable and assign a value in the current template file. The scope of this variable will last until the end of the current template file.
{% set myTitle = "欢迎来到安企CMS的世界" %}
<p>{{ myTitle }}</p>
AndwithLabels are often used to define a temporary, scope-limited variable, it is usually associated withincludeTags are used to combine, to pass specific data to imported sub-templates, or to declare local variables within a code block, and to{% endwith %}end their scope.
{% with headerTitle = "安企CMS官方网站" %}
<h1>{{ headerTitle }}</h1>
{% endwith %}
{# 在这里，headerTitle 变量将不再可用 #}
Use built-in tags to retrieve and display data
AnQiCMS is built-in with many powerful tags, which can directly obtain configuration data, content data, and so on, and provide two commonly used ways to display variable values: direct output or define as a variable first and then output.
For example, to get the website name, we can usesystemtag. If you just want to display the website name directly at a certain position, you can write it like this:
<p>我们的网站名称是：{% system with name="SiteName" %}</p>
If you want to assign the website name to a new variable so that it can be used flexibly in multiple locations in the template or for further processing, you can specify the variable name after the tag:
{% system siteBrandName with name="SiteName" %}
<p>网站品牌：{{ siteBrandName }}</p>
<meta property="og:site_name" content="{{ siteBrandName }}">
There are similar tags such ascontactUsed to obtain contact information, such as{% contact cellPhone with name="Cellphone" %}{{ cellPhone }})、tdkUsed to obtain page SEO-related TDK information, such asarchiveDetailTo obtain article details, such ascategoryDetailAnd to obtain category details, such aspageDetail(Get single page details) and so on. They all follow this pattern ofwith name="字段名称"to specify which field to retrieve.
to process list data:forLoop
In websites, we often need to display lists of articles, product lists, and other collection data. AnQiCMS'sforThe loop tag can iterate over these data collections and assign the current item to a temporary variable in each iteration for us to display its properties.
For example, to display the list of the latest ten articles, you can cooperate witharchiveListTags:
{% archiveList articles with type="list" limit="10" %}
<ul>
{% for item in articles %}
<li>
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<small>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</small>
</a>
</li>
{% empty %}
<li>暂无文章</li>
{% endfor %}
</ul>
{% endarchiveList %}
In this example,for item in articlesIt will assign the current article data toitemvariable. We can then useitem.Link/item.TitleIn order to access and display the various properties of the article.forloop.CounterThese built-in variables can also help us obtain information such as the current index of the loop.
Conditional display:ifStatement.
Sometimes, we may need to decide based on specific conditions whether to display a variable or code block.ifThe statement allows us to make logical judgments.
For example, if an article does not have a thumbnail, we will not display the image area:
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% else %}
<img src="{% system with name="SiteLogo" %}" alt="默认图片">
{% endif %}
Use filters to beautify and process variables
AnQiCMS provides a rich set of filters (Filters) to process variables, such as formatting, truncation, escaping, etc. When using filters, just add them to the variable name with|(Pipe symbol) and filter name is enough.
|safe:When the variable content contains HTML code and you do not want it to be escaped and displayed, use|safeThe filter ensures that HTML code is correctly parsed by the browser. This is particularly important for displaying rich text editor content.<div>文章内容：{{ archive.Content|safe }}</div>|stampToDate:AnQiCMS timestamps are usually stored in the form of 10-digit numbers,stampToDatethe function can format it into the date and time format we need. “`twigUpdate time: {{ stampToDate(archive.UpdatedTime, “2006年0