How should the 'parameter value' be filled in for the customized contact information in the AnQiCMS background to be correctly called in the template?

This is not just a technical detail, it also concerns the accurate presentation of website information and the smoothness of user experience.The AnQi CMS provided us with great flexibility, allowing us to flexibly display various contact information according to the actual needs of the website.

Flexible contact methods, efficient information transmission

In website operation, contact information is an important bridge connecting users and enterprises.In addition to the usual phone, email, and address information, many times we also need to display some personalized contact methods, such as customer service WeChat QR codes, WhatsApp accounts, online customer service links, and even some specific business cooperation email addresses.Contact information settingsThe module not only provides rich default fields but also allows usCustom settings parametersThis is the focus of this article.

When we enter the Anqi CMS backend, navigate to the "Contact Information Settings" under "Backend Settings", we will see a "Custom Setting Parameters" area.Here, we can add an unlimited number of personalized contact information based on business needs.Parameter NameParameter valueAndNoteAmong them, the correct filling of 'parameter name' and 'parameter value' directly determines whether these information can be accurately called and displayed in the front-end template.

“Parameter name”: treasure map guidance in the template

"Parameter NameIt can be understood as the 'key' or 'variable name' you look for in the template. It tells the template engine which specific custom contact information you are looking for.

When filling in the "parameter name", Anqi CMS provides some very user-friendly handling mechanisms. Although you can directly fill in Chinese, such as "Customer Service WeChat QR Code", the system usually automatically converts it to a camel case naming that is more suitable for the programming environment (such asCustomerWeChatQrCode），or at least perform encoding processing. Therefore, as an experienced operator, my suggestion is:Try to use English and follow camel case namingFor exampleWhatsAppNumber/CustomerServiceLink/BusinessFaxand so on. The benefits of doing this are multifaceted:

  • Clear and concise:English parameter names are more universal and conducive for team members to understand and maintain.
  • Avoid ambiguity:Reduce compatibility issues that may arise due to Chinese in different systems or encoding environments.
  • Consistent with the template tag:When calling the tag in the template, thenameproperties are usually also in English to maintain consistency and avoid unnecessary errors.

This "parameter name" once set, becomes the unique identifier for calling the information in the template.

"Parameter value": the real content displayed to the user.

And "Parameter valueThis is the content that appears on the website page after successfully calling it through the "parameter name" in the template.It's like the real treasure you find on your treasure map.Output as isEnter the template, therefore, the way it is filled in needs to be determined according to the type of content you want to present.

Let us illustrate this with several specific examples:

  1. Plain text information:If you want to display a fax number, for example+86-010-12345678. Then simply fill in this number in the "parameter value".
    • Back-end settings:参数名: BusinessFax,参数值: +86-010-12345678
  2. A complete URL link:If you want to display a link to an online customer service, the user clicks on it and can directly jump to the customer service page. Then, you need to fill in the complete URL in the 'Parameter Value'.
    • Back-end settings:参数名: OnlineServiceUrl,参数值: https://chat.anqicms.com/
  3. A picture URL:If you want to display a WeChat customer service QR code image, then enter the complete URL address of the QR code image in the 'Parameter Value'.
    • Back-end settings:参数名: WeChatQrCodeImage,参数值: /uploads/images/wechat_qrcode.png(Here can be a relative path or an absolute path)
  4. Content with HTML tags: In some cases, you may want the 'parameter value' to directly contain some simple HTML tags, such as a linked text description.
    • Back-end settings:参数名: CustomContactInfo,参数值: 访问我们的 <a href="https://en.anqicms.com/contact">联系页面</a> 了解更多。

Remember, the Anqi CMS template engine is powerful, it will accurately render the parameter value you input. Therefore,The content filled in the “parameter value” is what is displayed after the template is called.

Accurately call the custom contact information in the template

After understanding the principles of setting up "parameter name" and "parameter value", the next step is how to present them in the front-end template. Anqi CMS provides a dedicated{% contact %}Tags to handle all background configuration contact methods.

The basic call format is:{% contact 变量名称 with name="字段名称" %}.

HerenameAttribute, which is the 'parameter name' we set in the background.

Let us demonstrate how to call the examples set earlier in the template:

  • Dial the facsimile number:

    <p>传真：{% contact with name="BusinessFax" %}</p>
{# 或者，将值赋给一个变量再输出，这样更灵活 #}
{% contact faxNumber with name="BusinessFax" %}
<p>传真号码是：{{ faxNumber }}</p>

  • Call the online customer service link:

    <a href="{% contact with name="OnlineServiceUrl" %}" target="_blank">在线咨询</a>

  • Call the WeChat customer service QR code image:

    {% contact qrCodeUrl with name="WeChatQrCodeImage" %}
<img src="{{ qrCodeUrl }}" alt="微信客服二维码" style="width: 120px; height: 120px;" />

    Please note that ifqrCodeUrlis a picture address, we need to use<img>tags to wrap it in order to display the picture correctly.

  • to call custom content that includes HTML tags:

    {% contact customInfo with name="CustomContactInfo" %}
<p>{{ customInfo|safe }}</p>

    Pay special attention here|safeFilter. Because the "parameter value" may contain HTML tags, in order to make the browser parse it as HTML instead of plain text, we need to use|safeThe filter tells the template engine that this part of the content is safe and does not need to be escaped. Otherwise,<a href="...">it will be displayed directly on the page as text.

Summary and Practical Suggestions

By flexibly using the custom contact method function of the Anqi CMS backend, combined with the front-end template's{% contact %}Label, we can easily manage and display various personalized website contact information. The key is:

  1. "Parameter name"The key you use to reference this information in the template, it is recommended to use English camel case naming, and ensure consistency with thenameproperties strictly.
  2. “Parameter value”: Is the actual content displayed on the page, decide the filling method according to the content type (plain text, URL, image URL, HTML fragment, etc.). If it contains HTML tags, remember to use them in conjunction with the template.|safefilter.

Master these skills, and you will find website information management much easier, and content operation more efficient.

Frequently Asked Questions (FAQ)

Q1: Can the name of a custom parameter be written in Chinese? If it is written in Chinese, how can it be called in the template?

A1:The custom parameter name in the AnQi CMS backend can be filled in Chinese, but the system usually processes it internally. However, to** practice and avoid potential encoding issues, we strongly recommend using English and following camel case naming conventions. If you indeed use Chinese parameter names, such as “Online Customer Service Link”, then when calling it in the template, nameThe attribute usually needs to be filled with the English form converted internally by the system (for exampleOnlineCustomerServiceLink), or sometimes Chinese can be used directly, but this depends on the specific version and implementation.The most reliable method is to save the custom parameters in the background, then check the system prompts or try to call it using English camel case naming.

Q2: My custom contact parameter value is a picture URL, why does it only display the link address instead of the image in the template?

A2:The "parameter value" field stores plain text data, even if you enter an image URL, it is just a string. To display an image on a webpage, you need to use HTML's<img>Label. When calling this image URL parameter value in the template, it should be used as<img>label'ssrcAttribute value. For example, if your parameter name isWeChatQrCode, the parameter value is/uploads/images/qrcode.png, then you should write it like this in the template:<img src="{% contact with name="WeChatQrCode" %}" alt="微信二维码" />.

Q3: I have set up a custom contact method and called it in the template, but the front-end of the website does not display it. What could be the reason?

A3:In this situation, you can check from the following aspects:

  1. Is the parameter name consistent:Check if the "parameter name" you set in the background matches the template in{% contact with name="..." %}label'snameThe properties are exactly the same, including case. This is the most common mistake.
  2. Did it save correctly?Confirm that you clicked the 'Save' or 'Submit' button after modifying or adding contact information in the background.
  3. Template caching issue: Try to clear the system cache or browser cache of Anqicms, sometimes old cache data can cause the page content not to be updated.
  4. HTML structure issue: If your "parameter value" contains HTML tags (such as<a href="...">), but the template does not use them|safeA filter may cause the content to be displayed as plain text and even ignored by the browser. Please check if it has been added|safe.
  5. Syntax error:Check if the template file itself has any other syntax errors, which may cause the entire template parsing to fail. Through these steps, it is usually possible to locate and solve the problem.