How to display personalized information on the front end based on the custom content model fields in the backend?

Unveiling AnQi CMS: How to skillfully use backend custom fields to create personalized front-end content display

In today's rapidly changing digital world, a website is not just a carrier of information, but also a window for brand personality and user experience.Traditional website content management systems (CMS) are often limited by fixed content structures, making it difficult to meet the diverse business needs.However, AnQiCMS (AnQiCMS) has opened a new door to personalized content display for website operators with its flexible content model and powerful custom field features.

Imagine that your website is no longer a generic list of blog articles, but instead displays unique property information for different products, services, or events, such as product details, registration status of events, and features of house rentals, etc.The presentation of these personalized information is the essence of displaying customized content model fields from the Anqi CMS backend on the front end.

1. Content Model: Build your exclusive content framework

In Anqi CMS, the Content Model is the foundation for defining the structure of website content.The system provides the "article model" and "product model" by default, which are like preset content blueprints.But the real strength lies in the ability to create a new content model based on business needs, or to deeply customize an existing model.

For example, if you operate a real estate agency website, you may need a 'property model'.This model, in addition to the general fields such as title and content, also needs unique attributes such as 'house area', 'house type', 'decoration situation', and 'school district house mark'.These unique properties are achieved through custom fields.

Second, backend configuration: carefully craft your custom fields

When creating or editing a content model, go to the "Content Model Custom Fields" tab, and you can start defining these personalized information items. Here are several key points to note:

  1. Parameter name (display name): This is the field name displayed in the background editing content, which should be clear and understandable, for example, 'House Area.'
  2. Field call (field name)This is the unique identifier used when calling data in the front-end template.Make sure to use letters and keep uniqueness within the same model, for example 'houseArea'.This is a very important field, which connects the background data with the front-end display.
  3. Field type: AnQi CMS provides various field types to meet different data storage needs:
    • Single-line text/Multiline text: Suitable for short descriptions or long introductions.
    • NumberEnsure that the input data is numeric, which is convenient for subsequent sorting or filtering.
    • Single choice/Multiple choice/Dropdown choiceThese types allow you to preset a list of options. When defining, each option takes up a line, making it convenient for backend staff to select. They are usually displayed with the selected value on the front end.
  4. Is required and default valueSet whether the field is required and whether there is an initial default value according to business logic.

After you add these custom fields to the content model, when you publish or edit the content under the model, you can find the corresponding input box in the background and enter specific data.For example, when editing a house listing, you can enter "120 square meters" for the "houseArea" field.

III. Front-end display: Let the data jump onto the page.

After completing the background configuration and data entry, the next step is how to present these personalized information to users on the website front-end.The AnQi CMS template engine provides an intuitive and powerful tag (Tags) to complete this task.

  1. Get the value of a single custom field:archiveDetailTag

    If you want to display a specific custom field directly on an article or product detail page, you can usearchiveDetail.

    For example, you want to display the "house area" (the field to be called ishouseArea), and you can write it like this in the detail page template:

    <div>房屋面积：{% archiveDetail with name="houseArea" %}</div>

    If this field is optional, you may need to check if it exists to avoid displaying empty values:

    {% archiveDetail houseAreaValue with name="houseArea" %}
{% if houseAreaValue %}
    <div>房屋面积：{{ houseAreaValue }}</div>
{% endif %}

  2. Loop to display all custom fields:archiveParamsTag

    In some cases, you may want to display all custom fields in a list format, such as in the product parameter area. At this time,archiveParamsThe label can be used. It will return an array containing all custom field names (item.Name) and value (item.Value)

    <div class="product-params">
    <h4>房源特色</h4>
    {% archiveParams params %}
        <ul>
        {% for item in params %}
            <li>
                <span>{{ item.Name }}：</span>
                <span>{{ item.Value }}</span>
            </li>
        {% endfor %}
        </ul>
    {% endarchiveParams %}
</div>

    In this way, even if you add new custom fields in the future, the front-end does not need to modify the template code, and the new fields will be displayed automatically.

  3. Handle custom fields of special types.

    • Image group fieldIf you have customized a field for uploading multiple images (for examplehouseImages), you can display them in a loop like this:
      
{% archiveDetail houseImagesList with name="houseImages" %}
<div class="house-gallery">
    {% for img in houseImagesList %}
        <img src="{{ img }}" alt="房源图片">
    {% endfor %}
</div>
    • Rich text content (multi-line text and supports HTML): If your multi-line text field stores content with HTML formatting, please make sure to use|safea filter to prevent the content from being escaped, ensuring that HTML tags are rendered correctly:
      
{% archiveDetail detailDesc with name="detailDescription" %}
<div class="house-description">
    {{ detailDesc|safe }}
</div>

  4. Use custom fields to filter content:archiveFiltersTag

    Custom fields can not only be displayed but also become a powerful tool for users to filter content.For example, on the listing page, users may want to filter by 'type' or 'decoration situation'.archiveFiltersTags can help you build such a filter interface.

    You need to place in the list page template:archiveFilterstags, and combinearchiveListThe label dynamically loads content.

    <div class="filter-area">
    {% archiveFilters filters with moduleId="您的房源模型ID" allText="全部" %}
        {% for item in filters %}
            <div class="filter-group">
                <span>{{ item.Name }}:</span>
                {% for val in item.Items %}
                    <a href="{{ val.Link }}" class="{% if val.IsCurrent %}active{% endif %}">{{ val.Label }}</a>
                {% endfor %}
            </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

<div class="house-listings">
    {% archiveList archives with type="page" moduleId="您的房源模型ID" limit="10" %}
        {# 在这里循环展示筛选后的房源列表 #}
    {% endarchiveList %}
</div>

    When the user clicks the filter condition, the URL will automatically include the corresponding parameters,archiveListThe label can then retrieve and display the filtered content based on these parameters.

Four, Practical Recommendations and **Practice**

  • Plan aheadBefore defining custom fields, please fully understand the business requirements, clarify the purpose, type, and display method of each field. Good early planning can greatly reduce the cost of later modifications.
  • Naming conventions for calling fields: