How to display custom model field information in the document list?

In AnQi CMS, the flexibility of the content model is one of its outstanding advantages.Many times, we not only need to display rich content on the document detail page, but also hope to see key custom information at a glance on the document list page, such as product models, article authors, property prices, and vehicle mileage, etc.This information is often an important basis for users to quickly screen and understand the content.This article will thoroughly explain how to cleverly display these customized model field information in the document list of AnQi CMS.

Flexible customization: Understand the Anqi CMS content model

Our Anqi CMS allows us to create a variety of content models based on actual business needs.For example, in addition to the built-in articles and product models of the system, we can also create models such as "newsEach model can have its own unique set of fields, which together define the structure and content of the model.

Custom fields are the soul of the content model.They can be simple text input boxes, as well as numbers, multi-line text, single selection, multiple selection, and even file upload, among other types.By these custom fields, we can add more specific and personalized attributes to the content, thereby better managing and displaying our website content.

Step 1: Define custom fields in the background

To make custom fields display in the document list, first we need to make sure that these fields are defined in the content model of the Anqi CMS backend.

1. Enter content model management: Log in to the Anqi CMS backend, navigate to "Content Management" -> "Content Model".
2. Select or create a model：Select the model you want to add a custom field to (for example, 'Article Model' or 'Product Model'), or create a new content model.
3. Add custom fieldOn the model editing page, find the "Content Model Custom Field" area. Click "Add Field" to add the required custom information to your model.
   • Parameter NameThis is the field displayed in the background management interface, usually in Chinese, easy to understand (such as 'Product Model', 'Article Author').
   • Field invocationThis is the unique identifier used in the template to call this field, it must be alphabetic.This is the key we use in the front-end template (for example, "model_number", "author_name").
   • Field type: Choose the data type you want to store, such as 'single-line text', 'number', 'multi-line text', etc.
   • Mandatory?: Set according to requirements.
   • Default valueA default value can be preset, which will be automatically applied if the user does not fill in the content at the time of publication.
4. Save modelAfter adding fields, be sure to save the changes to the content model.

After completing this step, when you publish the document under the corresponding model, you will see these newly added custom fields and can fill in their content.

Step two: Modify the template, call the custom field on the list page

In Anqi CMS, the presentation of the website page is determined by the template file. To display custom fields in the document list, we need to modify the corresponding list page template file.

The template of AnQi CMS follows a syntax similar to the Django template engine, variables are enclosed in double curly braces{{变量}}Logic control uses{% 标签 %}. Template files are usually stored in/templateIn a directory, and organized according to a certain directory structure (for example{模型table}/list.htmlfor the list page).

We will mainly usearchiveListtags to get the document list, and combine them in a loop.archiveParamsLabel to retrieve custom fields for each document.

1. Locate the list page template file.:

   • Assuming you want to display custom fields on the article list page, you need to find the corresponding article list template, usuallytemplate/你的模板名称/article/list.htmlortemplate/你的模板名称/archive/list.html.
   • If you are not sure which file it is, you can refer to the naming conventions of the 'Document List Page' in the 'Template Creation Directory and Template' document.

