AnQiCMS as an efficient and customizable content management system, provides powerful content model features, allowing us to add various custom fields to articles according to different business needs.These custom parameters not only make the content of the article richer and structured, but also enable personalized display on the front page, greatly enhancing the flexibility and user experience of the website.

Today, let's delve into how to flexibly display these custom parameter lists in the AnQiCMS front page articles.

Backend preparation: Define custom parameters

In AnQiCMS, custom parameters are closely related to the 'content model'. This means that you first need to define these parameters in the background for your content model.

Log in to the AnQiCMS backend and navigate to the 'Content Management' menu under 'Content Model'.Here, you can see the built-in "article modelSelect the model you need to add custom parameters, click "Edit".

In the model editing interface, you will find a section named "Content Model Custom Fields".Here is where we define various personalized parameters.Every field adds a unique 'label' and 'attribute' to the content, allowing you to specify parameter names (for backend management and recognition), callable fields (for front-end template calls), field types (such as single-line text, numbers, multi-line text, single choice, multiple choice, dropdown selection) as well as whether it is required, default values, and so on.For example, you can add a custom field named "article source" to the "article model", or add "product size", "color options", and so on to the "product model".

Once you define and save custom fields here, they are just like the article content itself and can be called and displayed in the front-end template.

Front-end display: Core tagsarchiveParamsapplication

Now, we have defined the data structure of the backend, and the next step is to display this information in the front-end template. AnQiCMS provides a special tag for retrieving custom parameters of articles: archiveParams.

This tag is usually used on article detail pages to retrieve all custom parameters associated with the current article. Its basic usage is to define it as a variable, then throughforLoop through this variable to display the name and value of each parameter.

The basic code structure will be like this:

{% archiveParams params %}
    {% for item in params %}
        <div>
            <span>{{ item.Name }}：</span>
            <span>{{ item.Value }}</span>
        </div>
    {% endfor %}
{% endarchiveParams %}

In this code block:

  • {% archiveParams params %}Store all custom parameters of the current article in a namedparams.
  • {% for item in params %}Loop through thisparamsArray,itemRepresents a custom parameter in each loop.
  • {{ item.Name }}It will output the 'parameter name' (usually Chinese, such as 'article source') set for the custom parameter in the background.
  • {{ item.Value }}The actual content value of the custom parameter will be output (such as “AnQiCMS Official Blog”).

archiveParamsThe tag will return the parameter list according to the order you set in the background, which is achieved bysorted=trueParameter control, butsorted=trueIt is the default behavior and can usually be omitted. If you want to get custom parameters for a specified article instead of the current page article,idUsing parameters to specify the article ID, for example:{% archiveParams params with id="123" %}.

Another shortcut:archiveDetailDirect call

If you only care about a specific custom parameter and already know its field name (i.e., the 'calling field' you set in the background, which is usually in English), then you can usearchiveDetailLabel to directly get its value without having to traverse the entire parameter list.

For example, suppose you have a custom field whose calling field name isauthor_sourceYou can directly get its value in the template like this:

<div>文章来源：{% archiveDetail with name="author_source" %}</div>

Or, if you want to assign its value to a variable before using it, you can do it like this:

{% archiveDetail articleSource with name="author_source" %}
<div>文章来源：{{ articleSource }}</div>

This method is suitable when you only want to display a few specific custom parameters, and you already know their field names, the code will be more concise.

Optimization and注意事项

In the actual front-end display, there are some details and optimization techniques that can help you present these custom parameters better:

  1. Style control: item.Nameanditem.ValueThe output is usually just plain text. To make them look more attractive on the front, you may need to write CSS styles by yourself.<div>/<span>Display of HTML elements.

  2. Handling of empty values:Sometimes, custom parameters may not be filled in. To avoid displaying blank or unnecessary titles on the front end, you can useiflabels for judgment:

    {% archiveParams params %}
    {% for item in params %}
        {% if item.Value %} {# 仅当有值时才显示 #}
            <div>
                <span>{{ item.Name }}：</span>
                <span>{{ item.Value }}</span>
            </div>
        {% endif %}
    {% endfor %}
{% endarchiveParams %}

  3. Rich Text/Markdown Content:If your custom parameter type is multi-line text and you want to support rich text or Markdown format display, then in the outputitem.Value