How to customize the content model to display different types of content (such as articles, products) in a unique way on the frontend page?

In AnQi CMS, the custom ability of the content model is one of its core advantages, which gives us great flexibility, allowing the website to break free from the traditional constraints of 'articles' and 'pages', and organize and display various types of information according to actual business needs.Whether it is a complex e-commerce product detail or a concise corporate case presentation, unique styles and functions can be presented on the front-end page through a customized content model.

The importance of understanding content models

Content model, simply put, is the 'skeleton' or 'blueprint' of the content on your website.It defines which fields should be included for each type of content, for example, an article may include 'title', 'author', 'publish date', 'content', etc., while a product may require 'product name', 'price', 'stock', 'brand', 'detailed description', and 'multi-image display' etc.

The reason why AnQi CMS emphasizes its flexible content model is that it deeply understands that different types of websites or businesses have diverse needs for content structure. By customizing the content model, we can:

  • Implement fine-grained management:Set exclusive data fields for different types of content, avoid redundant information, and improve backend management efficiency.
  • Optimize frontend display:Display information on the front-end page in a way that is more in line with the content characteristics, more attractive, and enhances user experience according to custom fields.
  • Improve SEO effectiveness:Customize URL structures and TDK (title, description, keywords) for specific content types to better meet search engine optimization needs.
  • Enhance system adaptability:Whether it is to build an enterprise website, a product display site, or a self-media blog, it can quickly adapt and expand the content type.

Create and manage custom content models in AnQi CMS

To start customizing the content model, we need to enter the Anqi CMS backend management interface.通常，你可以在左侧导航栏找到“内容管理”选项，点开后，会看到“内容模型”。This is the management center for all content models (including built-in articles, product models, and user-defined models).

Click "Add Model" or edit an existing model, and you will see the following key settings:

  1. Model name:This is the Chinese name of the model on the back-end and user interface, such as "News
  2. Model Table Name:This is a very critical setting. It defines the table name in which the model's data is stored in the database.The front-end template will use this table name to find the corresponding template file.For example, if you set the model table name tosolution, then the corresponding list page and detail page templates may be named respectivelysolution/list.htmlandsolution/detail.html. This table name is usually composed ofin English lowercase letters, ensure uniqueness.
  3. URL Alias:This is the identifier for the front-end URL, which is usually also in English lowercase and convenient for generating static links.
  4. Title Name:This field will prompt the text next to the 'Title' input box when publishing the model content.For example, if the model is "product

It is of great importance.Custom fields of the content modelThis is the core of the flexibility and variability of the content model. Here, you can add unique fields to the current model to meet the display needs of specific types of content. For example:

  • For a 'product' model, you may need to add fields such as 'price' (numeric type), 'stock' (numeric type), 'brand' (single-line text), 'application scenarios' (multiple choices), and 'product highlights' (multi-line text).
  • For a "team member

When adding custom fields, you need to specify:

  • Parameter name:The Chinese display name of the field, such as "Product Price".
  • Field call:The English name used to call the field in the database and template, such asprice.
  • Field Type:Including single-line text, numbers, multi-line text, single choice, multiple choice, and dropdown selection, etc.Select the appropriate field type, which is not only convenient for backend editing, but also affects the way data is obtained and displayed on the front end.
  • Mandatory:Determine whether this field is required based on content requirements.
  • Default value:Set a default value for the field. For selection type fields, the default value is the list of available options, one per line.

The addition of these custom fields gives each content type its unique 'genes', laying a solid foundation for personalized front-end display.

Create a dedicated front-end display: the combination of templates and custom content models

The backend defines the data structure, while the frontend determines how the data is presented.The template system of AnQi CMS is closely connected with the content model, allowing us to design a unique visual style and layout for each content model.

  1. Naming and storage of template files:The default storage location of template files in Anqi CMS:/templateThe directory. To enable the system to automatically recognize and apply, the template files of the custom content model usually follow specific naming conventions:

    • Model list page: /template/{模型表名}/list.htmlfor exampleproduct/list.html.
    • Model details page: /template/{模型表名}/detail.htmlfor exampleproduct/detail.html.
    • Category list page:If the category also requires a custom template, it can be/template/{模型表名}/list-{分类ID}.html.

    This means that when you access a product list page, the system will look for the corresponding table name of the model associated with the listlist.htmlWhen you click a product to enter the details page, it will look fordetail.html.

  2. Content called in the template:In the template file, we can use the tags and variables provided by the security CMS to obtain and display custom content model data.

    • Get single content details (such as product detail page):UsearchiveDetailTags to get detailed information about the current content. If you have added tags in a custom model:priceandstockfields, you can call them like this:

      {# 获取当前产品标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>
{# 获取产品价格 #}
<p>价格：{% archiveDetail with name="price" %}</p>
{# 获取产品库存，并根据库存量显示不同信息 #}
{% if archive.stock > 0 %}
    <p>库存：有货（剩余 {{ archive.stock }} 件）</p>
{% else %}
    <p>库存：缺货</p>
{% endif %}
{# 获取产品描述 #}
<div class="description">{% archiveDetail with name="Content"|safe %}</div>

      Here,archive.stockThe variable in the context is accessed directly. If you need to explicitly get it byarchiveDetaillabel, you can use{% archiveDetail archiveStock with name="stock" %}{{ archiveStock }}such a method. For custom fields, use them directlyarchive.字段名The form is usually more concise and efficient.

    • To get a list of content (such as product list pages or article list pages):UsearchiveListTags to get a list of data for a certain content model. ThroughmoduleIdParameters can specify to only retrieve the content of specific models.

      {% archiveList products with moduleId="2" type="page" limit="10" %}
    {% for item in products %}
    <div class="product-item">
        <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
        <img src="{{ item.Logo }}" alt="{{ item.Title }}">
        {# 调用自定义价格字段 #}
        <p>售价：¥{{ item.price }}</p>
        {# 调用自定义产品亮点字段（假设是多行文本） #}
        <div class="features">{{ item.highlight|safe }}</div>
    </div>
    {% endfor %}
    {# 配合分页标签展示分页信息 #}
    {% pagination pages with show="5" %}{% endpagination %}
{% endarchiveList %}

      Here are theitem.priceanditem.highlightIt is assumed that the custom fields within the list items are accessed directly. Please note that when the custom fields are multiline text or rich text, it may be necessary to use|safeThe filter ensures that HTML content is parsed correctly instead of being escaped.

    • Display multi-image field:If your product model has a nameproduct_imagesThe multi-image field (usually returned in array form as image URLs), you can display it in a loop on the detail page or list page like this:

      {% archiveDetail images with name="product_images" %}
<div class="product-gallery">
    {% for img_url in images %}
        <img src="{{ img_url }}" alt="产品图片">
    {% endfor %}
</div>
{% endarchiveDetail %}

      or, if accessed directly `archive.product_