2. Get document list: In the list template, there is usually aarchiveListtag to loop through documents:

   
   {% archiveList archives with type="page" limit="10" %}
       {% for item in archives %}
           {# 这里是每个文档的显示区域 #}
           <a href="{{item.Link}}">
               <h5>{{item.Title}}</h5>
               <div>{{item.Description}}</div>
               {# ... 其他内置字段 ... #}
           </a>
       {% empty %}
           <p>目前没有文档。</p>
       {% endfor %}
   {% endarchiveList %}
   

   itemrepresenting each document object in the loop, we can get the built-in fields of the document throughitem.Title/item.Linkand so on.

3. Call custom model field: Custom model field is not directly included initemthe object. We need toforuse the tag inside the loop for each document toarchiveParamsget its custom field.archiveParamsThe tag needs to pass the current document'sIDto get the corresponding field information.

   {% archiveList archives with type="page" limit="10" %}
       {% for item in archives %}
           <div class="document-item">
               <a href="{{item.Link}}">
                   <h3>{{item.Title}}</h3>
                   <p>{{item.Description}}</p>
                   {# 显示自定义字段区域 #}
                   <div class="custom-fields">
                       {% archiveParams params with id=item.Id %}
                           {% for field in params %}
                               {# field.Name 是后台设置的“参数名”（中文） #}
                               {# field.Value 是该字段的具体内容 #}
                               <p><strong>{{field.Name}}:</strong> {{field.Value}}</p>
                           {% endfor %}
                       {% endarchiveParams %}
                   </div>
               </a>
           </div>
       {% empty %}
           <p>目前没有文档。</p>
       {% endfor %}
   {% endarchiveList %}
   

   In the code above, we go through{% archiveParams params with id=item.Id %}to get the currentitem(document) all custom fields, and store them inparamsIn the variable. Then, we use it againforLoop throughparamsVariable, you can display the name and value of each custom field.

4. Display specific custom fields as neededIf you are only concerned with a specific custom field and know its 'reference field' name (such as the one we defined before)author_nameyou can also directly pass througharchiveDetailtags:

   {% archiveList archives with type="page" limit="10" %}
       {% for item in archives %}
           <div class="document-item">
               <a href="{{item.Link}}">
                   <h3>{{item.Title}}</h3>
                   <p>{{item.Description}}</p>
                   {# 显示特定的自定义字段，例如“文章作者” #}
                   <p>
                       <strong>作者:</strong> {% archiveDetail with name="author_name" id=item.Id %}
                   </p>
               </a>
           </div>
       {% empty %}
           <p>目前没有文档。</p>
       {% endfor %}
   {% endarchiveList %}
   

   This method is more concise when displaying a small and fixed number of custom fields.

Points to note

• Clear cache: After modifying the template file, you may need to log in to the Anqi CMS backend, click the 'Update Cache' button, so that the modification takes effect.
• Field type processing:
  • Multi-line text (rich text)If the custom field is a multi-line text or rich text editor type, its content may contain HTML tags. When outputting, it is necessary to use|safeA filter to ensure that HTML is parsed correctly and not displayed as plain text, for example{{field.Value|safe}}.
  • Image type: If the custom field is an image upload type, itsfield.ValueThis stores the image URL. When displaying, you need to wrap it in<img>tags:<img src="{{field.Value}}" alt="{{item.Title}}">. If you need to display a thumbnail, you can usethumbFilter:<img src="{{field.Value|thumb}}" alt="{{item.Title}}">.
  • multiple selection/dropdown selectionThese fields' values may be an array or a comma-separated string. Depending on the actual storage format, you may need to further process it (for example, usingsplitThe filter splits the string into an array and then loops through it to display).
• Accuracy of field name call: Always use the field name set in the background (in English letters), not the parameter name (in Chinese), and pay attention to the case.

By following these steps and注意事项, you can flexibly display various custom model field information in the Anqi CMS document list, thereby greatly improving the management efficiency and user experience of website content.

Frequently Asked Questions (FAQ)

1. I added a custom field in the background and modified the list template, but the front-end page did not display. What went wrong?Make sure you have clicked 'Save' after modifying the content model in the background, and confirm that you are using the correct 'Field Name' in the template (not 'Parameter Name').At the same time, the most important step is to log in to the Anqi CMS backend, click the 'Update Cache' button at the bottom of the left navigation bar, clear the system cache, so that template modifications can take effect in a timely manner.

2. Why is the list page displaying a picture link instead of the picture itself when my custom field is of image type?Image type custom field, its value is usually the URL of the image. In the template, you need to put this URL in the<img>label'ssrcattribute to display the image. For example:<img src="{{field.Value}}" alt="{{item.Title}}">If you want to display a thumbnail, you can also use{{field.Value|thumb}}filter.

3. How do I display multiple selected values for my custom field on the list page?The values of multi-select fields are usually stored in a string separated by commas or other delimiters. You can use them in a template.splitThe filter can split them into an array, then throughforLoop through and display each option. For example:{% for option in field.Value|split:"," %} <span>{{option}}</span> {% endfor %}The specific separator needs to be determined according to the default format set in your backend.