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 article content more rich and structured, but also allow for 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 of the article.

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 for your content model in the background.

Log in to the AnQiCMS backend, navigate to the 'Content Management' menu under 'Content Model'.Here, you can see the built-in "article model", "product model", etc., and you can also create your own content model.Select 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".This is where we define various personalized parameters. Each field is like adding a unique 'label' and 'attribute' to the content, allowing you to specify parameter names (for backend management and identification), calling fields (for frontend template calls), field types (such as single-line text, numbers, multi-line text, single selection, multiple selection, dropdown selection), and whether it is required and default values, etc.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 getting custom parameters of articles:archiveParams.

This tag is usually used on the article detail page, to get all the custom parameters associated with the current article. Its basic usage is to define it as a variable, and 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 }}Will output the custom parameter name set in the background (usually Chinese, such as "article source").
  • {{ item.Value }}It will output the actual content value of the custom parameter (such as "AnQiCMS Official Blog").

archiveParamsTags will be returned in the order you set in the background, which is achieved bysorted=trueParameter control, but due tosorted=trueIt is the default behavior, usually it can be omitted. If you want to get the custom parameters of a specified article, rather than the article on the current page, you can throughidSpecify the article ID with parameters, for example:{% archiveParams params with id="123" %}.

Another shortcut method:archiveDetailDirect call

If you are only concerned with a specific custom parameter and you already know its field name (i.e., the 'field name' you set in the background, usually in English), then you can usearchiveDetailTag to directly obtain its value without traversing the entire parameter list.

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

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

Or, if you want to assign its value to a variable first and then use 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, making the code 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 beautiful on the front end, you may need to write CSS styles yourself to beautify<div>/<span>such as the display of HTML elements.

  2. Null value handling:Sometimes, custom parameters may not be filled in. To avoid displaying blank or unnecessary titles on the front end, you can useifLabel 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 multiline text and you want to support rich text or Markdown formatting, then in the outputitem.Value