In AnQiCMS, the content model and custom fields are the core functions that enhance the flexibility and diversity of website content management.They make websites no longer limited to the traditional "title+content" model, but able to display more personalized and structured information according to different business needs.Then, how do these carefully 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 "articlesThis content of different types has completely different information structures.The article may have author, source, publication date; the product needs to have price, stock, product parameters, multiple images display, etc.
AnQiCMS's “Flexible Content Model” feature is designed to address 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 individual information slots on the content model, and you can define them as needed.In the "Content Management" under "Content Model
The field type is very important, it determines what type of data the field can store, and also indirectly affects the display method on the front end.AnQiCMS supports various field types, such as single-line text (suitable for author names, product models, etc.), numbers (such as price, stock), multi-line text (such as product descriptions), single selection, multiple selection, dropdown selection (suitable for properties with preset options, such as color, size), and images and files, etc.These different types provide great structural capabilities for your content.
Custom field display on the document detail page
When you add a document or edit a document in the background, once you have selected a category under a content model, you will find that in addition to common fields such as document title and content, a collapsible box named 'Other Parameters' will appear at the bottom of the page.Here is displayed, exactly the full set of custom fields you have defined for this content model.You can enter the corresponding content according to the prompts for these fields, such as filling in the price, brand for products, and adding authors, sources for articles, etc.
This data filled in the background needs to be displayed on the front-end document detail page.AnQiCMS uses Django template engine syntax, allowing you to flexibly control the display of content.{模型table}/detail.htmlOr in the custom document template), you have multiple ways to call these custom fields:
Directly by variable name:For simple, certain custom fields, such as a field named
authoras a single-line text field, it can be used directly in the template{{archive.author}}This will display its content. This method is concise and clear, suitable for cases where you know the field name clearly and the field content does not require special processing.Use
archiveDetailLabel retrieval:)archiveDetailAnQiCMS提供的强大标签,它不仅能获取文档的内置字段,也能按名称获取自定义字段。例如,如果您的产品模型有一个调用字段为priceThe numeric field, you can use{% archiveDetail with name="price" %}Get and display the price. This method is particularly suitable if you want to obtain and display a specific custom field value in a template and possibly perform additional processing.Use
archiveParamsLabel cyclicly fetches all custom fields:In some cases, you may want to dynamically list all custom fields of a document, for example, displaying a complete list of 'product parameters' on a product details page.archiveParamsTags are very convenient. It returns an array object containing all custom fields, and you can iterate over this array to display the name and value of each field:forLoop through this array, displaying the name and value 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 add or delete custom fields in the background later, the front-end page can automatically adapt without modifying the template code.
Consideration for displaying different custom field types
Different types of custom fields 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 entered directly through
{{变量名}}Output. - Multi-line text or rich text (for example, after enabling Markdown editor):These fields may contain HTML tags or Markdown syntax. To ensure that this content is correctly parsed and rendered 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 in the template.|render|safeFilter, 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>标签引用:<img src="{{archive.custom_image_field}}" alt="描述" />If the custom field allows uploading multiple images (collage), then the value of this field is usually an array of image URLs, and you need to use a loop to iterate through and display each image.forto iterate through and display each image.
Understand display effects through real cases
Imagine that you are building a product display website, the product detail page needs to show the detailed parameters of the product 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", which may be single-line text, numbers, or dropdown selections.
When the user visits a product detail page, the template organizes content like this:
First, use<h1>{{archive.Title}}</h1>Display the product name.
Next, througharchiveDetailGet the product large 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>
This way, regardless of 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>To ensure that its HTML content is parsed correctly.
Through the above 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 endows content operators with strong control over information display, making your website content no longer monotonous.
Common Questions (FAQ)
Q1: I defined a custom field for multi-line text, why does it show up as plain text with HTML tags in 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 to convert Markdown content to HTML for display, you need to use this field 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 (multi-image upload). How should I display multiple images on the detail page?A2:When the custom field is set to