In website content management, flexibility is the key to improving efficiency and user experience.AnQiCMS (AnQiCMS) performs well in this aspect, its custom content model function is particularly powerful.It not only makes content management more organized, but also directly affects the way front-end data is displayed on the website, allowing the website to easily adapt to various content structures and business needs.

Understanding the custom content model

In the Anqi CMS backend, when we create a custom content model, we will define a series of fields, including:

  • Model name and URL aliasThis determines the display name of the content model in the background, as well as its appearance in the URL structure, for example,/cases/Or/activities/.
  • Title NameThis configuration item affects the prompt text of the 'Document Title' input box when content is published, making it clearer for content editors to determine whether they are entering an 'Event Name' or a 'Product Title', thereby indirectly improving the semantic accuracy of the front-end content.
  • Custom fields for content modelThis is the soul of the custom content model.It allows us to add unique data fields for each content model, and the type of these fields will directly determine the display method of the front-end data.

How custom fields affect the display of front-end data

Custom field types are diverse, each carrying different data representations, thereby presenting different effects on the frontend page:

  1. Single-line text (text) and numberThese fields are typically used to store brief text information or numbers, such as 'brand name', 'product model', 'price', 'inventory', etc.On the front end, they are often displayed directly or as a summary in a list.For example, a "product model" can have a "product model number" field, and the model information is displayed directly on the product details page.

  2. Multiline text (textarea): A multi-line text field carries more rich content, such as "event details", "product description", etc.Since it may contain HTML tags or Markdown syntax, it usually needs to be specially handled on the front end to ensure that it is correctly parsed as rich text content and presented with formatting, images, and other effects.

  3. Single choice (radio), multiple choice (checkbox), dropdown selection (select)These field types are used to set predefined options so that content editors can make choices from a limited set.On the front end, single selection is usually displayed with a single text or icon representing the selected value, while multiple selections may require iterating through all selected values to display them in the form of a list, tag cloud, or other forms.For example, a "product model" can have a "color

Besides the field type, other properties of the field will also affect the display on the front end:

  • Default value: If a field is left blank during content editing and the field has a default value set, then the default value will be displayed on the front end to ensure the integrity of the content.
  • Mandatory?This mainly affects the integrity of background content publishing, indirectly ensuring the availability of key information on the front-end page.

Flexible data calling through template tags.

The Anqi CMS adopts a template engine syntax similar to Django, which allows for easy presentation of data defined in the backend custom content model through concise template tags.

  1. Retrieve specific content data On the content details page, we can usearchiveDetailLabel to retrieve the various data of the current content, including custom fields. For example, if the product model has a custom fieldmaterial(material), then in the template, we can use{% archiveDetail with name="material" %}Come directly to display its value. Similarly,categoryDetailTags are also used to obtain detailed data of categories, including custom fields.

  2. Dynamically traverse custom fieldsSometimes, we may need to dynamically display all custom parameters of a content type on a page, such as the "specification parameters" list on a product detail page. At this point,archiveParamsThe tag comes in handy. It can traverse all custom fields of the current content, allowing us to render the names and values of these parameters uniformly in a loop, such as: 

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

    This approach is particularly suitable when there are many custom fields, or when parameters need to be dynamically added or removed based on backend configuration.

  3. Combine conditional judgment and loop.The front-end display flexibility also lies in its ability to combineifLogical judgment andforLoop tags. For example, for custom fields with multiple choices, we can iterate over all selected values; if a custom field may be empty, we can useifCheck if it exists before displaying to avoid blank pages or errors. At the same time, for multi-line text content, to correctly parse the HTML that may be included, we usually use|safeFilter to ensure content is presented in HTML format rather than plain text.

Actual effect and user value

The tight integration of the custom content model with the front-end data display brings significant value to the user:

  • Highly customizableThe website is no longer limited to a fixed content structure. It can create new content types and fields at any time according to business development without modifying the underlying code.
  • Improve content operation efficiency: When content editors fill in information in the background, the field names and types are more closely aligned with the actual content, reducing the cost of understanding and errors.
  • optimize user experience：The front-end page can accurately display the required information according to the content type, designing a more targeted and attractive page layout.
  • SEO-friendlyTo create structured data fields for different types of content, it helps search engines better understand and index website content, thereby improving search rankings.

In summary, Anqi CMS's custom content model is not just a configuration item on the back end, but a bridge connecting the back-end content structure to the front-end visual presentation.By precisely defining field types and making good use of template tags, we can grant the website great content display freedom, truly realizing content-driven website operations.

Frequently Asked Questions (FAQ)

  1. Ask: How can the fields added to the custom content model be displayed on the front page?Answer: You need to use the template tags provided by Anqi CMS in the front-end template file to call these fields. For example, for the custom fields of the current content, you can use{% archiveDetail with name="您的自定义字段名" %}To retrieve and display the value of a specific field. To iterate over all custom fields, you can use{% archiveParams params %}{% for item in params %}{{item.Name}}: {{item.Value}}{% endfor %}{% endarchiveParams %}.

  2. Ask: If my custom field is the content entered in the rich text editor (which may contain HTML), will it display abnormally on the front end?Answer: Yes, if displayed directly, it may output HTML tags as plain text. To render these HTML contents correctly, you need to use the output field content in the template with|safea filter. For example:{{ archiveContent|safe }}or{{ item.Value|safe }}.

  3. Ask: Can I control the different styles or content displayed on the front page based on the value of a custom field?Of course, you can use the Anqi CMS template engine's{% if 条件 %}The tag to determine the value of a custom field, then display different content or apply different CSS styles based on the judgment. For example, if there is a custom fieldis_featured(Recommended), you can write in the template{% if archive.is_featured %} <span class="featured-badge">推荐</span> {% endif %}.