How to use AnQiCMS template syntax to display dynamic data?
AnQiCMS (AnQiCMS) is an efficient and flexible content management system, one of its core advantages lies in its ability to dynamically present background data on the front end of the website.Whether it is to display an article list, product details, or site configuration information, AnQiCMS provides an intuitive and powerful template syntax to help you achieve this goal.Understanding and mastering these template syntaxes is the key to building highly customized websites.
AnQiCMS's template engine uses syntax similar to Django and Blade, which allows users familiar with other mainstream CMS template systems to quickly get started.Its core idea is to obtain and display dynamic data through specific tags and double curly braces, and to control the display of content with logical tags.
Master the core syntax: variables and logic
In the AnQiCMS template, you will mainly come across two basic syntax structures:
- double curly braces
{{ 变量 }}: Used to directly output the value of variables. These variables can be system predefined or dynamic data fields obtained from the backend. - Percent sign curly braces
{% 标签 %}Used to implement logic control, such as conditional judgments (if-else), loop traversal (for), and calling various functional tags. These tags usually require a corresponding end tag, such as{% if 条件 %}...{% endif %}or{% for item in 列表 %}...{% endfor %}.
Next, we will discuss how to use these syntaxes to display dynamic data through specific examples.
Get basic site information
Every website cannot do without some global settings, such as website name, Logo, contact information, etc. AnQiCMS providessystemandcontacttags to easily obtain this information.
Assuming you want to display the website name and Logo at the top of the website page:
<header>
<a href="/">
<img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}" />
</a>
<h1>{% system with name='SiteName' %}</h1>
</header>
here,{% system with name='SiteLogo' %}It will directly output the website Logo address configured in the background,{% system with name='SiteName' %}The website name will be output. This concise writing allows you to ignore how the data is extracted from the database, and just focus on the names of the required fields.
Similarly, contact information such as phone numbers, addresses, WeChat QR codes, and even customized contact information in the background can be accessed throughcontactLabel retrieval. For example, display contact information and custom WhatsApp:
<footer>
<p>联系电话：{% contact with name='Cellphone' %}</p>
{# 如果您在后台自定义了WhatsApp联系方式 #}
<p>WhatsApp：{% contact with name='WhatsApp' %}</p>
</footer>
Display content list: Articles, products and categories
The core of a website is content, whether it is articles, products, or news, they are usually displayed in the form of lists.archiveListTags are the tools to obtain these dynamic content lists. WithforLoop, you can iterate and display the title, link, introduction, thumbnail, etc. of each item.
For example, display the latest 10 articles published on the homepage:
<section class="latest-articles">
<h2>最新文章</h2>
<ul>
{% archiveList archives with moduleId="1" type="list" limit="10" order="id desc" %}
{% for item in archives %}
<li>
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
<h3>{{ item.Title }}</h3>
<p>{{ item.Description|truncatechars:100 }}</p> {# 截取简介前100个字符 #}
<span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% empty %}
<li>暂无文章内容。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
In this code:
{% archiveList archives ... %}Got a namedarchives.moduleId="1"Indicate fetching the article model (usually the ID of the article model is 1).type="list"Means only the specified number of lists is obtained, not paginated.limit="10"Limited to displaying only 10.order="id desc"Sort by ID in descending order, that is, the most recently published is at the top.
{% for item in archives %}Traverse this list, and in each iteration, assign the current article data toitemVariable.{{ item.Link }},{{ item.Title }},{{ item.Thumb }},{{ item.Description }},{{ item.CreatedTime }}Output the link, title, thumbnail, description, and creation time of the article separately.|truncatechars:100Is a filter used to truncate the first 100 characters of a string and add an ellipsis.stampToDate(item.CreatedTime, "2006-01-02")It is a time formatting function that formats timestamps in the form of "Year-Month-Day."{% empty %}the block will bearchivesIt is displayed when the list is empty, providing a friendly user experience.
In addition to articles, you can also usecategoryIdParameters to filter content under specific categories or throughcategoryListTags to get the list of categories themselves and through nestedarchiveListto display articles under each category.
Display detailed content of a single item: The magic of custom fields
When a user clicks on an article or product in the list, they will enter the detail page. On the detail page,archiveDetailTags are the key to obtaining all information of the current content. The "Flexible Content Model" feature of AnQiCMS is fully demonstrated here, where you can customize various fields (such as article author, product price, color, size, etc.) and easily call them in templates.
For example, display the full content of an article, including its custom "source" field:
<article>
<h1>{% archiveDetail with name="Title" %}</h1>
<div>
<span>作者：{% archiveDetail with name="author" %}</span> {# 假设您自定义了“author”字段 #}
<span>来源：{% archiveDetail with name="source" %}</span> {# 假设您自定义了“source”字段 #}
<span>发布日期：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</span>
<span>阅读量：{% archiveDetail with name="Views" %}</span>
</div>
<div class="article-content">
{% archiveDetail articleContent with name="Content" %}
{{ articleContent|safe }} {# 这里的 |safe 过滤器非常重要，因为它会阻止HTML内容被转义，从而正常显示文章中的图片、格式等 #}
</div>
</article>
In this example:
{% archiveDetail with name="Title" %}Directly output the title of the current document.{% archiveDetail with name="author" %}and{% archiveDetail with name="source" %}Is an example of calling a custom field. As long as you add these fields to the content model in the background, you can call them directly by name.{{ archive.CreatedTime }}Directly access the current document objectarchiveThe property (AnQiCMS will automatically provide a namedarchiveglobal object).{% archiveDetail articleContent with name="Content" %}{{ articleContent|safe }}It is completed in two steps: first, assign the content to a temporary variablearticleContentThen use|safeThe filter ensures that HTML content is rendered correctly.
If you want to iterate over all custom parameters,archiveParamsTags can be very useful:
<div class="custom-params">
{% archiveParams params %}
{% for item in params %}
<p>{{ item.Name }}：{{ item.Value }}</p>
{% endfor %}
{% endarchiveParams %}
</div>
This will display all the document custom parameters set in the background (such as "Author", "Source", etc.) in the form of key-value pairs.
Flexible conditional judgment and pagination display
In content operations, it is often necessary to display or hide content based on certain conditions, or to implement pagination functions.
Conditional judgmentFor example, determine whether the current article has a thumbnail and decide the display method based on whether there is an image:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
<img src="/public/static/images/default-thumb.png" alt="默认缩略图" />
{% endif %}
Paginated displayPagination is an essential function for long content lists. When usingarchiveListSet a tag,typeis set to"page", then combinepaginationLabels, it can easily realize pagination navigation.
`twig {# First, get the list of paginated content #} {% archiveList archives with moduleId=“1” type=“page” limit=“10” order=“id desc” %}
{# 循环显示文章内容 #}
{# ... 循环代码与上文类似 ... #}
{% endarchiveList %}
{# Display pagination navigation again #} <div