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 post "real estate information", which requires exclusive fields such as "house type", "area", "orientation", etc.Or you are running a "job platform" and need "position name", "work location", "salary range", and "skill requirements".At this moment, the flexible content model and custom field function of AnQiCMS are particularly important, as they help us create a content structure that perfectly fits the business and display it accurately on the website front end.

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

Understand the value of content models and custom fields

In AnQiCMS, the content model can be understood as a "blueprint" for creating various content types.The system provides default "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 become inadequate.

Custom fields are created to solve 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 rich display content, thereby optimizing the overall user experience.

Create and configure custom fields

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

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

  2. Select or create a model:You can choose to edit an existing content model (such as "article model"), add new fields to it, or create a new content model to hold specific types of content.Click "Add a custom model" or select a model to edit.

  3. Add custom field:Enter the model editing page, where you will see an area named "Content Model Custom Field".Here, we can add and configure the required fields. Each time you add, you need to fill in the following key information:

    • Parameter name:This is the Chinese name displayed to you in the background, such as "House type","Salary range".
    • Call field:this is the english identifier stored in the database and called in the frontend 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 requirements:
      • Single-line text:Suitable for short text input, such as product models, author names.
      • Number:Enter only numbers, such as inventory quantity, product price.
      • Multi-line text:Suitable for longer text, such as product features, job descriptions.
      • Single choice:Provide multiple options, but only one can be selected, for example 'Gender', 'Do you recommend it'.
      • Multiple selection:Provide multiple options that can be selected, for example 'Skill tags', 'Product features'.
      • Dropdown selection:Similar to single selection, but presented in a dropdown menu to save page space.
    • Mandatory?:If this field is required, please check it, the system will validate it at submission.
    • Default:If the field has a preset value, it can be entered here. For the 'single selection', 'multiple selection' and 'drop-down selection' types, this is used to enter the value of each option, with each option occupying 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.

After custom field configuration is completed, they will immediately appear in the content publishing and editing interface.

When you enter the "Content Management" below 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 you just created displayed in the corresponding input form.

For example, if you create a "floor plan" (field call:houseType, type: Single-line text) and "Is recommended" (called field: "),isRecommendTwo fields, such as type: single selection, will appear in the "Other Parameters" text box on the document editing page. 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 easily 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 a syntax similar to the Django template engine, which is very intuitive to use.

AnQiCMS template files are usually located/templatethe directory and use.htmlas a suffix. In the template, variables are passed through double curly braces{{变量}}To define, while logic control tags use single curly braces and percent signs{% 标签 %}.

Basic display: Directly call a single field

If you need to display document details (for example{模型table}/detail.htmlIt shows a specific custom field that can be used directlyarchiveDetail.

Assume you have a custom field whose 'call field' isproductMaterialUsed to record product material. 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 product details), then when displaying on the front end, you need to use|safeA filter to ensure that HTML content can be correctly parsed by the browser, rather than displayed as plain text: 

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

here,productDescriptionis the alias we give to a variable, used to receive the value of a custom field, and then through|safefilter for safe output.

Traversal display: loop through all custom fields

In some cases, you may want to dynamically display all custom fields in a document, or you may not be sure which custom fields each document will contain. AnQiCMS providesarchiveParamsThe tag allows you to iterate and display all custom fields of the current document.

This tag is usually used on the document detail page, it will return 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 code above,paramsis forarchiveParamsTag-defined variable name,item.NameIt will display the "parameter name" (such as "room type") you set in the background, whileitem.Valueit will display the data filled in for this field.sorted=trueThe parameter ensures that fields are displayed in a fixed order (usually the order of creation), which is convenient for layout.

Advanced Application: Use custom fields as filtering 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 (such as{模型table}/list.html)。ByarchiveFiltersLabel, you can dynamically generate the frontend filter link for the options of the custom field.

Assuming you have defined the 'House Type' field (using field:houseType）and“area range”（field called:areaRange）etc. custom fields.archiveFiltersLabels can generate clickable filter links based on the preset 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>

HeremoduleIdThe parameter points to your content model ID (for example, the ID of the 'Article Model' is 1).allTextIt defines the display text for the 'All' or 'Unlimited' options.item.NameIs the display name of the field,val.LabelIs the name of the filter option,val.LinkIs the URL generated after clicking the option for filtering,val.IsCurrentUsed to determine whether the current option is selected, convenient for adding styles.

CombinearchiveListLabel, you can dynamically load the list of matching documents based on these filter conditions. This method greatly enhances the interactivity of the website content and the convenience of user navigation.