How to extend the content model through custom fields and display this additional information on the frontend page?

In AnQi CMS, the presentation of content is not limited to basic elements such as title and text.To meet the diverse content display needs of corporate websites, the system provides powerful content model custom field functions, allowing us to add various exclusive information to the content according to specific business scenarios.This is like tailoring a detailed profile for each content type, not only making the backstage management clear, but also flexible on the front-end page, greatly enhancing the website's performance and user experience.

Why do we need custom fields?

Imagine a product detail page of an e-commerce website, in addition to the product name and description, we usually need to display price, stock, color options, size information, and even the material of the product.If relying solely on the fixed 'text' field to pile up all this information, not only will the backend editing become extremely disorganized, but it will also be difficult to structure and style the frontend display.

At this time, the custom fields of Anqi CMS are particularly important.It allows us to add specific fields for different content models (such as “articles”, “products”, or our own created “services”, “cases”, etc.), making the data structure of each piece of content more accurate and rich.This not only makes the background data entry more intuitive and orderly, but also provides a solid foundation for the refined design and data presentation of the front-end page.

How to define custom fields in Anqi CMS backend?

The process of defining custom fields is very intuitive.Firstly, we need to enter the 'Content Management' section of the website backend, and find the 'Content Model' option.AnQi CMS usually comes with built-in 'article model' and 'product model' etc., and we can also create new content models as needed.

For example, when we click to enter the configuration interface of the "product model

1. Parameter NameThis is the display name of the field on the background management interface, such as 'Product Price', 'Color Selection'.
2. Field invocationThis is used in the template to call the identifier of the field data, it is recommended to use English lowercase letters, such as 'productPrice' or 'colorOptions'.
3. Field type: Anqi CMS provides various field types to adapt to different data formats, including:
   • Single-line text: Suitable for brief text information, such as product models and materials.
   • Number: Suitable for numeric data such as price, inventory, etc.
   • Multi-line text: Suitable for longer descriptive text, such as product features, precautions, and even supports Markdown for easy content layout.
   • Single choice, multiple choice, dropdown choiceThese types are very suitable for defining preset options, such as product colors, size specifications, etc. Just enter an option per line in the "Default Value".
4. Mandatory?: This field can be set according to business requirements to determine whether it is necessary to fill in when content is published.
5. Default valueTo set the default value for the field, if it is not manually filled in when the content is published, it will be automatically used. For selection type fields, this is used to define the optional list items.

For example, we add a "Product Model" field (field name:productPrice), a "Color Options" field (field name:colorType: Dropdown selection, default value: Red, Blue, Green), and a "Product Material" field (call field:materialType: Single-line text)

How to fill in these additional information in the content?

Once we define custom fields in the content model, these fields will automatically appear on the content editing page associated with the model.When we go to the 'Content Management' 'Publish Document' or edit an existing document, we usually find these newly added custom fields below the content editor or in a collapsible area named 'Other Parameters'.

At this time, we just need to fill in the information like a normal form, inputting product prices, selecting colors, filling in materials, and so on in the corresponding custom fields.This data will be saved together with the main content of the document and become an inseparable part of the document.

How to display these custom information on the front-end page?

Present the custom information input from the backend on the front-end page, which is a key step in realizing personalized content display.The Anqi CMS uses a template engine syntax similar to Django, allowing flexible data calls through specific tags.

Generally, we would edit the template files corresponding to the content model, such as the article detail page template.archive/detail.htmlOr the product detail page template.product/detail.html.

There are mainly two ways to call custom fields:

1. Call by field name directly: If the calling field of a custom field (FieldName) is explicit, and you are on the detail page context of this content (for examplearchiveAn object is available), it can be used directly like built-in fields{{archive.yourFieldName}}Or{% archiveDetail with name="yourFieldName" %}Tags to retrieve and display it.

   For example, we want to display "Product Price" and "Product Material" on the product details page:

   <p>产品价格：{{archive.productPrice}} 元</p>
   <p>产品材质：{{archive.material}}</p>
   

   Or use:archiveDetailTags:

   <p>产品价格：{% archiveDetail with name="productPrice" %} 元</p>
   <p>产品材质：{% archiveDetail with name="material" %}</p>
   

2. ByarchiveParamsThe tag traverses all custom fields.:archiveParamsTags provide a more general way to traverse and display all custom fields of a certain content.This is very useful for dynamically displaying all additional parameters or for handling list, selection-like fields.

   <div class="product-specs">
       <h3>产品参数：</h3>
       <ul>
       {% archiveParams params %} {# 'params'是自定义变量名 #}
       {% for item in params %}
           {# item.Name 是字段的中文名，item.Value 是字段的值 #}
           <li>{{item.Name}}：
               {% if item.Name == "颜色选项" %}
                   {# 如果是选择类型的字段，item.Value 可能会是逗号分隔的字符串或数组 #}
                   <span>{{item.Value|join:", "}}</span> {# 使用join过滤器美化输出 #}
               {% elif item.FieldName == "introduction" %} {# 如果多行文本支持markdown，需要渲染 #}
                   <div class="markdown-content">{{item.Value|render|safe}}</div>
               {% else %}
                   <span>{{item.Value}}</span>
               {% endif %}
           </li>
       {% endfor %}
       </ul>
   </div>
   

   here,item.NameIt will display the Chinese names we set, such as “product price”, “color options”, and so on, whileitem.Valueit will display the corresponding values. For fields with multi-line text and support for Markdown, such asintroductionWe can use|render|safea filter to ensure it is rendered correctly as HTML.

Through these two methods, whether it is to directly refer to a specific field or dynamically traverse all fields, Anqi CMS provides a flexible and powerful mechanism that allows us to easily present rich content information to users.

In summary, the custom field feature of Anqi CMS provides a solid foundation for the fine-grained management and display of website content.From the backend content model configuration, to the flexible filling during content editing, to the precise calling in the front-end template, every step is designed to be simple and efficient, helping us build a rich and detailed website.

Frequently Asked Questions (FAQ)

1. Ask: Why did I set custom fields, but I can't see them when editing content in the background? Answer:This is usually because the content you are editing does not match the custom field content model.Make sure the document you are editing indeed belongs to the content model where you added the custom fields (for example, "Product Model"), and the document category is also correctly associated with the model.Additionally, custom fields are usually located in the "Other Parameters" collapse area at the bottom of the content editing page. Please check that area.

2. How to troubleshoot if the custom field value has been filled in but is not displayed or displayed incorrectly on the front-end page? Answer:First, check the front-end template file (such asdetail.htmlIs the label of the custom field called correctly. Confirm{% archiveDetail with name="yourFieldName" %}ofyourFieldNameConsistent with the "Call Field" set in the background, including case. In addition, if the content of the field is in HTML or Markdown format, please make sure that it is used|safeand/or|renderfor example, a filter (such as{{archive.content|render|safe}}To avoid content from being escaped or not rendered, check the website cache and try refreshing the page after clearing the cache.

3. Ask: Can I also add custom fields for non-document content (such as website settings, contact information)? Answer:Can be.The AnQi CMS, in addition to the content model, also provides a "custom parameter setting" function in modules such as "Global Settings" and "Contact Information Settings".{% system with name="yourParamName" %}or{% contact with name="yourContactParam" %}Tags are called and displayed in the template.