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 all 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 Django template engine, which makes the use of variables intuitive and easy to learn. In template files (usually.htmlFormat, and store in/templatedirectory), we mainly use two symbols to operate content: double curly braces{{ }}are used to output the value of variables, while single curly braces and percentage signs{% %}Then it is used to define logical structures, such as conditional judgments or loops, and is sometimes also 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 with double curly braces. For example, when you want to display the current article title on a page, if the backend has already passed the article data to the template and namedarchiveThe object can be displayed easily like this:
<h1>{{ archive.Title }}</h1>
Here are thearchiveis an object,Titlewhich is the attribute of this object. Through.(Point operator)We can delve into the properties of the object layer by layer. AnQiCMS variables are usually named following the camel case naming convention, i.e., the first letter of each word is capitalized, for examplearchive.Id/archive.Link.
Define new variables in the template
Sometimes, we may need to create some temporary variables inside the template for subsequent calculations, combinations, or use within local code blocks. AnQiCMS providessetandwithTwo ways to define variables.
setLabels are 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>
whilewithThe label is more commonly used to define a temporary, scope-limited variable, which is usually associated withincludeLabel combination usage, to pass specific data to the imported sub-template, or to declare local variables within a certain code block, and then{% endwith %}end its scope.
{% with headerTitle = "安企CMS官方网站" %}
<h1>{{ headerTitle }}</h1>
{% endwith %}
{# 在这里,headerTitle 变量将不再可用 #}
Using built-in tags to retrieve and display data
AnQiCMS is integrated with many powerful tags, which can directly obtain configuration data, content data, etc. from the background, and provide two commonly used ways to display variable values: direct output or defining as a variable first and then output.
To get the website name, for example, 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 at 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 }}">
Similar tags includecontact(Used to obtain contact information, such as){% contact cellPhone with name="Cellphone" %}{{ cellPhone }}),tdk(Used to obtain page SEO-related TDK information),archiveDetail(Obtain article details),categoryDetail(Obtain category details) andpageDetail(Get single page details)etc. They all follow this pattern of getting which field to fetch.with name="字段名称"to specify which field to fetch.
Process list data:forLoop
In the website, we often need to display article lists, product lists, and other collection data. AnQiCMS'sforLoop tags can iterate over these data sets, and in each iteration, the current item is assigned to a temporary variable for us to display its properties.
For example, to display the latest ten articles list, you can usearchiveListTags:
{% 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.TitleAccess and display the various attributes of the article in English.forloop.CounterThese built-in variables can also help us get the current index and other information of the loop.
Conditional display:ifstatement
Sometimes, we may need to decide whether to display a variable or code block based on specific conditions.ifStatements allow us to make logical judgments.
For example, if an article does not have a thumbnail, we do 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 variety of filters (Filters) to process variables, such as formatting, truncation, escaping, etc. When using filters, simply add|(Pipe character)and filter name.
|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's timestamp is 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