How to display personalized information on the front-end based on custom field models in the background?

Reveal the security CMS: How to cleverly use backend custom fields to create personalized front-end content display

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

Imagine that your website is no longer just a generic list of blog posts, but instead showcases unique property information for different products, services, or events, such as detailed product specifications, event registration status, and characteristics of house rental, etc.The presentation of these personalized information is the essence of displaying the custom content model fields of the Anqi CMS backend on the front end.

I. Content Model: Build your exclusive content framework

In the AnQi CMS, the Content Model is the foundation for defining the structure of website content.System default provides the "Article Model" and "Product Model", which are like preset content blueprints.But the real strength lies in the fact that you can create a completely new content model based on your business needs, or deeply customize an existing model.

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

English, carefully crafted your custom fields

Create or edit content models by entering the "Content Model Custom Fields" tab, and you can start defining these personalized information items. There are several key points to note here:

1. Parameter name (display name)'} ]This is the field name displayed to the user while editing content in the background, it should be clear and easy to understand, for example 'House Area'.
2. Field call (field name)This is the unique identifier used when calling data in the front-end template.Please make sure to use English letters, and maintain uniqueness within the same model, for example "houseArea".This is a very important field, it connects the background data with the front-end display.
3. field type：Security CMS provides various field types to meet different data storage needs:
   • Single line text/Multiple line text：Suitable for brief descriptions or long introductions.
   • NumberEnsure that the input data is of numeric type, for easy sorting or filtering.
   • Single choice/Multiple choice/Drop-down choiceThese types allow you to preset an option list. 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 frontend.
4. Is required and default value: Set whether the field is required to be filled in according to business logic, and whether there is an initial default value.

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

III. Front-end display: Let the data leap 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 frontend.The template engine of AnQi CMS provides intuitive and powerful tags to complete this task.

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

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

   For example, if you want to display the 'floor area' of the listing (the field is calledhouseArea)}, 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:archiveParamstags

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

   <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>
   

   Through this method, even if you add new custom fields in the future, the front-end does not need to modify the template code, and 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 example)houseImages), 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 the multi-line text field stores content with HTML formatting, please be sure to use|safeThe filter to prevent content from being escaped ensures 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:archiveFilterstags

   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 "house type" or "renovation status".archiveFiltersTags can help you build such a filtering interface.

   You need to place in the list page template.archiveFilterstags, and combinearchiveListTags for dynamic loading of 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,archiveListTags can obtain and display filtered content based on these parameters.

IV. Practical Suggestions and **Practice**

• Plan aheadBefore defining custom fields, please fully understand the business requirements, clarify the purpose, type, and display method of each field. Good planning in the early stage can greatly reduce the cost of modifications later.
• Call field naming convention: