How to implement the complete information display of the content detail page in AnQi CMS (including custom fields)?

In website operation, the content detail page is the core entry for visitors to understand the product or service, and the completeness of information display and user experience is crucial.AnQiCMS (AnQiCMS) takes full consideration of the flexibility and customization of content display when designed, even various custom fields defined by you can be presented elegantly on the content detail page.

Next, we will explore how to fully display all the information of the content detail page in Anqi CMS, from the establishment of the content model to the calling of the template, including those unique custom fields.

Build the content skeleton: Understand the content model and custom fields

In AnQi CMS, all content display starts with 'Content Model'.You can understand it as a 'blueprint' or 'structural definition' for different types of content.The system is built-in with models such as "article" and "product", but the strength of Anqi CMS lies in the fact that you can create an unlimited number of custom content models according to your business needs.

To implement the complete information display of the content detail page, first ensure that your content model includes all the fields you want to display.Find the 'Content Model' option in the 'Content Management' section in the background, where you can edit existing models or create new ones.In here, you can freely add various types of custom fields, such as:

  • Single-line text: Suitable for short titles, author names, etc.
  • Number: Suitable for price, inventory, reading volume, etc.
  • Multi-line text: Suitable for introductions, subtitles, etc., supporting rich text editing.
  • Single choice: Such as "region", "product color", etc., select one from the preset options.
  • Multiple selectionsAs for "product features", "service scope", and so on, multiple preset options can be selected.
  • Drop-down selection: Similar to single selection, presented in a dropdown menu.

After you define these custom fields in the content model, they become an important part of your content, waiting to be filled and displayed.

Content Entry and Management: Enrich Every Article You Write

After defining the content model, when adding or editing specific content under "Content Management", you will find that in addition to standard fields such as title, content, category, tags, etc., there is also a collapsed area called "Other Parameters" at the bottom.This is where you can show off your custom field.

For example, if you define custom fields such as 'Product Material', 'Size', 'Warranty Period', etc. for the 'Product' model, then when entering specific product information, these fields will be presented here one by one for you to fill in the corresponding values.The design of Anqi CMS ensures the convenience of backend data entry, allowing you to easily manage and enrich every detail of the content.

At the template level: Convert Data into Vivid Display

The storage of content is just the first step, how to present it beautifully and completely to visitors depends on template design.Anqi CMS uses a syntax similar to Django template engine, making template creation both flexible and easy to learn.

For the content detail page, the corresponding template file is usually{模型table}/detail.html(For example,)article/detail.htmlorproduct/detail.html）。In this template file, you will use specific tags and variables to call various contents entered in the background.

Core invocation mechanism：

The template language of AnQi CMS mainly calls data in two ways:

  1. double curly braces{{变量}}: Directly output the value of the variable.
  2. single curly braces and percent signs{% 标签 %}: Used for logical control (such as loops, conditional judgments) or to call specific function modules (such as document details, lists, etc.).

In the content detail page template, the system will automatically load all the data of the current document into an object namedarchiveTherefore, most of the core data can be accessed directly through{{archive.字段名}}The way to call. And for more complex scenarios or when explicit data retrieval is needed, special tags are used.

Display the core content: standard field calls.

In the content detail page template, you can easily call various standard fields to build the basic structure of the page. The following are some common calling examples:

  • Document title:<h1>{{archive.Title}}</h1>or{% archiveDetail with name="Title" %}
  • Main content:<div>{{archive.Content|safe}}</div>. Please note here that:|safeThe filter is very important. If your content (especially that entered through a rich text editor) contains HTML tags,|safeIt tells the template engine not to escape this HTML, but to parse and display it as real HTML code.
  • Release Time:<span>发布日期：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>.stampToDateIt is a practical label for formatting timestamps, you can customize the time display format according to your needs.
  • view count:<span>阅读量：{{archive.Views}}</span>
  • Categorize links and namesYou can go througharchive.CategoryAccess classification information of objects such as{{archive.Category.Title}}and{{archive.Category.Link}}.
  • Thumbnail/main image:<img src="{{archive.Logo}}" alt="{{archive.Title}}"/>or{{archive.Thumb}}.
  • Document Introduction:{{archive.Description}}

Deep customization: flexible presentation of custom fields

This is the key to achieving 'complete information display (including custom fields)' and Anqi CMS provides various ways to display the custom fields you define in the content model.

1. Directly call the specified custom field:

If you know the 'call field' of the custom field (the English name set in the content model), you can display it directly like a standard field.

For example, if you define a field namedproduct_materialCustom field for single-line text, it can be called like this directly in the template:

<p>产品材质：{{archive.ProductMaterial}}</p>
{# 或者使用archiveDetail标签显式获取 #}
<p>产品材质：{% archiveDetail with name="ProductMaterial" %}</p>

Please note that variable names in templates usually follow camel case naming, which means the backend-definedproduct_materialtoProductMaterial.

2. Loop to display all custom fields:

If you want to dynamically display all custom fields of the current document without specifying them individually, you can usearchiveParamsLabel. This label will return an array object containing all custom field names and values.

{% archiveParams params %}
<div class="custom-fields">
    {% for item in params %}
    <div class="field-item">
        <span class="field-name">{{item.Name}}：</span> {# item.Name 是字段的中文名 #}
        <span class="field-value">{{item.Value|safe}}</span> {# item.Value 是字段的值，可能需要|safe #}
    </div>
    {% endfor %}
</div>
{% endarchiveParams %}

3. Handling complex custom fields:

For custom fields like "Group Chart" or "Multiple Choice", their values may be an array or a more complex structure.At this point, you need to perform additional loops or processing in the template.

For example, if you have a variable namedproduct_galleryThe custom field, whose value is a set of image URLs (similarImagesfield), you can display it like this:

{% archiveDetail productGallery with name="ProductGallery" %}
{% if productGallery %}
<div class="product-gallery">
    {% for imgUrl in productGallery %}
    <img src="{{imgUrl}}" alt="产品图"/>
    {% endfor %}
</div>
{% endif %}

For a multi-choice field, the value may be a comma-separated string or an array, you may need to use a filter to convert it to an array first and then iterate through it, or display it directly.|splitFilter to convert it to an array first and then iterate through it, or display it directly.

A comprehensive example: a complete article detail page snippet

Let's integrate the above methods to build an article detail page template snippet that includes standard fields and custom fields:

`twig {# Assume this is your content detail page template: {modeltable}/detail.html #}

<!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title> {# 调用TDK标签显示标题，并附加网站名称 #}
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">


<header>
    <nav>
        {# 导航栏通常在这里调用 #}
        {% navList navs %}
            {# ... 循环展示导航项 ... #}
        {% endnavList %}
    </nav>
</header>

<main class="container">
    {# 面包屑导航 #}
    <