How to display custom parameter fields on the article detail page?

This article will detail how to effectively display the custom parameter fields of articles on the article detail page of the Anqi CMS.This not only involves the calling of the front-end template, but also requires a clear understanding of the back-end content model setting and the article editing process.

Understanding the meaning of custom parameter fields

In the daily operation of AnQiCMS, we often encounter the need to add some specific information to articles beyond standard fields, such as product articles may require 'product model', 'brand', 'origin', etc., while blog articles may require 'author's introduction', 'reading time', 'field of expertise', etc.This information cannot be simply placed in the article title or content, it requires structured presentation for users to quickly access and filter.The custom parameter field is born for this, allowing us to define a set of exclusive additional fields for each content model, which greatly enhances the expressiveness and scalability of content.

Define custom parameter field: Basic backend configuration

To make the article detail page display custom parameters, you first need to complete the definition of these fields in the AnQiCMS backend.The strength of AnQiCMS lies in the flexibility of its content model, which allows us to create or modify the structure of different content types according to business needs.

In the backend management interface, you need to navigate toContent managementthen selectContent Model. Here, you can choose to edit an existing content model (such as "Article Model" or "Product Model") or create a new one.

Enter the editing page of a specific content model and you will see a page namedCustom fields of the content modelThe area. Click to add, and you can start defining new custom parameter fields. When adding fields, there are several key pieces of information you need to fill in clearly:

  • Parameter nameThis is the Chinese or English name used to display the field on the background management interface and the front-end template, for example, 'Product Model', 'Author'.
  • Call fieldThis is the unique identifier used to call the field value in the front-end template. It is strongly recommended to use short, descriptive English letters (such asmodel_number/author),and maintain its uniqueness throughout the website, which will directly affect whether you can correctly call the data in the template.
  • field typeAnQiCMS provides various field types such as single-line text, numbers, multi-line text, single choice, multiple choice, and dropdown selection.Choosing the appropriate field type helps ensure the accuracy and consistency of data.
  • Is requiredAccording to the importance of the field, you can choose whether it is a required item.
  • Default valueYou can set a default value for the field, which will be displayed if the field is not filled in during article editing.

Complete the definition of custom fields and save the content model, and these fields are ready for the entry and frontend display of subsequent article content.

Fill in the custom parameter field: content entry practice

Once custom fields are defined in the content model, they will automatically appear on the article editing page of the corresponding model. When we go throughContent managementEnterPublish documentWhen editing an existing article, the first thing you need to do isSelect the category it belongs to. Because each category is associated with a specific content model, only the corresponding category is selected will the system load the custom fields defined under the content model.

In the bottom of the article editing page, you will find a namedOther parametersThe collapsing box.Expand this collapse box, and you will see all the custom parameter fields defined for the current article's content model.You only need to fill in or select the corresponding value according to the actual content.Ensure that all necessary information is entered accurately, as this will directly affect the display effect of these parameters on the front-end page.

Custom parameters displayed on the article detail page: template calling技巧

This is the core step to implement custom parameter fields for front-end display on the website.AnQiCMS's template system is based on Django template engine syntax, providing flexible tags to retrieve and render data.{模型table}/detail.htmlor{模型table}/detail-{文档ID}.htmlpath.

To display custom parameters in these template files, we mainly usearchiveDetailandarchiveParamsThese two template tags.

Method one: Directly call specific custom fields

If you know the custom fields调用字段Name, and only a few specific fields need to be displayedarchiveDetailLabel directly retrieves its value. This method is concise and clear, suitable for scenarios where the number of fields is not many and the display positions are fixed.

For example, if you define a调用字段response forauthorThe custom field to display the article author can be called like this in the template:

<div>文章作者:{% archiveDetail with name="author" %}</div>

If the custom field may contain HTML content (for example, some rich text editing introductions), in order to prevent HTML from being escaped,|safeFilter:

<div>作者简介:{% archiveDetail archiveAuthorBio with name="author_bio" %}{{archiveAuthorBio|safe}}</div>

For custom fields of image type, for example, defining a field namedcover_imagefield, you can directly use its URL assrcProperties:

<img src="{% archiveDetail with name="cover_image" %}" alt="文章封面">

If the custom field stores a set of images (such as a multi-image fieldarcimages),则需要先将数据获取到变量中,然后通过for循环遍历显示:

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

方法二:循环遍历所有自定义字段

When you want to dynamically display all custom parameters, or when the number and type of custom fields may change, usearchiveParamsLabel iteration is a more flexible choice. It can obtain the list of all custom fields of the current article and then display them one by one through iteration.

archiveParamsLabel returns a sorted array object, each element containingName(the parameter name of the field) andValue(the value of the field).

<div class="article-meta-parameters">
    {% archiveParams params %}
    {% for item in params %}
        <div class="parameter-item">
            <span class="parameter-name">{{item.Name}}:</span>
            <span class="parameter-value">{{item.Value}}</span>
        </div>
    {% endfor %}
    {% endarchiveParams %}
</div>

This method is especially suitable for scenarios where a unified format is required to display all additional information such as product parameter lists, technical specifications, etc. You can also according toitem.NamePerform conditional judgment, and perform special processing on specific fields. For example, if the value of a certain field is an image link, you can render it as<img>Label; if it is a checkbox, it may require further processing.ValueA comma-separated string.

Practical Suggestions

  • Naming conventions: Make sure to define custom parameter fields correctly.调用字段The naming should be descriptive and easy to remember, and try to avoid using the names of built-in fields of AnQiCMS to prevent conflicts.
  • Front-end styleIn order to display custom parameters in the template, please be sure to combine CSS styles for beautification to ensure they are consistent with the overall design style of the website, providing a good visual experience.
  • Conditional judgment:For optional custom fields, when called in the template, you can use{% if 字段名 %}to make conditional judgments, to avoid displaying empty content when the field has no value, affecting the page's tidiness.
  • to avoid excessive useAlthough the custom parameter function is powerful, overly complex field settings may increase the burden on content managers and may have a certain impact on database performance