How to flexibly display different content types on the front-end page after customizing the content model?

In modern website operations, the diversity and personalized display of content are key to attracting users and enhancing brand image.AnQiCMS (AnQiCMS) with its flexible content model design, has brought unprecedented freedom to website content management.How to beautifully present the content with unique structure on the front page after customizing the content model according to business requirements, is a core skill that every operator needs to master.

Understanding the content model and flexible foundation of Anqi CMS

One of the core advantages of Anqi CMS is that it provides the 'flexible content model' feature.This means we are no longer limited to traditional 'article' or 'product' concepts, but can define any content type we want based on actual business scenarios.For example, you can create a "course" model to manage online learning materials, a "property" model to display real estate information, or a "team member" model to introduce company employees.

When creating these custom content models, you can add various 'custom fields' as needed.These fields are like the skeleton of content, which can be simple single-line text, numbers, or more complex image groups, multi-line text editors, as well as dropdown selections, radio buttons, or checkboxes.These custom fields give the content model a unique structure and rich data dimensions.For example, a "course" model can have fields such as "course name

This highly customizable content structure is the foundation for the flexible front-end display of Anqi CMS.It ensures that the data stored on the backend matches our expected frontend presentation.

The magic of front-end templates: an introduction to Django syntax

The front-end display of Anqi CMS benefits from its powerful Django-like template engine. It uses.htmlThe file acts as a template and provides an intuitive syntax, making it easy for users who do not understand complex programming to get started.

In the template file, we mainly encounter two types of syntax structures:

  1. double curly braces{{变量}}This is used to output the content of the variable. For example,{{archive.Title}}It will directly display the title of the current content.
  2. single curly braces and percent signs{% 标签 %}This is used to perform logical operations, such as conditional judgments, loop traversals, or calling specific function tags. For example,{% if condition %}is used for judgment,{% for item in list %}is used for loops.

All template files are stored in a unified location/templateUnder the directory, and the template engine supports UTF8 encoding, ensuring the correct display of content.

Core strategy: the combination of general and customized templates

In order to flexibly display different content structures, Anqi CMS provides a powerful template naming and calling mechanism.We can choose to use a general template, or specify a dedicated template for a specific content type or individual content item.

  • The default conventions of the general template: AnQi CMS will match the model模型tablename automatically and match the corresponding template file. For example, a model namedarticlewill usually look for the content list pagearticle/list.htmland the detail page will look forarticle/detail.html. The category list page will search for{模型table}/list-{分类id}.htmlwhile a single page can be bypage/{单页面id}.htmlCustomize. This means that for all content under a certain content model, as long as their structure is similar, they can share a set of common templates, greatly reducing the workload of repeated development.

  • Fine control of customized templatesWhen encountering special content that requires a layout completely different from the general template, Anqi CMS also provides a solution.For example, a specific 'download' article may require a detailed page with a download button, version information, and special layout.download.htmlThen fill in the document template field in the editing interface of the article (in the "Other Parameters" section), filedownload.html.This article will be displayed first using this customized template, while other articles will continue to use the default general template.This mechanism also applies to category pages and single pages, which can be realized by setting up "category template" or "single page template" in the background.

Flexible display of custom field content

Custom fields are the core of the content model, and displaying their content on the front end is crucial. Anqi CMS provides two main methods to retrieve and display these custom fields:

  1. Direct pass.archiveDetailtag to obtainIf your content model has a field namedauthoryou can use it directly in the detail page template{% archiveDetail with name="author" %}To get its value. This method is concise and clear, suitable for when you know exactly which custom field to display.
  2. ByarchiveParamsLoop through all custom fields with tags.Sometimes, we may be unsure of what custom fields the content model has, or we may want to dynamically display all custom fields and their values, for example, listing all product specifications on a product detail page. At this point,{% archiveParams params %}{% for item in params %}{{item.Name}}：{{item.Value}}{% endfor %}{% endarchiveParams %}It is very useful. It will traverse all the custom fields defined in the content model and output their names and corresponding values. Throughsorted=trueParameter, you can also ensure that the fields are displayed in the order defined by the backend.

For example, if your 'product' model defines custom fields such as 'material', 'color', 'size', etc., you can display them like this on the product detail page template: 

{# 假设这是产品详情页模板 product/detail.html #}
<div class="product-info">
    <h1>{{archive.Title}}</h1> {# 产品标题 #}
    <img src="{{archive.Logo}}" alt="{{archive.Title}}"> {# 产品主图 #}

    <div class="product-specs">
        <h2>产品参数</h2>
        {% archiveParams params %}
        <ul>
            {% for item in params %}
                {# 排除一些内部字段或不需要展示的字段 #}
                {% if item.FieldName != 'price' and item.FieldName != 'stock' %}
                <li>
                    <strong>{{item.Name}}：</strong>
                    <span>{{item.Value}}</span>
                </li>
                {% endif %}
            {% endfor %}
        </ul>
        {% endarchiveParams %}
    </div>

    <div class="product-description">
        <h2>产品详情</h2>
        {# archive.Content是富文本内容，使用safe过滤器防止HTML转义 #}
        {{archive.Content|safe}}
    </div>
</div>

In this example,archive.Titleandarchive.LogoIs an Anqi CMS built-in field, while the "Product Parameters" section is througharchiveParamsDynamically displays all custom product specifications.

Scenario-based application: display cases of different content types

  • Article detail page: A typical article detail page may include title, publication time, category, tags, and body. In addition to built-in fields, you may also have a custom "article source" field.

    <h1>{{archive.Title}}</h1>
<p>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02")}} |
   分类：<a href="{{category.Link}}">{{category.Title}}</a> |
   来源：{% archiveDetail with name="source" %}</p>
<div class="article-content">{{archive.Content|safe}}</div>

    here,stampToDateThe filter is used to format timestamps,category.Linkandcategory.Titlethen through built-in archive.Categoryobject to get the current article's category information.

  • Product list pageIf you have a "product" model, the list page may need to display product images, names, prices, and a custom "main selling point" field.

    {% archiveList products with type="page" moduleId="2" limit="10" %}
    {% for product in products %}
        <div class="product-card">
            <a href="{{product.Link}}">
                <img src="{{product.Thumb}}" alt="{{product.Title}}">
                <h3>{{product.Title}}</h3>
                <p class="price">¥ {% archiveDetail with name="price" id=product.Id %}</p>
                <p class="selling-point">{% archiveDetail with name="selling_point" id=product.Id %}</p>
            </a>
        </div>
    {% endfor %}
    {% pagination pages with show="5" %} {# 展示分页 #}
{% endarchiveList %}

    In this example,archiveListGet the product list and byproduct.IdCombinearchiveDetailGet the custom price and selling points fields for each product.

  • single pageFor the "About Us" page, in addition to the regular content, you may also want to display a background image (custom field `