As an experienced website operations expert, I know the importance of a flexible content management system for efficient operations.AnQiCMS (AnQiCMS) with its powerful custom content model function provides a solid foundation for us to meet our diverse content display needs.However, defining these fields in the background is not enough, how to accurately and elegantly present these meticulously set custom data on the website front-end is the core challenge in template creation.Today, let's delve into how to obtain and display the data of newly added custom fields in the content model when creating Anqi CMS templates.
The flexible content model of AnQi CMS is the reason for its widespread popularity among small and medium-sized enterprises and content operation teams.It allows us to customize fields according to business needs, not limited to traditional article titles, content, etc., but also includes personalized fields such as 'product price', 'author source', 'video duration', 'product SKU', and even 'multi-image carousel'.These custom fields greatly enrich the dimensions of content, allowing our website to carry more diverse information display.They can be simple text, numbers, or multi-line text, single-choice, multiple-choice, or dropdown selections, even supporting file or image group uploads.
To display this custom field data on the website front end, we first need to understand the Anqi CMS template mechanism.The Anqi CMS adopts a syntax similar to the Django template engine, which is very easy to learn for developers familiar with various front-end frameworks.{{变量}}To output data, while conditional judgment, loop control, and other logical operations are used{% 标签 %}This is the format. Variables usually follow camel case naming conventions, for example{{archive.Title}}Used to get the document title. With a grasp of these basic syntaxes, obtaining custom field data becomes a breeze.
In the Anqi CMS template system, there are mainly two core methods to obtain custom field data in the content model: througharchiveDetaillabel to directly obtain a single field, as well as througharchiveParamsLabel traverse all fields.
Method one: througharchiveDetailLabel accurately obtain a single custom field
When you clearly know the "call name" of a custom field (i.e., the English field name defined in the backend content model, such asauthor/productPrice/videoUrletc.) usearchiveDetailThe tag is the most direct and concise way. This tag is usually used on the document detail page, and it can obtain the detailed information of the current document or a specified ID document.
You can use it like this:
{# 如果自定义字段的调用字段名是 'author' #}
<div>作者：{% archiveDetail with name="author" %}</div>
{# 如果自定义字段是产品价格，调用字段名是 'productPrice' #}
<div>产品价格：¥ {% archiveDetail with name="productPrice" %}</div>
{# 还可以通过设置变量名来进一步处理数据 #}
{% archiveDetail videoLink with name="videoUrl" %}
<a href="{{ videoLink }}" target="_blank">观看视频</a>
This method is simple and efficient, especially suitable for those who know the field names and need to display custom data separately.
Method two: througharchiveParamsLabels can flexibly traverse all custom fields
When you have multiple custom fields in your content model or you are unsure of the specific fields, but you want to display them dynamically,archiveParamsThe tag is very powerful and flexible. It allows you to get all the custom parameters of the current document or a specified document and display them in a loop.
archiveParamsThe typical usage of the tag is as follows:
{% archiveParams params %}
{% for item in params %}
<div>
{# item.Name 是自定义字段在后台设置的中文名称，item.Value 是该字段的值 #}
<span>{{ item.Name }}：</span>
<span>{{ item.Value }}</span>
</div>
{% endfor %}
{% endarchiveParams %}
here,{% archiveParams params %}Will wrap all the custom fields of the current document into an array object namedparams. Each element of the array is an object that containsName(the display name of the field) andValue(Specific data of the field). PassforBy looping, we can dynamically list all custom fields and their values.
You can also pass through.idSpecify a parameter to retrieve custom fields of a specific document, for example:
{% archiveParams params with id="123" %}
{# 遍历文档ID为123的自定义字段 #}
...
{% endarchiveParams %}
By default,archiveParamsThe fields are returned in the order you set in the backend, becausesorted=trueThis is the default behavior.
Sometimes, you may not want to display all custom fields, such as some internally used fields. In this case, you can use logic in the loop toiffilter:
{% archiveParams params %}
{% for item in params %}
{# 排除名为“内部备注”和“管理员可见”的字段 #}
{% if item.Name != '内部备注' and item.Name != '管理员可见' %}
<div>
<span>{{ item.Name }}：</span>
<span>{{ item.Value }}</span>
</div>
{% endif %}
{% endfor %}
{% endarchiveParams %}
on the list page (archiveList) Display Custom Field
In addition to being displayed on the detail page, we often need to display the brief information of the custom fields of each list item on the content list page (such as article lists, product lists).archiveListThe tag retrieves data from eachitemThe object also includes corresponding custom fields.
The direct call method isarchiveDetailsimilar:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
{# 如果每个文章都有一个自定义字段 'summaryImage' 作为缩略图 #}
{% if item.summaryImage %}
<img src="{{ item.summaryImage }}" alt="{{ item.Title }}">
{% endif %}
<p>作者：{{ item.author }}</p> {# 假设自定义字段名为 'author' #}
<p>{{ item.Description }}</p>
{% endfor %}
{% endarchiveList %}
Please note, here,item.authoranditem.summaryImageAssuming it is directly obtained through 'call field'. If the value of a custom field is a complex structure, such as a group of images, it needs to be further processed inarchiveDetailorarchiveParams.
For example, if your custom fieldproductImagesis a group of images:
{% archiveDetail currentProduct with name="Id" %} {# 获取当前文档的ID #}
{% archiveParams params with id=currentProduct %}
{% for item in params %}
{% if item.Name == '产品图片集' %} {# 假设你的图片组字段名为“产品图片集” #}
<div class="product-gallery">
{% for imgUrl in item.Value %} {# item.Value 此时是一个图片URL数组 #}
<img src="{{ imgUrl }}" alt="产品图片">
{% endfor %}
</div>
{% endif %}
{% endfor %}
{% endarchiveParams %}
Summary and **practice**
The combination of AnQi CMS's custom content model and template tags provides great convenience for building personalized, feature-rich websites. Whether througharchiveDetailLabel accurately retrieves a single custom field, or utilizearchiveParamsLabel flexibly traverses all fields, meeting the data display needs of different scenarios.
In practice, I suggest you:
- Make clear the 'invoking field' of the fieldWhen defining a custom field in the background, set a clear and unique English invoking field name, which is the basis for accurately obtaining data in the template.
- Make good use of
archiveParamsDebugIn the early stages of development, when you are unsure about the custom fields or their structure, first usearchiveParamsTraverse all fields and output them, which can help you better understand the data structure. - Please note the field type: Complex types such as image groups require additional
forto display in a loop. The value of a multi-select field may be a string and should be parsed or displayed directly according to specific requirements. - View the official documentation: The Anqi CMS template tag documentation (such as
tag-/anqiapi-archive/142.html/tag-/anqiapi-archive/146.htmlandtag-/anqiapi-archive/141.html) is your reference manual, which provides detailed parameter descriptions and examples.
By these methods, you will be able to effortlessly handle the custom fields of Anqi CMS, bringing your website richer and more attractive content displays.
Frequently Asked Questions (FAQ)
Q1: Why can't I directly access the custom field I added in the template?{{archive.自定义字段名}}Obtained?
A1: The Anqi CMS template engine has specific parsing rules for variable names. The name of the custom field's "call field" is named in the template by default in camel case and is used directly asarchiveor objectitemto access the properties of an object. If you set the field name to call in the backgroundmy_custom_fieldtry using the template.{{archive.MyCustomField}}or{{item.MyCustomField}}If it still cannot be obtained, please check if the field name is spelled correctly, or try usingarchiveParamstags to traverse and view all available custom fields and their correspondingNameandValue.
Q2: What is my custom field type (single image or multiple images), and how can I display the image correctly in the template?
A2: If it is a custom field for single image upload, assuming the field name ismyImage, you can directly go through{% archiveDetail with name="myImage" %}or{{item.MyImage}}to get the image URL, then put it in<img>label'ssrcthe attribute:<img src="{% archiveDetail with name="myImage" %}" alt="...">If it is a multi-image upload (image group), the value of this field will be an array of image URLs. You need to usearchiveParamsthe tag to get this field, and then useValueit onforLoop through each image URL:
{% archiveParams params %}
{% for field in params %}
{% if field.Name == '我的图片组字段名' %} {# 这里的“我的图片组字段名”是你在后台设置的自定义字段显示名称 #}
{% for imageUrl in field.Value %}
<img src="{{ imageUrl }}" alt="图片描述">
{% endfor %}
{% endif %}
{% endfor %}
{% endarchiveParams %}
Q3: I want to display each article's custom field on the content list page (such as the article list), how should I operate?
A3: Use on the content list pagearchiveListwhen using tags, byforlooping through eachitemobject, it will contain all the basic fields and custom fields of the article. You can directly try to use through{{item.你的自定义字段调用名}}Visit. For example, if you have a custom field namedcustomExcerptas the article summary, it can be used directly in the list.{{item.CustomExcerpt}}If the custom field is a complex type or you are unsure of its call name, you can also usearchiveListofforit again within the looparchiveParamstag to get the currentitemall custom fields through{% archiveParams currentItemParams with id=item.Id %}