How do custom fields in the Anqi CMS content model affect the display of document detail pages?

In AnQiCMS, the content model and custom fields are the core functions to enhance the flexibility and diversity of website content management.They make websites no longer limited to the traditional 'title+content' mode, but can display more personalized and structured information according to different business needs.How do these meticulously configured custom fields in the background affect the display of our website's document detail page?

Understanding the association between the content model and custom fields

To explore how custom fields affect the document detail page, we first need to understand the "content model" in AnQiCMS.In simple terms, the content model is the 'skeleton' or 'blueprint' of various types of content on your website.For example, your website may need to publish common 'articles', or display specific 'product' information, or promote an 'event'.These different types of content have entirely different information structures.The article may have an author, source, and publication date; products should have price, inventory, product parameters, and multiple image displays, etc.

The flexible content model feature of AnQiCMS is exactly to solve this pain point.It allows you to create or modify content models based on actual business needs and add exclusive "custom fields" to them.These custom fields are like information slots on the content model, and you can define them as needed.In the background "Content Management" under the "Content Model" settings, you can add custom fields for each model and set the "parameter name" (display name on the front-end), "field name used in template" (variable name), and "field type".

The field type is very critical, as it determines what type of data the field can store and also indirectly affects the display style on the front end.AnQiCMS supports various field types such as single-line text (suitable for names of authors, product models, etc.), numbers (such as price, inventory), multi-line text (such as product descriptions), single selection, multiple selection, drop-down selection (suitable for properties with preset options, such as color, size), as well as images and files.These different types provide your content with great structural capabilities.

The custom field is displayed on the document detail page

When you add or edit documents in the background, once you have selected a category under a content model, you will find that in addition to the common fields such as document title and content, a foldable box named "Other parameters" will appear at the bottom of the page.Here is displayed the entire set of custom fields you have defined for the content model.You can enter the corresponding content according to these field prompts, such as filling in the price, brand for products, and adding the author, source for articles, etc.

This data filled in the background needs to be displayed on the front-end document detail page.AnQiCMS uses the Django template engine syntax, allowing you to flexibly control the display of content.In the template file corresponding to the document details page (usually{模型table}/detail.htmlIn or custom document template），you have multiple ways to call these custom fields：

1. Call by variable name:For simple, definite custom fields, such as the field you defined as a call field forauthora single-line text field, it can be used directly in the template{{archive.author}}This displays its content. This method is concise and clear, suitable for cases where you clearly know the field name and the field content does not require special processing.

2. UsearchiveDetailTag retrieval: archiveDetailIs a powerful tag provided by AnQiCMS, which can not only get the built-in fields of the document, but also get custom fields by name. For example, if your product model has a field calledpriceThe numeric field, you can use{% archiveDetail with name="price" %}To retrieve and display the price. This method is particularly suitable for when you want to obtain and display a custom field value individually in a template, and may need to perform additional processing on it.

3. UsearchiveParamsTag to loop and retrieve all custom fields:In some cases, you may want to dynamically list all the custom fields of a document, for example, to display a complete list of 'product parameters' on a product detail page. At this point,archiveParamsThe tag is very convenient. It will return an array object containing all custom fields, and you canforloop through this array to display the names and values of each field:

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

   This method is very flexible, even if you delete or add custom fields in the background later, the front-end page can automatically adapt without modifying the template code.

Considerations for displaying different custom field types

Different types of custom fields, which may require different handling when displayed on the front end:

• Single-line text, numbers, radio buttons/dropdown selections:This field's content is usually plain text or numbers and can be directly translated{{变量名}}Output.
• Multiline text or rich text (for example, when the Markdown editor is turned on):These fields may contain HTML tags or Markdown syntax. To ensure that this content is parsed and rendered correctly by the browser rather than displayed as plain text, you need to use|safeFilter. If your multi-line text field stores Markdown formatted content and you want it to be automatically converted to HTML on the front end, in addition to enabling the Markdown editor on the back end, you also need to use the template.|render|safea filter such as{{archive.introduction|render|safe}}.
• Image/Album Field:If you have customized a field for uploading a single image, its value will be the image URL. You can use it directly in the template.<img>Tag reference:<img src="{{archive.custom_image_field}}" alt="描述" />If the custom field allows uploading multiple images (a set of images), then the value of this field is usually an array of image URLs, and you need to usefora loop to traverse and display each image.

Understand the display effect through actual cases

Imagine that you are building a product display website, and the product detail page needs to show the detailed parameters such as "brand", "model", "power", "applicable area", and so on.Through the AnQiCMS content model, you can add these custom fields to the 'product model', the type may be single-line text, number, or dropdown selection.

When the user visits a product detail page, the template organizes the content this way: Firstly, use<h1>{{archive.Title}}</h1>Display the product name. Next, througharchiveDetailGet the product image:<img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />. Then, the most exciting part comes—the product parameter list. You can usearchiveParamstags to traverse and display all custom parameters:

<div>
    <h3>产品参数：</h3>
    {% archiveParams params %}
        {% for item in params %}
        <div>
            <span>{{item.Name}}：</span>
            <span>{{item.Value}}</span>
        </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

In this way, no matter how many parameters you add to the product in the background, the front-end page can automatically and elegantly display them without having to modify the template code each time. If the product description is a rich text field, you would use<div>{% archiveDetail with name="Description" %}{{archive.Description|safe}}</div>Make sure that its HTML content is parsed correctly.

By this method, AnQiCMS's custom fields greatly enhance the richness and management efficiency of content, allowing you to easily build clear, comprehensive, and highly personalized document detail pages.It gives content operators powerful control over information display, making your website content no longer monotonous.

Frequently Asked Questions (FAQ)

Q1: Why is a multi-line text custom field displayed as plain text with HTML tags on the detail page?A1: This is because the Django template engine defaults to escaping output content to prevent XSS attacks. If your multi-line text field content is HTML code edited by a rich text editor, or if you want Markdown content to be converted to HTML for display, you need to use this field when calling it in the template|safeFilter, for example{{archive.your_custom_field|safe}}If the content is in Markdown format, then you need to use|render|safeFor example{{archive.your_markdown_field|render|safe}}.

Q2: I created a custom 'product album' field (multiple images uploaded), how should I display multiple images on the detail page?A2: When the custom field is set to