When managing website content in AnQiCMS, we often encounter the need to add some unique information for different types of documents (such as articles, products, etc.).AnQi CMS provides flexible content model features, allowing us to customize fields to meet these personalized needs.How can you display these custom fields after they are created and filled with data on the document detail page of the website?
This is actually simpler than you imagine, the powerful template tag system of AnQiCMS provides us with a variety of convenient ways to achieve this.
Step 1: Review the creation of custom fields
Before we start displaying custom fields on the detail page, we must first ensure that these fields have been correctly created in the content model of the AnQiCMS backend.Usually, we will enter the "Content Management" -> "Content Model" section of the background.Here, you can choose to edit an existing content model (such as 'Article Model' or 'Product Model'), or create a new one.
In the editing interface of the content model, there is an area for 'custom fields of the content model'.Here, we need to fill in the "Parameter Name" (this is the Chinese display name of the field, convenient for background management and understanding) and "Field Name" (this is the actual field name used in the template, usually in English).Understanding this 'call field' is crucial for subsequent data retrieval in the template.For example, if you add a field named "Product Features" to the product model, and its "call field" is set toproduct_featuresThen, in the template, we need to useproduct_featuresto get its content.
Step 2: Find the template file corresponding to the document details page
We need to modify the detail page template under the corresponding model to display custom fields. The AnQiCMS template files are usually stored in/templateUnder the directory, and organize according to the template package name and model type.
For example, the detail page template file of an article model may be located/{你的模板目录}/article/detail.htmlOr/{你的模板目录}/article_detail.html(The organization pattern of your template depends on your template organization mode). If you are not sure, you can refer to the section "Template Creation" -> "Directory and Template" in the AnQiCMS document for confirmation.
Step 3: Display the content of the custom field in the template
After finding the correct template file, we can start adding code to display custom fields.AnQiCMS provides two main ways to retrieve and display the content of custom fields: calling specific fields directly and looping through all custom fields.
1. Directly call a single custom field
If you know the 'invocation field' name of a custom field and want to display it only at a specific location on the page, you can usearchiveDetaillabel'snamespecify the parameter directly.
Assuming we added a custom field to the "article model", whose "access field" issource_author(Indicates the author of the article). In the document detail page template, we can display it like this:
<div>文章来源作者：{% archiveDetail with name="source_author" %}</div>
Or, if you have already passedarchiveDetail archiveThis way, all the information of the current document is assigned to a variablearchiveThen, it can also be accessed directly through dot syntax:
<div>文章来源作者：{{ archive.source_author }}</div>
This method is concise and clear, suitable for when you only want to display a few known custom fields.
2. Loop to display all custom fields
Sometimes, we may not be sure about the custom fields of a document model, or we may want to dynamically list all the additional information. At this time,archiveParamsLabels come into play. It allows us to retrieve the list of all custom fields in the current document and then display them through a loop.
This tag usually returns a list containing each custom field nameName) and value (ValueThe object array.
The following is an example of the code to loop through all custom fields in the template
{% archiveParams params %}
<div class="custom-fields">
{% for item in params %}
<div class="custom-field-item">
<span class="field-name">{{ item.Name }}：</span>
<span class="field-value">{{ item.Value }}</span>
</div>
{% endfor %}
</div>
{% endarchiveParams %}
In the code above:
{% archiveParams params %}Retrieve and store all custom parameters of the current document inparamsthe variable.{% for item in params %}Traversalparamseach custom field in the array.{{ item.Name }}Display the parameter name set in the background for the custom field.{{ item.Value }}Display the specific content filled in for this custom field.
This method is very flexible, especially when you have a large number of custom fields in your content model, or when you want to reuse the same display logic across different document models.
3. Handle custom fields of specific types.
It is worth noting that the type of custom field affects its display on the front end:
- Text field:Most text and numeric fields can be displayed directly
{{ item.Value }}or{{ archive.your_field }}Display. - Rich text or Markdown field:If your custom field allows input of HTML or Markdown content (such as a complex 'product details' field), direct output may result in HTML tags being escaped. In order for the browser to correctly parse and render this content, you need to use
|safeFilter, if the Markdown editor is enabled, it may also be required|renderfilter.{# 如果是HTML内容 #} <div>自定义富文本内容：{{ archive.rich_text_field|safe }}</div> {# 如果是Markdown内容 #} <div>自定义Markdown内容：{{ archive.markdown_field|render|safe }}</div> - Image field:If the custom field is an image type, its
ValueIt is usually a URL of an image. You can treat it as a normal image and<img>label'ssrcDisplay properties.{# 假设自定义字段 'product_image' 存储图片URL #} <img src="{{ archive.product_image }}" alt="产品图片" />
By following the above method, you can easily display various custom field content on the document detail page of AnQiCMS.This makes your website content more rich and personalized, giving full play to the advantages of AnQiCMS's flexible content model.
Frequently Asked Questions (FAQ)
Q1: I created a custom field and filled it in the background, but I can't see any display on the document detail page. What went wrong?A1: First, check if you have added the code to display custom fields in the corresponding document detail page template, and make sure that the "Call field" name matches the one used in the template.nameThe parameter or variable name is exactly the same (case sensitive). Secondly, check if your template file has been loaded correctly by AnQiCMS.If the effect of the template file is not updated after modification, you may need to clear the system cache or refresh the browser cache.
Q2: How to display this image on the front end if my custom field is of image type?A2: When the custom field is of image type, its value is usually the URL of the image. You can use this field value as<img>a label, to use the value of this field assrcProperty. For example, if your image custom field's call field isproduct_photoyou can display it like this:<img src="{{ archive.product_photo }}" alt="图片描述" />.
Q3: My custom field is rich text or Markdown formatted, containing HTML tags or Markdown syntax, why did the original text show on the page instead of the tags being escaped?A3: The AnQiCMS template engine, for security reasons, defaults to escaping all output content to prevent XSS attacks. If your custom field content is already HTML or Markdown, you need to use|safeThe filter tells the template engine that this content is safe and does not need escaping. If the content is Markdown and you want it to be rendered as HTML, you need to add it before|safe.|renderfor example:{{ archive.rich_text_content|safe }}or{{ archive.markdown_content|render|safe }}.