How to display data of custom content models (such as products, events) in AnQiCMS?
Manage and display custom content models in Anqi CMS, such as product lists, event details, etc., which is a reflection of its powerful flexibility.The design philosophy of AnQi CMS aims to allow users to highly customize the content structure according to their own business needs and present these structured data in a直观, rich manner on the website front end.
Foundation of flexible content models
Firstly, we need to understand the flexible content model feature of Anqi CMS.It allows you to transcend the traditional 'article' category, creating content types with unique field sets.For example, a "product" model may include fields such as price, inventory, SKU, and multi-image groups;And an 'event' model may require start/end time, location, participant number limits, and other fields.These custom models are configured through the "content model" management on the backend, where you can define the name of the model, the table name, and most importantly—the custom fields it contains (such as single-line text, numbers, multi-line text, radio, check boxes, drop-down selections, etc.).These fields are the key to storing and displaying personalized data.
When you add content to these custom models in the background, it is these pre-defined field information that you fill in.These structured data will be presented on your website through the powerful template engine of Anqi CMS.
The template and label: the core of data display
AnQi CMS adopts a template engine syntax similar to Django, making content display both intuitive and powerful. In the template file, you will mainly encounter two types of tags: double curly braces used for outputting variables{{变量}}, and the single curly brace percent sign used for logical control and data acquisition{% 标签 %}. All template files are stored in/templatedirectory, and can be accessed through customized filenames (such as{模型table}/detail.htmlor{模型table}/list.html）to match and render pages for specific content models.
To display custom content model data on the website frontend, you need to be proficient in the following core template tags:
1. Display custom model list data:archiveListTag
When you need to display multiple products, events, or other custom model content on a page,archiveListTags are your preferred tool. This tag can extract a list of data that meets your requirements from the database according to your needs.
While usingarchiveListWhen, several key parameters need to be paid attention to:
moduleIdThis is the core to specify which custom model data you want to retrieve. For example, if your product model table name isproductthenmoduleIdShould be set to the corresponding ID (which can be viewed in the background content model or by using the model name).categoryIdIf you have set categories for custom models (for example, product categories: electronic products, household goods), this parameter can be used to filter content under specific categories.limit: Controls the number of data items returned, for examplelimit="10"It will display 10 items.type: Usually set totype="list"Get a fixed number of lists, ortype="page"to support pagination.
{# 示例：展示产品模型下的最新10个产品 #}
{% archiveList products with moduleId="您的产品模型ID" order="id desc" limit="10" %}
{% for item in products %}
<div>
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{# 假设您的产品模型有一个自定义字段“Price”和“Material” #}
<p>价格: {{item.Price}}</p>
<p>材质: {{item.Material}}</p>
<p>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</p>
</div>
{% endfor %}
{% endarchiveList %}
It is important to note here that custom fields (such asPriceorMaterialIt can be accessed directlyitem.FieldNameAccessed in this form. If your custom field is an image group (for exampleproductImages), you may need to usefora loop to iterate over these images:
{# 示例：展示产品模型下的图片组自定义字段 #}
{% archiveList products with moduleId="您的产品模型ID" limit="1" %}
{% for item in products %}
{# 假设 productImages 是一个自定义的图片组字段 #}
{% if item.productImages %}
<div class="product-gallery">
{% for image_url in item.productImages %}
<img src="{{image_url}}" alt="{{item.Title}}图集">
{% endfor %}
</div>
{% endif %}
{% endfor %}
{% endarchiveList %}
2. Display detailed data of a custom model:archiveDetailTag
When a user clicks on a product to enter its detail page, you need to display all the information of the product.archiveDetailLabels are born for this purpose, they are used to obtain the custom model data of a single page or specified ID.
In the custom model detail page, you can directly go through{{archive.FieldName}}Visit its standard fields (such asTitle/Content/Description) and custom fields (such asPrice/Material)
{# 示例：产品详情页，展示所有信息 #}
<article>
<h1>{{archive.Title}}</h1>
<img src="{{archive.Logo}}" alt="{{archive.Title}}主图">
<p>简介: {{archive.Description}}</p>
{# 直接访问自定义字段 #}
<p>产品价格: {{archive.Price}}</p>
<p>库存数量: {{archive.Stock}}</p>
{# 遍历所有自定义参数，适用于不确定自定义字段名称的情况 #}
{% archiveParams params %}
<div>
<strong>详细参数:</strong>
<ul>
{% for param in params %}
<li>{{param.Name}}: {{param.Value}}</li>
{% endfor %}
</ul>
</div>
{% endarchiveParams %}
{# 主要内容，可能包含富文本或Markdown格式 #}
<div class="product-content">
{{archive.Content|safe}} {# 使用|safe过滤器避免HTML内容被转义 #}
</div>
</article>
archiveParamsThe tag is very useful, especially when you have many custom model fields or they change frequently, it can automatically traverse and display all custom parameters and their values without having to specify field names one by one in the template.
3. Enhance user experience:archiveFiltersTag
For product or event list pages, if your custom model includes filterable parameters (such as filtering products by color, size; events by type, date),archiveFiltersLabels can help you create a dynamic filtering interface.
{# 示例：产品列表页的筛选条件 #}
<div class="product-filters">
<h3>筛选条件:</h3>
{% archiveFilters filters with moduleId="您的产品模型ID" allText="不限" %}
{% for item in filters %}
<div class="filter-group">
<strong>{{item.Name}}: </strong>
<ul>
{% for val in item.Items %}
<li class="{% if val.IsCurrent %}active{% endif %}">
<a href="{{val.Link}}">{{val.Label}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endarchiveFilters %}
</div>
CombinearchiveListoftype="page"Parameters, after the user clicks the filter condition, the page will automatically load data that meets the filter conditions.
Custom template and path conventions
The Anqi CMS template system also supports very flexible custom template files. For example, you can create for the product modelproduct/detail.htmlandproduct/list.htmlFiles, the system will automatically recognize and apply these templates based on the access path.This means you can design a completely different frontend display style for different types of content models without changing the core code.
At the same time, all styles, JavaScript, and static resources such as images are stored in/public/static/the directory for easy management and maintenance, ensuring the website loading speed and user experience.
Summary
AnQi CMS provides an efficient solution for website operators to display customized content data through its flexible content model, intuitive template tag system, and powerful customization capabilities.Whether it is to display complex product parameters or a rich variety of event information, it can be achieved through simple template configuration, which greatly improves the efficiency of content management and the performance of the website.
Frequently Asked Questions (FAQ)
- How to create and manage fields for a custom content model?You can find the 'Content Model' menu under the 'Content Management' module in Anqi CMS backend.After entering, you can choose to edit an existing model (such as an article, product) or create a custom model.In the model editing interface, you can freely add various types of fields, including single-line text