AnQiCMS (AnQiCMS) is an efficient and flexible content management system. One of its core advantages is its ability to dynamically present backend data on the website front end.Whether it is displaying article lists, product details, or site configuration information, AnQiCMS provides 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 adopts syntax similar to Django and Blade, which allows users familiar with other mainstream CMS template systems to get started quickly in English.The core idea is to retrieve and display dynamic data through specific tags and double curly braces, and to control the display of content using logical tags.
Master the core syntax: variables and logic
In AnQiCMS templates, you will mainly encounter 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
{% 标签 %}English for implementing logical 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 display dynamic data through specific examples.
Get basic site information
Each website cannot do without some global configurations, 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' %}will directly output the background configuration of the website Logo address,{% system with name='SiteName' %}Then, the website name will be output. This concise writing allows you to pay no attention to how the data is extracted from the database, but only focus on the names of the required fields.
Similarly, contact information such as phone number, address, WeChat QR code, or even the contact information you customize on the back-end can be accessed throughcontactLabel acquisition. For example, display contact phone numbers 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 the website lies in the content, whether it is articles, products, or news, they are usually displayed in a list form.archiveListTags are the tools to obtain these dynamic content lists.配合forLoop, you can iterate and display the title, link, introduction, thumbnail, and other content of each item.
For example, display the latest 10 articles 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"Specify the retrieval of the article model (usually the ID of the article model is 1).type="list"Indicate that only a specified number of items should be retrieved, rather than paginated.limit="10"Limit to displaying only 10 items.order="id desc"Arrange according to ID in descending order, that is, the most recently published is in front.
{% for item in archives %}Traverse this list, and assign the current article data to it each time the loop runs.itema variable.{{ item.Link }},{{ item.Title }},{{ item.Thumb }},{{ item.Description }},{{ item.CreatedTime }}English translation: Output the link, title, thumbnail, description, and creation time of the article.|truncatechars:100It is a filter used to truncate the first 100 characters of a string and add an ellipsis.stampToDate(item.CreatedTime, "2006-01-02")is a time formatting function, which formats the timestamp into the form of “year-month-day”.{% empty %}The block will bearchivesis 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 obtain the list of categories themselves, and througharchiveListto display articles under each category.
Display single content detail: 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,archiveDetailThe tag is the key to obtaining all the information of the current content.The "Flexible Content Model" feature of AnQiCMS is fully demonstrated here, allowing you to customize various fields (such as article author, product price, color, size, etc.) and easily call them in the template.
For example, display the full content of an article, including its custom "article 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" %}This is an example of calling a custom field. As long as you have added these fields to the content model in the background, you can call them directly by the field name.{{ archive.CreatedTime }}This is direct access to the current document object.archiveThe attribute (AnQiCMS will automatically provide a namedarchiveglobal object).{% archiveDetail articleContent with name="Content" %}{{ articleContent|safe }}It can be completed in two steps: first, assign the content to a temporary variablearticleContent, and then use|safeThe filter ensures that the HTML content is rendered correctly.
If you want to iterate through all custom parameters,archiveParamsTags will 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 custom document parameters set in the background (such as "author
Flexible condition judgment and pagination display
In content operation, it is often necessary to display or hide content based on certain conditions, or to implement pagination functionality.
Conditional judgment： For example, determine if the current article has a thumbnail and decide the display method accordingly 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 %}
Display in pages：
Pagination is an essential feature for lists with a large amount of content. In usingarchiveListwilltypeset"page"then combinepaginationLabels, you can easily achieve pagination navigation.
English
{# 循环显示文章内容 #}
{# ... 循环代码与上文类似 ... #}
{% endarchiveList %}
{# Again display pagination navigation #}