In website operation, adding personalized information to articles or product detail pages is the key to improving content professionalism and user experience.AnQiCMS (AnQiCMS) fully 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 have published a technical article, in addition to the title and text, you also want to display unique attributes such as 'author', 'publish date', 'technology stack', etc.,;Or perhaps you are selling a product, in addition to the usual name, price, and description, you also want to highlight specific parameters such as 'color', 'size', 'material', even 'origin'.The AnQi CMS custom parameter feature is exactly designed to meet these personalized display needs.
Understand the custom parameters of Anqi CMS
One of the core advantages of AnQi CMS is its flexible content model.This means that it does not just provide a fixed content structure, 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 are the personalized fields in these content models.
By customizing parameters, we can break free from the constraints of traditional CMS, allowing each article or product detail page to have unique attributes, greatly enriching the dimensions and information content of the content, and also providing a data foundation for the differentiated display of the front-end page.
Define and manage custom parameters in the background
To use custom parameters, you first need to define them in the AnQi CMS backend. This process is very intuitive:
- Enter the "Content Management" under the "Content Model"Here are all the content models listed on the website, such as "article model" and "product model". We can choose to edit an existing model or create a custom model.
- Add custom fieldIn the content model editing interface, you will see a "Content Model Custom Field" area. Click to add a new field to start defining your exclusive parameters.
- Parameter NameThis is the Chinese name used for display on the back-end, convenient for us to understand and fill in. For example, 'article author', 'product color'.
- Field invocationThis is the English field name used when calling the template, it is recommended to use meaningful lowercase letter combinations, such as
author/productColorThis name is the key identifier for the field. - Field typeThe AnQi CMS provides various field types, such as single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection.Choose the data type you want to collect and display, for example, product color can be a single selection or a dropdown selection.
- Is required, 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
After custom parameter definition is completed, when we go to publish or edit an article/product, these fields will appear in the 'Other Parameters' collapse box on the page.
For example, if you define a "product model" and addmaterial(material) andweight(Weight) Two custom fields. 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 simply 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 a default value, then when the system is called from the front end, it will automatically use its default value.
flexibly display custom parameters in the template
The data is already there, now the most important thing is how to elegantly display them on the front-end template of the website.AnQi CMS provides very flexible template tags, which can easily achieve this.
Method one: loop through all custom parameters
For scenarios where you want to display all or part of custom parameters in a list, 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 code above,{% archiveParams params %}Assign the custom parameter set of the current article or product toparamsthe variable. Next, we use{% for item in params %}Loop through this collection.item.NameIt will output the parameter name defined in the background (such as “Product Material”),item.ValueThen output the specific value we fill in for the article/product (such as 'cotton').
The benefit of this method is that, no matter 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 canforUsing inside the loop{% if item.Name != '不需要显示的参数名' %}Perform conditional judgment.
Method two: Directly call specific custom parameters
If you only need to display a specific custom parameter at a specific location in the template instead of looping through all, you can usearchiveDetailLabel collaborationnameProperty.
Suppose you have a variable namedauthorCustom field, want to display the 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" %}Will directly output the current article content:authorThe value of the field. This method is concise and clear, suitable for integrating specific parameters into the fixed layout of the page.
Handle special type of custom parameters: group chart
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>
By{% archiveDetail productImages with name="productImages" %}Assign the group image data toproductImagesand then iterate overproductImagesArray, you can display images one by one.
Example: Custom parameter display on the product details page.
In practice, a typical product details page may 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 combinesarchiveDetailto retrieve general information (title, description, text) andarchiveParamsloop output custom parameters to build a rich content page.
Display custom parameters (expanded) on the category detail page
Not only articles and products, but the "categories" of Anqi CMS can also have custom parameters.This is very useful in some special situations, such as adding a custom parameter called "series feature" for categorizing a product series.
In the template of the category detail page, you can usecategoryDetailtags to get the custom parameters of the category. If your custom field name isseriesFeatureThis can be directly called:{% categoryDetail with name="seriesFeature" %}.
To loop through all custom parameters of each category, you can usecategoryDetail extras with name="Extra"and then iterate overextrasvariable. This is analogous toarchiveParamsusage.
Summary
The custom parameter function of AnQi CMS provides great flexibility for personalized display of website content.From backend definition to frontend 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, the reasonable use of custom parameters can make our website content more rich and professional, thereby better meeting user needs and enhancing the overall value of the website.
Frequently Asked Questions (FAQ)
1. Why am I using in the article detail pagearchiveParamsWhen labeling, some custom parameters are not displayed?
Generally speaking,archiveParamsIt will retrieve all the defined custom parameters. If some parameters are not displayed, there are several possibilities:
a.Content was not filled in correctlyEnsure that these custom parameter fields are filled in when editing articles or products in the background. If the fields are empty, they may not be displayed by default.
Field type issueSome field types (such as image galleries) need to be traversed twice to be displayed completely, if you directly{{item.Value}}This may only display an array or a JSON string, not the rendered content. Please refer to the "Handling Special Type Custom Parameters: Group Picture" section above.
c.sortedThe impact of the parameter:archiveParamsDefaultsorted=true, returns an ordered array. If you explicitly setsorted=falseIt will return an unordered map object, at this point you need to access it through the key name (i.e., the field name called), for example{{params.myCustomField.Value}}If you are traversing itparamsThen no mattersortedWhy values, they should all be displayed normally.
2. How to add images or more complex HTML content in custom parameters?
If you need to include images, links, or formatted text in your custom parameters, you can set the 'field type' to 'multiline text' when defining custom parameters, and directly paste HTML code or image URLs when filling in the content in the background. When displaying in the front-end template, be sure to use|safeFilter, for example{{item.Value|safe}}To prevent HTML code from being escaped and not displayed correctly. If you want to support Markdown format, make sure that the Anq CMS has enabled the Markdown editor and that the template handles Markdown rendering correctly (for example, using|render|safe)
3. How can I display a custom 'Product Origin' field on the product list page?
Custom parameters are mainly used for displaying on detail pages. If you need to display on the list page, you need to usearchiveListlabel'sitemvariables, and combinearchiveParamsto obtain the custom parameters of each list item. The specific method is,archiveListIn the loop, usearchiveParamsAnd specify the ID of the current list item:
{% 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 %}
This has been usedarchiveParams param with id=item.Id sorted=falseTo get the custom parameters of the current list item(item), and assign it toparamThen proceedparam.productOrigin.ValueDirectly access the value of the origin field. Note thatsorted=falseIn order to directly pass throughproductOriginAccess by key name