In website operations, we often encounter situations where the standard 'article' or 'product' content types cannot fully meet our unique business needs.For example, you may need to publish "Real Estate InformationAt this moment, the flexible content model and custom field function of AnQiCMS are particularly important, as they can help us create a content structure that perfectly fits our business needs and accurately display it on the website frontend.

This article will delve into how to make full use of the AnQiCMS content model custom fields and perfectly present their content in the frontend template.

Understanding the value of content models and custom fields

In AnQiCMS, the content model can be understood as a 'blueprint' for creating various content types.System default provides 'Article Model' and 'Product Model', which define common fields such as title, content, thumbnail, etc.However, when faced with more specific and professional content, these general fields seem to be inadequate.

Custom fields are created to address this pain point.It allows us to add any specific data fields we need for a particular content model.This not only makes content management more refined and standardized, but also helps to improve the website's SEO performance (because it can fill in more specific keyword information), and provides users with more accurate and richer display content, thus optimizing the overall user experience.

Creating and configuring custom fields

To start using custom fields, we need to enter the AnQiCMS backend management interface.

  1. Enter the content model management:Find the 'Content Management' menu in the left navigation bar in the background, click to enter, and you will see the 'Content Model' option.Here is a list of all existing content models, including built-in and customized ones.

  2. Select or create a model:

  3. Add custom fields:Enter the model editing page, you will see a section named "Content Model Custom Fields".Here, we can add and configure the required fields.

    • Parameter name:This is the Chinese name of the field displayed in the background for you, such as "house type
    • Field call:This is the English identifier stored in the database and called in the front-end template, it is recommended to use concise and meaningful lowercase letters, for examplehouseType/salaryRange.
    • Field Type:AnQiCMS provides various field types to meet the needs of different data entry:
      • Single-line text:Suitable for short text input, such as product model, author name.
      • Numbers:Only input numbers, such as inventory quantity, product price.
      • Multi-line text:Suitable for longer texts, such as product features, job descriptions.
      • Single choice:Provide multiple options, but only one can be selected, for example, "Gender", "Recommended".
      • Multiple selection:Provide multiple options that can be selected multiple times, for example, "Skill tags", "Product features".
      • Dropdown selection:Similar to single selection, but presented in a dropdown menu form, saving page space.
    • Mandatory:If this field must be filled in, please check, the system will perform verification when submitted.
    • Default value:If the field has a preset value, you can enter it here.For the 'Single choice', 'Multiple choice' and 'Dropdown' types, this is used to enter the value of each option, with each option taking up a line.

  4. Save and take effect:After completing the field configuration, don't forget to click the save button. This way, your content model will have the new custom field.

Enter custom field data in the document

Custom field configurations will immediately be reflected in the content publishing and editing interface once completed.

When you enter the 'Content Management' section and click on 'Publish Document' or edit an existing document, at the bottom of the document editing interface, there is usually a collapsible area named 'Other Parameters'.Expand this area, and you will see the custom fields created just now displayed in their corresponding input forms.

For example, if you created a "floor plan" (field name: houseType，Type: Single line text) and 'Is Recommended' (Field used:isRecommend，type: single selection) two fields, then in the document editing page's 'Other Parameters', you will see a text box for entering house type information, and a radio button group for selecting whether to recommend.According to the field type, you can conveniently enter the corresponding data.

Display custom fields in the front-end template

Presenting custom field data on the website frontend is a critical step in achieving personalized content display.AnQiCMS uses syntax similar to Django template engine, which is very intuitive in use.

AnQiCMS's template files are usually located in/templatedirectory, and use.htmlused as a suffix. In the template, variables are denoted by double curly braces{{变量}}To define, while logical control tags use single curly braces and percent signs{% 标签 %}.

Basic display: Directly call a single field

If you need to be displayed on the document detail page (for example{模型table}/detail.html）中显示某个特定的自定义字段，可以直接使用archiveDetailLabel.

假设您有一个自定义字段，其“调用字段”为productMaterial, used to record the material of the product. In the detail page, you can call and display it like this: 

<p>产品材质：{% archiveDetail with name="productMaterial" %}</p>

If your custom field is of the "Multi-line text" type, and you allow users to enter HTML content (such as a rich text introduction in a product detail), then when displaying on the frontend, you need to use|safeA filter to ensure that HTML content is correctly parsed by the browser and not displayed as plain text:

<div>详细介绍：{% archiveDetail productDescription with name="productDescription" %}{{productDescription|safe}}</div>

Here,productDescriptionis the alias we give to variables, used to receive the values of custom fields, and then through|safeoutput it safely through a filter.

Traversal display: Loop through all custom fields

In some cases, you may want to dynamically display all custom fields in a document, or are unsure about which custom fields each document may contain. AnQiCMS providesarchiveParamsLabels allow you to iterate through and display all custom fields of the current document.

This tag is usually used on document detail pages, and it returns an array object containing all custom field names and values.

<div class="custom-fields">
    <h4>其他产品参数：</h4>
    <ul>
    {% archiveParams params with sorted=true %}
        {% for item in params %}
        <li>
            <span>{{item.Name}}：</span> <!-- 显示字段的中文名称 -->
            <span>{{item.Value}}</span> <!-- 显示字段的值 -->
        </li>
        {% endfor %}
    {% endarchiveParams %}
    </ul>
</div>

In the above code,paramsis what we provide forarchiveParamsVariable name defined by the tag,item.NameIt will display the "parameter name" (such as "type of house") you set in the backgrounditem.ValueIt will display the data filled in for this field.sorted=trueThe parameter ensures that fields are displayed in a fixed order (usually the creation order), which is convenient for layout.

Advanced Application: Customize fields as filter criteria

The strength of AnQiCMS lies in the fact that custom fields can not only be displayed but also used to build flexible content filtering functions, especially on list pages (for example,{模型table}/list.html). ThrougharchiveFiltersLabels, you can dynamically generate the frontend filter links for the options of custom fields.

Assuming you have defined the "Type of house" (call field:) for the "Real Estate Information" model,houseType）and“area range”（field called:areaRange) and other custom fields.archiveFiltersLabels can generate clickable filter links based on the predefined values of these fields or existing data:

<div class="filter-area">
    <h4>筛选条件：</h4>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span>{{item.Name}}：</span>
            <ul>
                {% for val in item.Items %}
                <li class="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

Here are themoduleIdThe parameter points to your content model ID (for example, the ID of the "Article Model" is 1).allTextThe display text for the "All" or "Unlimited" option.item.NameIs the display name of the field,val.LabelIs the name of the filter option,val.LinkThe URL generated after clicking this option is,val.IsCurrentIt is used to determine whether the current option is selected, convenient for adding styles.

CombinearchiveListTags, you can dynamically load matching document lists based on these filtering conditions. This method greatly enhances the interactivity of website content and the convenience of user navigation.