In website operation, adding personalized information to articles or product detail pages is a key factor in enhancing content professionalism and user experience.AutoCMS (AutoCMS) deeply understands this need and provides powerful custom parameter functions, allowing us to flexibly add and display the required information according to different content types.
Imagine that you published a technical article, besides the title and content, you also want to display unique attributes such as 'author', 'publish date', 'technology stack', etc.; or, you are selling a product, besides the conventional name, price, and description, you also hope to highlight specific parameters such as 'color', 'size', 'material', even 'origin'.The customized parameter function of Anqi CMS is exactly designed to meet these personalized display needs.
Understand custom parameters of AnQi CMS
One of the core advantages of AnQi CMS is its 'flexible content model'.This means that it is not just providing a set of fixed content structures, but allows us to create exclusive "content models" for different types of content (such as articles, products) based on actual business needs.And custom parameters, that is, the personalized fields in these content models.
Through custom parameters, we can break the shackles of traditional CMS, allowing each article or product detail page to have unique attributes, greatly enriching the dimensions of content and information volume, and also providing a data foundation for differentiated display on the front-end page.
Define and manage custom parameters in the background
To use custom parameters, you first need to define them in the background of Anqi CMS. This process is very intuitive:
- Enter the 'Content Management' under 'Content Model'Here is a list of all content models on the website, such as "article model" and "product model". We can choose to edit an existing model or create a new custom model.
- Add Custom FieldsIn the content model editing interface, you will see a 'Content Model Custom Field' area. Click Add New Field to start defining your exclusive parameters.
- Parameter nameThis is the Chinese name used for display on the back-end, which is convenient for us to understand and fill in. For example, 'Article Author', 'Product Color'.
- Call fieldThis is the English field name used when calling the template, it is recommended to use meaningful lowercase letter combinations, such as
author/productColor. This name is the unique identifier of the field. - field type：English CMS provides various field types, such as single-line text, numbers, multi-line text, single selection, multiple selection, and drop-down selection.Choose according to the data type you want to collect and display, for example, product color can be selected with a single choice or a dropdown list.
- Is mandatory, default valueThese settings can help us standardize the entry of content.
By following these steps, we have added exclusive custom parameters to the content model.
Fill in custom parameters in the article or product
Custom parameter definition completed, when we go to publish or edit articles/products, these fields will appear in the "Other Parameters" collapsible box on the page.
For example, if you define a 'product model' and add it inmaterial(Material)weight(Weight) Two custom fields.So, when you edit a specific product, after selecting the corresponding product category, you will see input boxes for 'material' and 'weight' in the 'other parameters' area.We just need to enter the corresponding values here, and this personalized information will be associated with the article or product.If some fields are left blank, but the backend defines default values, then when the frontend calls it, the system will automatically use its default values.
flexibly display custom parameters in the template
The data is already there, the most important thing now is how to display them elegantly on the front-end template of the website.The template tags provided by AnQi CMS are very flexible, allowing this to be easily achieved.
Method one: loop to output all custom parameters
For scenarios where you want to display all or part of custom parameters in a list format, you can usearchiveParamstags. This tag can retrieve all custom parameters of the current article or product.
You can use it like this:
{% archiveParams params %}
<div class="custom-parameters">
{% for item in params %}
<div class="param-item">
<span class="param-name">{{item.Name}}：</span>
<span class="param-value">{{item.Value}}</span>
</div>
{% endfor %}
</div>
{% endarchiveParams %}
In the above code,{% archiveParams params %}Assign the custom parameter set of the current article or product toparamsVariable. Then, we use{% for item in params %}Loop through this collection.item.NameWill output the "parameter name" (such as "Product Material") defined in the background,item.ValueThen output the specific values we filled in for the article/product (such as "cotton").
The benefit of this method is that, regardless of how many custom parameters you add in the background, this code can automatically display them all or most of them, which is very suitable for product parameter list scenarios. If you only want to display specific fields, you canforWithin loop usage{% if item.Name != '不需要显示的参数名' %}Perform condition judgment.
Method two: Directly call specific custom parameters.
If you need to display a specific custom parameter at a particular location in the template instead of outputting all, you can usearchiveDetaillabel combined withnameproperties.
Suppose you have a field namedauthorThe custom field, want to display author: below the article title.
<h1 class="article-title">{{archive.Title}}</h1>
<p class="article-author">
作者：{% archiveDetail with name="author" %}
</p>
Here,{% archiveDetail with name="author" %}It will directly output the current article inauthorThe value of the field. This method is concise and clear, suitable for integrating specific parameters into the fixed layout of the page.
Process special type custom parameters: Group diagram
Some custom parameters may require special handling, for example, if you define a custom field for uploading multiple images (assuming its "call field" isproductImages），then in the template, it will return an array of image URLs. You need to loop through the array again to display the images:
{% archiveDetail productImages with name="productImages" %}
<div class="product-gallery">
{% for imgUrl in productImages %}
<img src="{{imgUrl}}" alt="产品图片" class="product-image" />
{% endfor %}
</div>
Pass{% archiveDetail productImages with name="productImages" %}Assign the group image data toproductImages，then traverseproductImagesarray, and you can display each image one by one.
Example: Custom parameter display on the product detail page
In practice, a typical product detail page might use custom parameters in this way:
<article class="product-detail">
<div class="product-header">
<h1 class="product-name">{% archiveDetail with name="Title" %}</h1>
<p class="product-description">{% archiveDetail with name="Description" %}</p>
</div>
<div class="product-specs">
<h2>产品参数</h2>
{% archiveParams params %}
{% for item in params %}
<div class="spec-row">
<span class="spec-label">{{item.Name}}：</span>
<span class="spec-value">{{item.Value}}</span>
</div>
{% endfor %}
{% endarchiveParams %}
</div>
<div class="product-content">
<h2>详细介绍</h2>
<div class="content-body">
{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}
</div>
</div>
</article>
This code combinesarchiveDetailGet general information (title, description, body) andarchiveParamsLoop output custom parameters, building a rich page.
Display custom parameters (expansion) on the category detail page.
Not only articles and products, the "categories" of AnQi CMS can also have custom parameters.This is very useful in some special scenarios, such as adding a custom parameter called 'Series Feature' for categorizing a product series.
In the category detail page template, you can usecategoryDetailtags to get the custom parameters of the category. If your custom field name isseriesFeature, you can directly call:{% categoryDetail with name="seriesFeature" %}.
If you want to loop and output all categories' custom parameters, you can usecategoryDetail extras with name="Extra"，then traverseextrasa variable. This is analogous toarchiveParamsusage.
Summary
The custom parameter feature of AnQi CMS provides great flexibility for the personalized display of website content.From background definition to front-end display, the entire process is designed to be very user-friendly and efficient.Whether it is to add professional information to articles or provide detailed specifications for products, reasonable use of custom parameters can make our website content more abundant and professional, thus better meeting user needs and enhancing the overall value of the website.
Common Questions (FAQ)
1. Why am I using in the article detail pagearchiveParamsLabeling, some custom parameters are not displayed?
In most cases,archiveParamsIt will retrieve all the defined custom parameters. If some parameters are not displayed, there are several possibilities:
a.Content not filled in correctlyEnsure that these custom parameter fields are filled in when editing articles or products in the background. If the field is empty, it may not be displayed by default.
b.Field type issueEnglish translation: Some field types (such as image groups) require a second loop to be displayed completely, if you directly{{item.Value}}May only display an array or JSON string, not the rendered content. Please refer to the "Handling Special Type Custom Parameters: Album" section above.
c.sortedThe impact of the parameter:archiveParamsDefaultsorted=trueReturns an ordered array. If you explicitly setsorted=falseIt will return an unordered map object, at this time you need to access through the key name (i.e., the field name called), for example{{params.myCustomField.Value}}If you are traversingparams, then regardlesssortedWhy should the value be displayed normally.
2. How to add images or more complex HTML content in custom parameters?
If your custom parameters need to include images, links, or formatted text, set the "field type" to "multiline text" when defining the custom parameter, and directly paste HTML code or image URL when filling in the content in the background. Be sure to use it in the front-end template.|safeFilter, for example{{item.Value|safe}}To prevent HTML code from being escaped and unable to display normally. If you want to support Markdown format, you need to make sure that the CMS has enabled the Markdown editor, and that the template correctly handles Markdown rendering (for example, using|render|safe).
3. How do I define a custom field called 'Product Origin' and also display it on the product list page?
Custom parameters are mainly used for detail page display. If you need to display them on the list page, you need to use.archiveListTagsitemvariables, and combine.archiveParamsto get the custom parameters of each list item. The specific method is, inarchiveListin the loop, usearchiveParamsand specify the current list item's ID:
{% archiveList products with type="page" limit="10" %}
{% for item in products %}
<div>
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<!-- 其他列表信息 -->
<p>
产地：{% archiveParams param with id=item.Id sorted=false %}{{param.productOrigin.Value}}{% endarchiveParams %}
<!-- 假设你的“产品产地”调用字段是 productOrigin -->
</p>
</div>
{% endfor %}
{% endarchiveList %}
Here, we usearchiveParams param with id=item.Id sorted=falseto get the custom parameters of theitem( paramand then throughparam.productOrigin.Valuedirectly access the value of the origin field. Note thatsorted=falseIt is to be able to access directlyproductOriginby key name.