How to call custom document fields (such as author, price) and display them in AnQi CMS?

The Anqi CMS, with its exceptional flexibility and customizability, provides strong content management capabilities for website operators.In daily website operations, we often encounter situations where standard fields (such as title, content, and publication time) cannot fully meet the specific content display needs.At this moment, custom document fields have become our powerful assistants, such as adding "author" information to an article or supplementing "price" attributes for a product, etc.How can we flexibly call these custom fields and display them on the website page in Anqi CMS?

Today, as an experienced website operation expert, I will take you in-depth to understand the definition, calling and display strategies of custom document fields in AnQi CMS, ensuring that you can transform technical details into practical operations that are easy to understand.

Why do you need to customize the document field?

One of the core strengths of AnQi CMS is its flexible content model design.In many content management systems, the fields of content are fixed, which greatly limits the expression of content and the extensibility of business.For example, a simple blog post may only need a title, content, and publication date, but if you are going to publish product information, you may also need price, inventory, SKU, brand, and a series of exclusive fields.If all this information is crammed into the 'content' field, it will be a mess to manage and also difficult to structure and look good on the front end.

The appearance of a custom document field is to break through this restriction.It allows you to add unique, personalized data fields for different content models (such as "article model", "product model", etc.)This way, each type of content can have the data structure that best suits its characteristics, greatly enhancing the precision of content management and the flexibility of front-end display.

Define custom fields in AnQi CMS backend

To call and display custom fields, we first need to define them correctly in the background. This process is actually very intuitive:

1. Enter content model management:Log in to the Anqi CMS backend, navigate to the "Content Management" menu, and select "Content Model".This lists all the existing content models in the system, such as the default 'article model' and 'product model'.
2. Select or create a model: You can choose an existing model to edit or create a new content model as needed.
3. Add custom field:After entering the model editing page, you will see a section named "Content model custom field". Click "Add field" to start defining your exclusive fields.
   • Parameter name:This is the field name displayed on the backend interface for administrators, such as "article author", "product price".
   • Call field:This is the most critical part! It is a string that you use as the 'key name' when calling this field in the front-end template.must use lowercase english letters and maintain uniqueness, for exampleauthor/price. This 'call field' is the 'secret weapon' we refer to later in the template.
   • Field type:Select the appropriate type based on your data characteristics, such as 'Single-line text' (for author name), 'Number' (for price, stock), 'Multi-line text' (for brief description of product details), 'Single-choice', 'Multi-choice' or 'Drop-down selection' and so on.
   • Is required & Default value:Set according to business logic. If a default value is set, the preset default value will be automatically displayed on the front end when you edit the document and do not fill in this field.

After defining the field, save the model. Now, when you go to "Content Management" to add or edit documents under the model, you will see the custom fields you have defined in the "Other Parameters" area, and you can enter the corresponding data for each document.

Section 3, call the custom field in the template and display it

Define the fields and enter the data after which the next core step is to display it in the front-end template.The AnqiCMS template engine (similar to Django syntax) provides powerful tags to help us achieve this.

1. Call a specific field individually

When you are on the document details page (for example, displaying the full content of a blog post) you may need to display specific custom fields of the article, such as the author.

• UsearchiveDetailTags:The most direct method for the document detail page is to usearchiveDetailLabel collaborationnameParameter.nameThe value of the parameter is the 'call field' you defined in the background.

  {# 假设你定义了一个“调用字段”为 author 的自定义字段 #}
  <div>文章作者：{% archiveDetail with name="author" %}</div>
  
  {# 假设你定义了一个“调用字段”为 price 的自定义字段 #}
  <div>商品价格：￥{% archiveDetail with name="price" %}</div>
  

  HerearchiveDetailThe tag can intelligently obtain the document information of the current page. If you want to specify the document field of a certain ID, you can also achieve this throughidparameters, for example{% archiveDetail with name="author" id="10" %}.

• in the document list loop:If you are inarchiveListthe loop of tags (for example, displaying a list of articles), if you want to display custom fields of list items, you can directly access them through the attributes of the loop variable:

  {% archiveList archives with type="list" limit="10" %}
      {% for item in archives %}
      <li>
          <a href="{{item.Link}}">
              <h5>{{item.Title}}</h5>
              {# 直接访问 item 对象的自定义字段 #}
              <p>作者：{{item.author}}</p>
              <p>价格：￥{{item.price}}</p>
          </a>
      </li>
      {% endfor %}
  {% endarchiveList %}
  

  In this example,itemrepresented the current document object in the loop, you can use it directlyitem.调用字段名称In this way, you can obtain the value of its custom field. This method is very suitable for briefly displaying custom information of each item on a list page.

2. Traverse all custom fields

Sometimes, you might want to display all custom fields of a document within a block, such as the 'Product Parameters' area of a product detail page. At this point,archiveParamsThe label comes in handy, it can help you traverse and display all the additional parameters of a document.

• UsearchiveParamsTags:This tag retrieves all custom fields of the current document (or a specified ID document) and organizes them into a reusable list.

  <div class="product-parameters">
      <h3>产品参数</h3>
      {% archiveParams params %}
          {% for item in params %}
          <p>
              <span>{{item.Name}}：</span> {# item.Name 是你在后台定义的“参数名” #}
              <span>{{item.Value}}</span> {# item.Value 是该字段的具体值 #}
          </p>
          {% endfor %}
      {% endarchiveParams %}
  </div>
  

  here,paramsis a collection of objects containing all custom fields, eachitemContainsName(field display name) andValue(field value).archiveParamsTags also supportsorted=true(default value, sorted by backend) andsorted=false(unordered Map object, can be sorted byparams.调用字段.ValueDirect value extraction) two modes, to meet the needs of different scenarios.

3. Combine different field types and special treatment.

For different types of custom fields, additional processing may be required when displayed on the front-end:

• Multiline text (rich text):If your custom field type is multi-line text and may contain HTML content (such as, through a rich text editor input), to ensure that these HTML codes are rendered correctly rather than escaped into plain text, you need to use|safeFilter:

  <div>产品特色：{{archive.feature_description|safe}}</div>
  

• Image type:If your custom field is an image (for example, through a custom field uploading product details), itsValueIt will be an image URL. If you want to display multiple images, the field definition will usually be configured to support multi-image upload at this timeitem.ValueIt might be an array of image URLs.

  ”`twig {# Assume you defined a "call field" called arcimages, which stores an array of image URLs #}

  {% archiveDetail arcimages with name="arcimages" %}
  {% for img_url in arcimages %}
      <img