In AnQiCMS templates, it is the key to flexibly obtain and display extended fields of custom content models, which is crucial for personalized content display on the website.AnQiCMS powerful content model customization capability, allowing us to add various unique attributes to articles, products, and other content according to actual business needs, and how to beautifully present these customized data in front-end templates is the theme we will delve into today.
Flexibility of AnQiCMS content model
AnQiCMS is an enterprise-level content management system developed based on the Go programming language, one of its core highlights is the 'flexible content model'.This means that we are not limited to traditional fields such as 'title', 'content', etc., but can create dedicated extended fields for different business scenarios (such as articles, products, events, etc.).
For example, if you operate an e-commerce website, you may need to add fields such as "Product SKU", "Brand", "Stock Quantity", "Product Specifications", and so on;If it is a blog post, it may require fields such as 'author bio', 'reading time', 'references', etc.These fields created under the "Content Management" and "Content Model" in the background are collectively referred to as extended fields of the custom content model.When creating these fields, we will set a "parameter name" (for display in the background) and a "call field" (for template calls), which is the important identifier for obtaining data in the template.
Core idea of obtaining custom fields
In the AnQiCMS template system, whether you are viewing a single document detail page or looping through content on a list page, the core idea of obtaining these custom extended fields is consistent: they are regarded as part of the document (or content) object.AnQiCMS provides powerful template tags that allow us to easily access these custom fields as if accessing built-in fields.
How to get and display a single extended field in the template
When you know exactly which custom extension field to display,archiveDetailThe tag is your preference. This tag is mainly used to obtain detailed information of the current document on the document detail page, of course, you can also obtain the details of other documents by specifying an ID or a URL alias.
You need to use to get a specific custom field,nameParameter, and set its value to the 'call field' name of the field you define in the background 'content model'.
For example, if you have customized a field named "Product SKU" in the product model, its "reference field" isproductSkuSo in the product details page template, you can get and display it like this:
<p>产品 SKU：{% archiveDetail with name="productSku" %}</p>
If you want to assign it to a variable for later processing, you can do it like this:
{% archiveDetail currentProductSku with name="productSku" %}
<p>当前产品的 SKU 是：{{ currentProductSku }}</p>
This will replace the SKU value of the corresponding product during template parsing{{ currentProductSku }}position.
Traverse all extended fields
Sometimes, we may not be sure about the specific custom fields of a certain content model, or we may want to dynamically display all the defined extended fields and their values, such as listing all product parameters uniformly on a product detail page. At this time,archiveParamsLabels can be very useful.
archiveParamsThe tag allows us to retrieve all custom parameters of the current document (or specified document) and return them in the form of an array or an unordered Map object. Usually, we tend to get a fixed sorted array object so that we can pass throughforLoop easily traverse and display.
Here is an example of traversing and displaying all custom fields on the document detail page.
<h3>产品参数：</h3>
<ul>
{% archiveParams params %}
{% for item in params %}
<li>
<strong>{{ item.Name }}：</strong>
<span>{{ item.Value }}</span>
</li>
{% endfor %}
{% endarchiveParams %}
</ul>
In this example:
{% archiveParams params %}Assign all custom field data of the current document toparamsVariable.{% for item in params %}Loop throughparamsarray.{{ item.Name }}It will output the parameter name set in the background for the custom field (e.g., "Product SKU").{{ item.Value }}It will output the specific value of the custom field (e.g., "AQ-001").
In this way, even if you add new custom fields to the content model in the future, the front-end template does not need to be modified, and it can automatically synchronize and display these new fields and their values, greatly enhancing the maintainability and flexibility of the template.
If you want to get an unordered Map object (for example, when you need to directly access its value by the field's "invoking field"), you canarchiveParamsthe tag withsorted=falseParameter.
{% archiveParams params with sorted=false %}
<div>
<span>作者：</span>
<span>{{ params.author.Value }}</span>
</div>
{% endarchiveParams %}
Handle special field types
Custom field types are diverse, such as single-line text, numbers, multi-line text, single choice, multiple choice, dropdown selection, etc.Among them, fields in rich text editors or Markdown format, as well as image group fields, require additional processing when displayed on the front end.
Rich text/Markdown content rendering
If your custom field stores rich text content containing HTML or Markdown syntax (for example, the 'product introduction' field may contain bold text, images, and other formats), output directly{{ item.Value }}It may cause HTML tags to be displayed as plain text due to the automatic escaping mechanism of the template.
At this time, we need to usesafeA filter tells the template that this content is safe HTML and should not be escaped:
{% archiveDetail productDescription with name="productDescription" %}
<div class="product-description">
{{ productDescription|safe }}
</div>
If your custom field content is in Markdown format, you will need to use an extrarenderfilter to convert it to HTML before usingsafeFilter:
{% archiveDetail markdownContent with name="markdownContent" %}
<div class="markdown-output">
{{ markdownContent|render|safe }}
</div>
Display of image group or multiple choice field
For custom fields such as image groups (multiple image URLs) or multiple selection fields (multiple values), their values are typically stored in an array. When displayed in the template, you need to use it again.forLoop to iterate through these items.
For example, if you define a 'product album' field, its 'call field' is.productImages:
{% archiveDetail productImages with name="productImages" %}
<div class="product-gallery">
{% for imageUrl in productImages %}
<img src="{{ imageUrl }}" alt="产品图片" />
{% endfor %}
</div>
This example shows how to iterate.productImagesEach image URL in the array is displayed as<img>.
Summary
AnQiCMS's custom content model and its flexible template tag system provides a solid foundation for us to build highly personalized and functional websites.Whether it is to accurately obtain a single extended field, or dynamically traverse all custom parameters, or handle special content types, AnQiCMS provides intuitive and powerful methods.Master these skills, and you can bring vitality to the website content on the front end, better meet user needs and business goals.
Frequently Asked Questions (FAQ)
**Q1: