AnQiCMS's content model feature brings great flexibility to website operation, allowing us to define various personalized content structures according to the actual needs of our business.Whether it is articles, products, activities, or any other custom content type, we can add unique fields for it.How can you flexibly display the custom fields in these content models on the website front-end template?Next, let's explore this practical technique.
Understanding the content model and custom fields of AnQiCMS
When using AnQiCMS for content creation, we are not limited to basic fields such as article titles and main content.By using the content model feature, we can create dedicated data fields for different types of content.For example, if your website needs to display product information, you may add custom fields such as 'Product Model', 'Product Type', 'Product Color', 'Stock Quantity', and 'Product Image Gallery' for 'Product Model'.These fields make your content more structured and convenient for users to quickly obtain the information they need.
These custom field settings are usually found under the 'Content Model' feature in the 'Content Management' section of the AnQiCMS backend.Here, you can choose to edit an existing model (such as 'Article Model' or 'Product Model') or create a new content model.In the model editing interface, you will see a "Content Model Custom Field" area.Here, we can add new fields and specify 'parameter name' (for backend display), 'field name' (for frontend template, it is recommended to use lowercase English letters and be unique), 'field type' (such as single-line text, number, multi-line text, single selection, multiple selection, dropdown selection, etc.), as well as whether it is required and the default value.
For example, suppose we added a custom field named "product model" with the "field name" set tomodel_number. Meanwhile, we may also have added a "Product Highlightshighlights, the field type is "Multi-line Text", used to describe the product's characteristics and advantages.
Display custom field content in the front-end template
AnQiCMS's front-end template uses syntax similar to Django, variables are enclosed in double curly braces{{ }}Output, while the label is used{% %}Wrapping. When we need to display custom fields of the content model in the template, we will mainly usearchiveDetail/categoryDetailorpageDetailetc. detail tags, as well asarchiveParamsLabel.
1. Show the content of a single custom field
If you know exactly which custom field you want to display, and it is usually simple data like single-line text or numbers, you can use it directlyarchiveDetail标签（in document detail page）、categoryDetail标签（in category detail page）orpageDetail标签（in single page detail page）to call.
For example, in the product detail page, we want to display the model of the product (model_number):
<p>产品型号：{% archiveDetail with name="model_number" %}</p>
If you want to assign this value to a variable and use it later, you can also do it like this:
{% archiveDetail productModelNumber with name="model_number" %}
<p>产品型号：{{ productModelNumber }}</p>
This method is concise and clear, and is suitable for scenarios where we know the custom field name.
2. Handle custom fields containing multiple items or rich text
Some custom field types may be multiple choice, group images, or rich text content like 'Product Highlights'.This field data is usually stored in an array or in a form with HTML structure, and we need to handle it specially.
Multi-value fields (e.g., product albums, multiple selections):If your custom field (such asproduct_imagesEnglish stores a set of images or multiple choice values, and it will be an array in the template. You need to combineforLoop to traverse and display them.
{% archiveDetail productImages with name="product_images" %}
<div class="product-gallery">
{% for image in productImages %}
<img src="{{ image }}" alt="产品图片">
{% endfor %}
</div>
rich text or Markdown content:When the custom field type is a multiline text editor (usually supporting rich text editing or Markdown format), the content may contain HTML tags. To ensure that these contents are correctly parsed and displayed by the browser and styled, we need to use|safeFilter. If the Markdown editor is enabled in the background content settings and the field content is in Markdown format, then it is necessary to use first|renderThe filter converts it to HTML, then|safeFilter.
For example, display the "Product Highlights" (highlights) content of the field:
{# 假设 highlights 是富文本内容 #}
<div class="product-highlights">
{{ archiveDetail with name="highlights" | safe }}
</div>
{# 假设 highlights 是 Markdown 内容，且后台启用了 Markdown 编辑器 #}
<div class="product-highlights">
{{ archiveDetail with name="highlights" | render | safe }}
</div>
Tip:When you are on the list page (such asarchiveListLoop internally) when you need to display custom fields, you can directly access them, for exampleitem.自定义字段名to access, for example{{ item.model_number }}.
3. Dynamically traverse and display all custom fields
If you wish to not preset the name of a custom field in the template, but instead dynamically display all custom fields and their values under a content model (for example, in the product parameter area),archiveParamsLabels can be very useful. It will return a list of custom fields, and you can iterate over them using a loop.forLoop to traverse them.
<div class="product-parameters">
<h3>产品参数</h3>
{% archiveParams params %}
{% for item in params %}
<p>
<span>{{ item.Name }}：</span> <!-- 自定义字段的显示名称 -->
<span>{{ item.Value }}</span> <!-- 自定义字段的值 -->
</p>
{% endfor %}
{% endarchiveParams %}
</div>
Hereitem.NameThe text will display the parameter name you set in the background (such as "Product Model"), anditem.ValueThen display the content filled in for this field. This is especially convenient for building flexible product parameter tables or information blocks.
If someitem.ValueField contains HTML or Markdown content, don't forget to add|safeor|render|safeFilter.
4. Custom field calls for other content models
In addition to document models, categorization models and single-page applications can also have custom fields. The calling method is similar to the document model, you just need to replace the label name withcategoryDetailorpageDetail.
For example, on the category detail page, display the custom 'feature description' field (the field name calledfeature_desc):
<div class="category-feature">
<h4>特色描述</h4>
{{ categoryDetail with name="feature_desc" | safe }}
</div>
Practical Suggestions
- Naming conventions:When setting up custom fields in the background，“The field called”}]