How to customize the AnQiCMS content model to achieve personalized display of specific data on the front page?

In content operation, we often encounter such situations: the standard 'article' or 'product' content types cannot fully meet the diverse information display needs of the website.For example, a event page may need "registration deadline" and "event location", and a job information may need "position salary" and "work location", all of which are not possessed by traditional content models.At this moment, the flexible content model customization function of AnQiCMS (AnQiCMS) is particularly important, as it helps us easily build data structures that conform to specific business logic and presents them individually on the website front-end.

Understanding the importance of the content model

In Anqi CMS, the content model can be considered as the 'skeleton' of the website content, defining which fields and data types each content type (such as articles, products, events, recruitment, etc.) contains.The system provides default "article model" and "product model", but the real power lies in our ability to create or modify these models according to actual business needs, in order to precisely manage and display data of any type.This means that your website is no longer limited by predefined frameworks, but can be built entirely according to your imagination.

Step 1: Create or modify the content model

To start customization, first you need to enter the Anqie CMS backend management interface.Find the "Content Management" menu in the left navigation bar and then click on the "Content Model".This will list all existing content models, including system-built-in and custom ones.

If you want to create a completely new content type, such as "Recruitment Position" or "Course Information", you can click "Add New Model".If you want to add a field to an existing model (such as an article or product), click the 'Edit' button on the right side of the corresponding model.

In the model editing interface, you will see several core configuration items:

• Model nameThis is the Chinese name displayed on the front and back end of the model, such as "Job Position", "Course".
• Model table nameThis is the table name stored in the database for the model data, it must be in lowercase English letters and must be unique in all models, it is also an important identifier when calling data in the template.
• URL alias: Used in static rule, represents the model in the URL path, and it is recommended to use lowercase letters in English.
• Title NameThis will be used as the main title field prompt when you publish the model content, making it convenient for content editors to understand.

Step two: define custom fields to enrich the data structure

The next key step is to add custom fields to your content model for personalized display.At the bottom of the model editing page, there is a "Content Model Custom Field" area.Here, you can add various types of fields to store specific data.

Click "Add field", you need to configure the following items:

• Parameter NameThis is the Chinese name displayed in the background editing interface, such as "Position Salary", "Location of Work", "Event Date".
• Field invocationThis is the English name stored in the database for this field, which is also an important identifier used in the template to retrieve data. It is recommended to use camelCase or underscore naming conventions, such asjobSalary/workLocation/activityDateThis name must be unique and comply with programming specifications.
• Field type: AnQi CMS provides various field types to adapt to different data formats:
  • Single-line text: Suitable for short text information, such as 'product model', 'author name'.
  • Number: Only input numbers, such as 'inventory quantity', 'product price'.
  • Multi-line textThis is applicable for long text descriptions, such as 'job description', 'event details'.
  • Single choice, multiple choice, dropdown choiceThese three types can preset multiple options for content editors to choose from in a list, commonly used for 'house types', 'gender', 'product color', etc.You need to enter an option per line in the "default value".
• Mandatory?This determines whether the content editor must fill in this field when publishing.
• Default value: Set a default value for the field. This is where all options are defined for selection fields.

By reasonably defining these custom fields, you can build precise data structures for different types of content, thus laying a solid foundation for front-end personalized display.

Third step: publish content, fill in custom data

After you have completed the definition of the content model and saved it, you can start publishing content of the corresponding type.Under "Content Management", select your custom model, click "Add Document" (or the button corresponding to your model name).

In the content publishing interface, in addition to the default fields such as title, content, and category, you will find a new 'Other Parameters' area at the bottom that you have defined in the model.All custom fields will be displayed here with the prompt name you set, waiting for you to fill in specific data.

Please note that each document must select a category it belongs to, and that category belongs to a content model.Only by selecting the corresponding category can the content model's unique custom fields be displayed and filled in correctly.

Fourth step: implement personalized display on the front-end page (template customization)

The data structure has been defined, the content has also been filled in, and the next most anticipated part is: how to make these customized data shine on the front page.The Anqi CMS adopts a syntax similar to the Django template engine, making template customization intuitive and powerful.

1. Access the custom data of a single document

   When you are on the document details page, you can usearchiveobjects to access your custom fields. For example, if you have a namedjobSalarycalled field, you can use it directly in the template{{archive.JobSalary}}To display its content. Note that the field name is usually capitalized in the template.

   If you need to loop through all custom fields or the field name is uncertain, you can usearchiveParamsTags:

   {% archiveParams params %}
       <div>
           {% for item in params %}
           <div>
               <span>{{item.Name}}：</span>
               <span>{{item.Value}}</span>
           </div>
           {% endfor %}
       </div>
   {% endarchiveParams %}
   

   If your custom field stores rich text (which may contain HTML), be sure to add|safeA filter to prevent HTML from being escaped, or if the content is in Markdown format, you can use|renderA filter to render it as HTML:

   <div>职位描述：{{archive.JobDescription|safe}}</div>
   {# 如果是Markdown内容 #}
   <div>技术要求：{{archive.TechRequirements|render|safe}}</div>
   

2. Access custom data in the list

   On the list page (such as the recruitment list, course list), you can usearchiveListtags to get the document list. WhenforLoop througharchivesor you define a variable, eachitemrepresents a document, you can also useitem.自定义字段名Come visit its custom data:

   {% archiveList archives with moduleId="您模型对应的ID" type="page" limit="10" %}
       {% for item in archives %}
       <div>
           <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
           <p>职位薪资：{{item.JobSalary}}</p>
           <p>工作地点：{{item.WorkLocation}}</p>
           {# 其他自定义字段... #}
       </div>
       {% endfor %}
   {% endarchiveList %}
   

3. Filter content based on custom fields

   A more advanced usage is to allow visitors to filter content based on custom fields. Anqi CMS providesarchiveFiltersTo achieve this goal, for example, in the job listing, users can filter for 'full-time' or 'part-time' positions.

   First, you need to make sure that these custom fields are searchable in the content model configuration. Then, use it in the template like this:

   <div>
       <h3>职位筛选：</h3>
       {% archiveFilters filters with moduleId="您模型对应的ID" allText="不限" %}
           {% for item in filters %}
           <p>{{item.Name}}:</p>
           <ul>
               {% for val in item.Items %}
               <li class="{% if val.IsCurrent %}active{% endif %}"><a href="{{val.Link}}">{{val.Label}}</a></li>
               {% endfor %}
           </ul>
           {% endfor %}
       {% endarchiveFilters %}
   </div>
   

   This code will generate a set of filter options, which will automatically filter the content based on the selected custom field value when the user clicks.

4. The relationship between model and template

   AnQi CMS also supports specifying different template files for different content models. By default, the system will try to find{模型表名}/detail.htmlas the detail page template, as well as{模型表名}/list.htmlas the list page template. For example,