How can the content of custom fields be displayed on the AnQiCMS document detail page?

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.).The Auto CMS provides flexible content model functions, allowing us to customize fields to meet these personalized needs.How can these custom fields be displayed on the document detail page of the website after they are created and filled with data?

This is actually simpler than you imagine, AnQiCMS's powerful template tag system provides us with a variety of convenient ways to achieve this.

第一步：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 AnQiCMS backend.通常，我们会进入后台的“内容管理” -> “内容模型”部分。Here, you can choose to edit an existing content model (such as "Article Model" or "Product Model"), or create a brand new one.

In the editing interface of the content model, there is an area called "Content Model Custom Field".Here, when we add each custom field, we need to fill in the 'parameter name' (which is the Chinese display name of the field, convenient for background management and understanding) and 'calling field' (which 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.product_featuresThen, in the template, we need to useproduct_featuresto obtain its content.

第二步：Find the corresponding template file for the document detail page

To display custom fields on the document detail page, we need to modify the detail page template under the corresponding model. The template files of AnQiCMS are usually stored in/templateThe directory, and organize according to the template package name and model type.

For example, a detail page template file for an article model may be located/{你的模板目录}/article/detail.htmlor/{你的模板目录}/article_detail.html(Specifically depends on your template organization mode). If you are unsure, you can refer to the section "Template Creation" -> "Catalog and Template" in the AnQiCMS documentation to confirm.

Third step: Display the content of custom fields in the template

After finding the correct template file, we can start adding code to display custom fields.AnQiCMS provides two main methods for retrieving and displaying custom field content: directly calling specific fields and looping to display all custom fields.

1. Directly call a single custom field

If you know the name of a custom field's 'call field' explicitly, and you want to display it at a specific location on the page, you can specify it directly.archiveDetailTagsnameParameters are specified directly.

The 'article model' has been added a custom field with the 'field called' ofsource_authorThe auto English translation of （表示文章的来源作者）。在文档详情页的模板中，我们可以这样显示它： is （indicating the source author of the article）。In the template of the document detail page, we can display it like this:

<div>文章来源作者：{% archiveDetail with name="source_author" %}</div>

or, if you have already passedarchiveDetail archiveThis method assigns all information of the current document to a variablearchiveThen, you can also directly access it through dot syntax:

<div>文章来源作者：{{ archive.source_author }}</div>

This method is concise and clear, suitable for scenarios where 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.archiveParamsThe label comes into play. It allows us to get the list of all custom fields in the current document, and then display them through a loop.

This tag will usually return a list containing the names of each custom fieldName) and their values (Value）of the object array.

The following is an example of 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 above code:

  • {% archiveParams params %}Get and store all custom parameters of the current document.paramsthe 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 }}Show the specific content filled in for this custom field.

This method is very flexible, especially when your content model has a large number of custom fields, or when you want to reuse the same display logic across different document models.

3. Handle specific types of custom fields

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 directly{{ item.Value }}or{{ archive.your_field }}displayed.
  • Rich Text or Markdown field:If your custom field allows HTML or Markdown content input (for example, a complex 'product details' field), direct output may result in HTML tags being escaped. To ensure that the browser correctly parses and renders this content, you need to use|safeFilter, if the Markdown editor is enabled, it may also be necessary|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,ValueIt is usually the URL of an image. You can treat it as an image in the same way as you would with a normal image.<img>TagssrcAttribute to display.
    
{# 假设自定义字段 'product_image' 存储图片URL #}
<img src="{{ archive.product_image }}" alt="产品图片" />

By using the above method, you can easily display various custom field content on the document detail page of AnQiCMS.This makes your website content display more rich and personalized, fully utilizing the advantages of AnQiCMS's flexible content model.

Common Questions (FAQ)

Q1: I created a custom field and filled it with content in the background, but I can't see any display on the document details page. What's wrong?A1: Firstly, please check if you have added the code for displaying custom fields on the corresponding document detail page template, and ensure that the name of the "Field Call" matches the one used in the template.nameThe parameter or variable name is exactly the same (case-sensitive).Then, check if your template file is loaded correctly by AnQiCMS.If the effect of the template file is not updated after modification, it may be necessary 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 typically the URL of the image. You can use this field's value as a label in the template.<img>tags, to use this field's value as a label.srcProperty. For example, if the call field of your custom image field isproduct_photoyou can display it like this:<img src="{{ archive.product_photo }}" alt="图片描述" />.

Q3: My custom field is rich text or Markdown formatted, the content includes HTML tags or Markdown syntax, why does the page only display the raw text and the tags are escaped?A3: AnQiCMS template engine, for security reasons, defaults to escaping all output content to prevent XSS attacks. If your custom field content is HTML or Markdown, you need to use|safeThe filter tells the template engine that this content is safe and does not need to be escaped. If the content is Markdown and you want it rendered as HTML, you need to add in the|safebefore|renderFilter, for example:{{ archive.rich_text_content|safe }}or{{ archive.markdown_content|render|safe }}.