Manage and display custom content models in AnQi CMS, such as product lists, event details, etc., which is a core manifestation of its strong 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直观 and rich manner on the front end of the website.
The foundation of flexible content models
Firstly, we need to understand the 'Flexible Content Model' feature of Anqi CMS.It allows you to go beyond the traditional 'article' category, creating content types with unique field sets.For example, a "productThese custom models are configured through the backend's 'Content Model' management, where you can define the model name, table name, and most importantly—the custom fields it contains (such as single-line text, numbers, multi-line text, radio, checkbox, dropdown selection, etc.).These fields are the key to storing and displaying personalized data.
When you add content to these custom models in the background, the information you fill in is that of the predefined fields.These structured data will be presented on your website through the powerful template engine of Anqi CMS.
Template and tags: 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 files, you will mainly come across two types of tags: double curly braces used for outputting variables{{变量}}and single curly braces with a percent sign are used for logical control and data acquisition{% 标签 %}. All template files are stored in/templatedirectory, and can be accessed via 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 front end, you need to be proficient in several core template tags:
1. Display custom model list data:.archiveListtags
When you need to display the content of multiple products, events, or other custom models on a single page,archiveListTags are your preferred tool. This tag can extract a list of data that meets your requirements from the database.
When usingarchiveListWhen using it, several key parameters need to be noted:
moduleIdThis is the core to specify which custom model data you want to retrieve. For example, if your product model table name isproductso thatmoduleIdShould be set to the corresponding ID (can be viewed in the backend content model, or use the model name).categoryIdIf you have set a category for a custom model (for example, product category: electronic products, household items), this parameter can be used to filter content under the specific category.limit：Control the number of returned data items, for examplelimit="10"It will display 10 items.type: Typically 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 asPriceorMaterial）Can be accessed directly.item.FieldNameCan be accessed in the form of.productImagesIf your custom field is an image group (for example)forYou may need to use a 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:archiveDetailtags
When a user clicks on a product to enter its detail page, you need to display all the information of the product.archiveDetailTags are born for this, used to obtain the current page or a specific ID's custom model data.
In the custom model detail page, you can directly access{{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>
archiveParamsTags are very useful here, 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 specifying field names individually in the template.
3. Enhance user experience:archiveFilterstags
For product or event list pages, if your custom model includes filterable parameters (such as filtering products by color, size; events by type, date),archiveFiltersTags 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 filtering condition, the page will automatically load data that meets the filtering criteria.
Custom template and path conventions
The template system of Anqi CMS also supports very flexible custom template files. For example, you can create for the product modelproduct/detail.htmlandproduct/list.htmlFiles, the system will automatically identify and apply these templates based on the access path.This means you can design completely different frontend display styles 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 one place./public/static/This directory makes it easier to manage and maintain, ensuring 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 diverse activity information, it can be realized through simple template configuration, greatly improving the efficiency of content management and the expressiveness of the website.
Common Questions (FAQ)
- How to create and manage fields for custom content models?You can find the 'Content Model' menu under the 'Content Management' module in the Anqi CMS backend.Enter and you can choose to edit an existing model (such as an article, product) or create a custom model.