How to customize the content model so that it can display different types of content in a unique way on the front-end page (such as articles, products)?

In AnQi CMS, the customizability of the content model is one of its core strengths. It 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 display, it can present a unique style and function on the front-end page through a customized content model.

Understanding the importance of the content model

The content model, simply put, is the "skeleton" or "blueprint" of the content on your website.It defines which fields each type of content should contain, 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'.

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

  • Implement fine-grained management:Set dedicated data fields for different types of content, avoid redundant information, and improve backend management efficiency.
  • Optimize front-end display:According to the custom field, display information on the front-end page in a way that is more in line with the content characteristics and more attractive, enhancing the user experience.
  • 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 a corporate website, a product exhibition site, or a self-media blog, it can quickly adapt and expand the type of content.

Create and manage custom content models in Anqi CMS.

To start customizing the content model, we need to enter the Anqi CMS administrative interface.Generally, you can find the "Content Management" option in the left navigation bar, and after clicking, you will see the "Content Model".This is the management center of all content models (including system-built 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 Dynamic", "Solutions", "Service Projects", etc., which should be clear and easy to understand.
  2. Model table name:This is a very critical setting. It defines the table name where the data of the model is stored in the database, andThe front-end template will look for the corresponding template file based on this table nameFor example, if you set the model table name tosolutionthen the corresponding list page and detail page templates may be named accordinglysolution/list.htmlandsolution/detail.html. This table name is usually composed ofEnglish lowercase lettersto ensure uniqueness.
  3. URL alias:This is used as a marker for front-end URLs, which is usually lowercase in English to facilitate the generation of 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", here it can be set to "product name" to make it clear to the editor.

It is of paramount importance thatCustom fields for content model. This is the core of the truly flexible and versatile 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), etc.
  • For a “team member” model, you may need “position” (single-line text), “work experience” (multi-line text), and “personal introduction image” (single-line text, used to store image URL) and so on.

When adding custom fields, you need to specify:

  • Parameter name:The Chinese display name of the field, such as "Product Price".
  • Call field:The English name used in the database and template for the field, such asprice.
  • Field type:Including single-line text, numbers, multi-line text, single-choice, multi-choice, and dropdown selections, etc.Choose the appropriate field type, as it not only facilitates backend editing but also affects the way frontend data is obtained and displayed.
  • Mandatory?:Determine whether the field is required based on content requirements.
  • Default:Set a default value for the field. For selection type fields, the default value is the list of selectable items, one per line.

The addition of these custom fields gives each content type a unique 'gene', 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 structure of the data, and the frontend determines how these data are presented.The AnQi CMS template system is closely connected to 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 AnqiCMS template files:/templateUnder the 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 detail page: /template/{模型表名}/detail.htmlFor exampleproduct/detail.html.
    • Category list page:If categories also need custom templates, they can be:/template/{模型表名}/list-{分类ID}.html.

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

  2. Call content in the template:In the template file, we can use tags and variables provided by Anqi CMS to retrieve and display data from custom content models.

    • Get single content details (such as product detail page):UsearchiveDetailtags to get the details of the current content. If you have added them 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.stockAssuming it is a direct access to the variables in the context. If you need to explicitly obtain througharchiveDetaillabel access, then you can use{% archiveDetail archiveStock with name="stock" %}{{ archiveStock }}this method. For custom fields, use them directlyarchive.字段名The form is usually more concise and efficient.

    • To get a list of contents (such as product list pages or article list pages):UsearchiveListtags to get a list of data for a specific content model. ThroughmoduleIdParameter, can specify to only retrieve the content of a specific model.

      {% 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 %}

      Hereitem.priceanditem.highlightThis is a hypothetical scenario where we directly access the custom fields in the list item. Please note that when the custom field is multi-line text or rich text, it may be necessary to use|safeA filter to ensure the correct parsing of HTML content rather than being escaped.

    • Display multi-image field:If your product model has a field namedproduct_imagesThe field for multiple images (usually returned in array form as image URLs), you can display it in detail pages or list pages 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_