How to dynamically retrieve and display the content of custom model fields for an article in a template?

In Safe CMS, the flexibility of website content is one of the key advantages we have for content operation and website layout.By customizing content model fields, you can add unique properties to different types of content (such as articles, products), which can better reflect your business needs.But how can we dynamically present the carefully defined custom field content in the template of the website front-end?This article will discuss this topic in detail, helping you make full use of the powerful functions of AnQiCMS.

Flexible customization, efficient management: Anqi CMS content model fields

The "Flexible Content Model" feature provided by Anqi CMS means that you can create unique fields for articles, products, and other content according to your actual business scenarios.For example, if you run an e-commerce website, in addition to the name and description of the product, you may also need special fields such as 'brand', 'model', 'material', and 'inventory quantity'.These custom fields not only make the background management more structured, but also lay a foundation for the diverse content display on the front end.

Get the core tag for custom field content in the template

When the content of the custom field is entered in the background, the next step is how to display them in the frontend template.AutoCMS provides powerful template tags, making this process very intuitive.archiveDetailTags andarchiveParamsLabel.

1. Accurately obtain a single custom field:archiveDetailtags

If you already know the specific name of the custom field you want to display,archiveDetailThe label is your preference. This label can directly access the content of the custom fields you define, just like the built-in fields such as article title and content.

Assuming you have customized a namedauthor_bioThe field of (author's introduction), you can obtain and display its content in the article detail page template in the following way:

<div class="author-info">
    <h3>作者简介：</h3>
    {% archiveDetail authorBio with name="author_bio" %}
    <p>{{ authorBio|safe }}</p>
</div>

Here we used{% archiveDetail authorBio with name="author_bio" %}toauthor_bioAssign the content of the field toauthorBiothe variable, and then pass through{{ authorBio|safe }}Display it.|safeFilter is very important here, especially when the content of your custom fields may contain HTML tags (such as rich text editor edited content). It ensures that the content is parsed correctly rather than displayed as plain text. If the custom field stores content in Markdown format, you can use|renderThe filter renders it into HTML.

2. Flexibly traverse all custom fields:archiveParamstags

Sometimes, you may need to iterate over all custom fields of an article in a template, or be unsure of the specific field names,archiveParamsThe label comes in handy. It can retrieve all custom parameters of the current article or a specified article.

archiveParamsThere are two main ways to use the label:

a) Traverse as an ordered array:By default,archiveParamsThis will return an ordered array, each array item containsName(field display name) andValue(field value).

<div class="custom-fields-list">
    <h3>更多文章信息：</h3>
    {% archiveParams params %}
    {% for item in params %}
        <p><strong>{{ item.Name }}：</strong> {{ item.Value }}</p>
    {% endfor %}
    {% endarchiveParams %}
</div>

This method is very suitable for universally displaying all custom fields without concerning about the specific field names.

b) As an unordered Map, access directly:If you want to access the value directly like accessing an object property, you can call the field name of the custom field:archiveParamstag.sorted=falseParameter.

Assuming your article model definesisbn(ISBN number) andpublisher(publisher) two custom fields, their "call fields" areisbnandpublisher:

<div class="book-info">
    <h3>图书信息：</h3>
    {% archiveParams bookDetails with sorted=false %}
    <p><strong>ISBN：</strong> {{ bookDetails.isbn.Value }}</p>
    <p><strong>出版社：</strong> {{ bookDetails.publisher.Value }}</p>
    {% endarchiveParams %}
</div>

This method requires you to explicitly know the "call field" name of the custom field, but it can make the code more concise in some specific layouts.

Application based on actual scenarios.

Understood the core tags, let's take a look at some common practical application scenarios:

• Display the product gallery:If you have defined a name ofproduct_imagesThe group image field, used to store multiple product images, you can display them on the product detail page like this:

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

• Display product specifications or features:Assuming you have custom fields such as “Size”, “Weight”, “Color”, you can combinearchiveParamsList display:

  <ul class="product-specs">
      {% archiveParams specs %}
      {% for item in specs %}
          <li><strong>{{ item.Name }}：</strong> {{ item.Value }}</li>
      {% endfor %}
      {% endarchiveParams %}
  </ul>
  

• Display special tips or explanations:For example, an article has a field namedspecial_note(Special Note) single-line text field