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

Next, we will explore together how to fully display all the information of the content detail page in the Aanqi CMS, from the establishment of the content model to the invocation of the template, including those uniquely crafted custom fields.

Build content skeleton: Understand content model and custom fields

In Anqi CMS, all content display starts with 'Content Model'.You can understand it as the 'blueprint' or 'structure definition' of different types of content.The system built-in models such as 'Article' and 'Product', but the strength of Anqi CMS lies in the fact that you can create an infinite 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' on the backend, where you can edit existing models or create new ones.

  • Single Line Text: Suitable for short titles, author names, etc.
  • Number: Suitable for prices, inventory, reading volume, etc.
  • Multi-line text：Applicable for introductions, subtitles, etc., supports rich text editing.
  • Single selection：Such as “Region”, “Product Color”, etc., select one from the preset options.
  • Multiple selection[en]As for 'Product Features', 'Service Scope', and other options, multiple preset choices can be selected.
  • Drop-down selection[en]Similar to single-choice options, presented in a dropdown menu form.

Once you have defined 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 a collapsible area called 'Other Parameters' at the bottom.This is the place where you can showcase your custom field.

For example, if you define custom fields such as 'Product Material', 'Size', 'Warranty Period', and others for the 'Product' model, these fields will be presented one by one here when entering specific product information, allowing 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: transform data into vivid display

The storage of content is just the first step, how to display it beautifully and completely to visitors depends on template design.AnQi CMS adopts syntax similar to Django template engine, making template creation both flexible and easy to use.

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 calling mechanism:

The template language of Anqi CMS mainly calls data through two methods:

  1. Double curly braces{{变量}}Directly output the value of the variable.
  2. Single curly braces and percentage signs{% 标签 %}Used for logical control (such as loops, conditional judgments) or calling 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 core data can be accessed directly through{{archive.字段名}}Call in the way. For more complex scenarios or when explicit data retrieval is needed, special tags are used.

Display core content: calling standard fields

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 the content here.|safeFilter, it is very important. If your content (especially that entered through a rich text editor) contains HTML tags,|safeTell the template engine not to escape these HTML, but to parse and display them as real HTML code.
  • publication time:<span>发布日期：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>.stampToDateIt is a practical label for formatting timestamp, and you can customize the time display format according to your needs.
  • View count:<span>阅读量：{{archive.Views}}</span>
  • Category link and name: You can access the category information through.archive.Categoryobject to access category information, such as{{archive.Category.Title}}and{{archive.Category.Link}}.
  • Thumbnail/Main Image:<img src="{{archive.Logo}}" alt="{{archive.Title}}"/>or{{archive.Thumb}}.
  • Document Summary:{{archive.Description}}

Deep Customization: Flexible Presentation of Custom Fields

This is the key to achieving 'full information display (including custom fields)'. Anqi CMS provides multiple 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' (the English name set in the content model) of a custom field, you can display it directly as you would with a standard field.

For example, if you define a single-line text custom field namedproduct_materialyou can directly call it in the template like this:

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

Please note that variable names in the template usually follow camelCase notation, that is, the backend-definedproduct_materialConverted toProductMaterial.

2. Display all custom fields in a loop:

If you want to dynamically display all custom fields of the current document without specifying each one, you can usearchiveParamsThis tag 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 custom fields of complex types:

For custom fields like 'Group Image' or 'Multiple Choice', their value may be an array or a more complex structure.You need to perform an additional loop or processing in the template.

For example, if you have a variable namedproduct_galleryCustom field, whose value is a set of image URLs (similar toImagesfield), 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-select field, its value may be a comma-separated string or an array, you may need to first convert|splitit to an array using a filter and then iterate over it, or display it directly.

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 {# This is your content detail page template: {model.table}/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">
    {# 面包屑导航 #}
    <