How to display additional field data in the front-end template after customizing the content model?

AnQiCMS with its flexible content model functionality has brought great convenience to us in managing various types of website content.Whether it is articles, products, activities, or any other content type that requires special fields, we can easily customize fields in the background to meet unique business needs.But when we eagerly created new fields in the background and filled them with data, a new problem also arose: How can we accurately display these newly added custom field data on the website's frontend page for visitors?

Don't worry, the AnQiCMS template system provides a very intuitive and powerful way to handle this issue.This article will guide you step by step on how to make your custom content model fields come alive in the frontend template.

Learn about the template mechanism of AnQiCMS

Before going deeper into the operation, we first need to have a basic understanding of AnQiCMS's template mechanism.AnQiCMS's template system uses the Iris framework built-in template engine written in Go language, which is very easy to get started with, similar to the Django template engine.

In AnQiCMS, template files are usually named with.htmlsuffix and stored in/templateIn the template folder. We use{{ 变量 }}to output data, through{% 逻辑标签 %}to implement conditional judgments, loops, and other complex logic. Understanding these basic elements is the foundation for successfully displaying custom field data.

Display specific custom field data on the content detail page

The most common requirement is to display the data of a specific field added to the content model on content detail pages such as article detail pages, product detail pages, and so on.For example, you may have added the 'Article Author' field to the 'Article Model' or the 'Product Color' field to the 'Product Model'.

We need to use to display these fieldsarchiveDetailLabel. This label is usually used to get the details of the current document, and it also perfectly supports getting our custom fields.

Operation steps:

1. Find the corresponding template file:If you are modifying the article detail page, the corresponding template file is usuallyarticle/detail.htmlor if the default folder organization mode is usedarticle_detail.htmlIf a flattened file organization mode is used). The product detail page might beproduct/detail.htmlorproduct_detail.html.

2. UsearchiveDetailTags:Find the location in the template file where you want to display a custom field, and then use the following syntax:

   {# 假设您在后台自定义了一个名为“文章作者”，其“调用字段”为“author”的字段 #}
   <div>
       文章作者：{% archiveDetail with name="author" %}
   </div>
   
   {# 或者，您可以先定义一个变量来存储字段值，再输出，这样更灵活 #}
   {% archiveDetail articleAuthor with name="author" %}
   <div>
       文章作者：{{ articleAuthor }}
   </div>
   

   What is most critical isname="author"This part,authorMust be consistent with the "call field" you filled in for this custom field in the "Content Model" settings in the background (case-sensitive).

   Similarly, if you add a "product color" field to the "product model", its "called field" iscolorThen you can display it like this in the product detail page template:

   {# 产品颜色自定义字段，调用字段为“color” #}
   <div>
       产品颜色：{% archiveDetail with name="color" %}
   </div>
   

   For single-page (pageDetail) and category (categoryDetail) usage is quite similar, just need to usearchiveDetailReplacepageDetailorcategoryDetail, and ensurenamethe parameter corresponds to the custom fields under the model.

Flexible traversal and display of all custom field data

Sometimes, we may not want to list each custom field individually, but rather hope to automatically iterate and display all defined custom parameters and their values in a region (such as a product parameter list). In this scenario,archiveParamsthe tag comes into play.

archiveParamsThe tag returns an array object containing all custom field names and values, we can traverse and display throughfora loop.

Operation steps:

1. Introduce in the templatearchiveParamsTags:

   {# 假设这是产品详情页，需要在一个区域展示所有自定义参数 #}
   <div class="product-parameters">
       <h3>产品详细参数</h3>
       {% archiveParams params %}
           {% for item in params %}
               <div class="parameter-item">
                   <span class="parameter-name">{{ item.Name }}：</span>
                   <span class="parameter-value">{{ item.Value }}</span>
               </div>
           {% endfor %}
       {% endarchiveParams %}
   </div>
   

   In this example,paramsIt is the variable name defined, it contains all the custom parameters of the document. In the loop,item.Namewill output the Chinese name of the parameter (i.e., the "parameter name" filled in the background),item.ValueIt will output the value corresponding to the parameter.

   archiveParamsBy default, it will return an sorted array. If there are special cases where you need to access directly through the 'call field', you can usesorted=falseThe parameter, it will return an object in the form of a key-value pair. For example, if you have a field calledmaterialThe custom field: “`twig {% archiveParams customFields with sorted=false %}

   产品材质：{{ customFields.material.Value }}
   

   {% endarchiveParams %}