How to use the `{% contact %}` tag to accurately call the value after customizing the contact information field?

As an experienced website operation expert, I deeply understand the importance of flexible content display for website operation efficiency and user experience.AnQiCMS (AnQiCMS) with its excellent customizability also provides great convenience when dealing with seemingly simple but crucial information such as website contact details.Today, let's delve deeply into how to accurately pass through the contact information field customized in the Anqi CMS backend in the front-end template{% contact %}Label their values.

Anqi CMS template: A practical guide to accurately call custom contact information field values

In the digital age, the contact information of a website is the bridge for communication between users and us, and it is also a key link in building trust and promoting business transformation.However, traditional CMS systems often only provide a limited number of contact fields, such as phone, email, and address.For enterprises pursuing refined operation, this is obviously not enough.Different business lines may require independent contacts or phone numbers, global businesses may need international communication apps like WhatsApp, Telegram, or may need to display localized contact information in specific regions.

The strength of AnQi CMS lies in its 'flexible content model' concept, this advantage is not only reflected in the management of content articles, but also extends to the basic configuration of the website, including our contact information.By customizing the contact information field, we can easily expand the communication dimension of the website, meeting various complex operational needs.

Step 1: Flexibly customize your contact information in the background

To display custom contact information in the front-end template, we first need to set it up in the Anqicms backend. This process is intuitive and easy to operate:

1. Log in to the AnQi CMS background.
2. Navigate to the "Background Settings" area in the left menu, click to enter the "Contact Information Settings".
3. On this page, you will see some default contact information fields, such as contact person, phone number, and email address, etc.Scroll down and you will find an area named "Custom Setting Parameters".
4. Here, you can click "Add New Parameter" to create the custom field you need. You need to fill in three core information:
   • Parameter name:This is the 'key' you use when calling this field in the template.Suggest using English or pinyin, for example “WhatsApp”, “SalesPhone”, “SupportEmail”, etc.It is recommended that you use English parameter names directly, as the system will internally try to convert Chinese input into CamelCase for template calls, but to avoid unnecessary confusion, it is strongly recommended that you use English parameter names directly.
   • Parameter value:This is the specific content of the contact information, such as your WhatsApp number, the dedicated line phone number of the sales department, or the customer service email address.
   • Note:This is an optional field used to explain the purpose of the parameter, making it convenient for oneself or team members to maintain and understand in the future, and it will not be displayed on the front end.

For example, we may add a parameter name called "WhatsApp" with the parameter value "+86 13800138000".Add a parameter named "WeChatPublicAccount" (Public WeChat Account) with the parameter value "anqicms".After saving these settings, the background configuration work is completed.

Second step: apply{% contact %}Label calls accurately

After completing the custom settings in the background, the next step is to display this information on your website's front-end template. Anqicms provides a dedicated{% contact %}The tag is exactly the core tool we use to achieve this goal.

{% contact %}The basic usage of the tag is very concise and clear. It is usually used withnameparameters,nameThe value of the parameter is the 'parameter name' defined in the backend.

Invoke the default contact method field:

If you want to call the default phone number field in the template, you can write it like this:

<p>联系电话：{% contact with name="Cellphone" %}</p>

This code will directly output the value you entered in the 'Contact Phone' field under the 'Contact Information Settings' in the background.

Accurately call the custom contact information field:

Now, let's call the WhatsApp contact method we just customized in the background. If your parameter name is set to "WhatsApp", the calling method in the template is as follows:

<p>我们的WhatsApp热线：{% contact with name="WhatsApp" %}</p>

This code executes and then, the page will display our WhatsApp hotline: +86 13800138000.

Assign the field value to a variable for flexible use:

To improve the readability and flexibility of the template, especially when you need to further process a contact information value (such as using it as part of a link), you can{% contact %}Assign the value obtained from the label to a variable:

{% contact whatsappNumber with name="WhatsApp" %}
{% if whatsappNumber %}
    <p>通过WhatsApp联系我们：<a href="https://wa.me/{{ whatsappNumber }}" target="_blank">{{ whatsappNumber }}</a></p>
{% endif %}

{% contact publicAccount with name="WeChatPublicAccount" %}
{% if publicAccount %}
    <p>关注我们的微信公众号：{{ publicAccount }}</p>
{% endif %}

In the above example,whatsappNumberandpublicAccountThe variable names you define will carry the corresponding contact information obtained from the backend. Then, you can embed them into the HTML structure like you would with other variables, even combiningifLabel for conditional judgment to ensure that the field is displayed only when it has a value, thus avoiding blank information on the page.

Step 3: Advanced Applications and Useful Tips

• Build dynamic links: For phone numbers, email addresses, or social media accounts, you usually want them to be clickable links. For example, combining with the phone number'stel:protocol or WhatsApp'swa.me/protocol:

  {% contact phone with name="Cellphone" %}
  {% if phone %}
      <p>客服热线：<a href="tel:{{ phone }}">{{ phone }}</a></p>
  {% endif %}
  
  {% contact email with name="Email" %}
  {% if email %}
      <p>商务合作：<a href="mailto:{{ email }}">{{ email }}</a></p>
  {% endif %}
  

• Call in a multi-site scenario:If your Aqie CMS is deployed on multiple sites and you want to call the contact information of another site in a template of one site,{% contact %}Tags also providedsiteIdParameters to meet this requirement. Simply specify the target site ID when calling it:

  {% comment %} 调用站点ID为2的WhatsApp联系方式 {% endcomment %}
  <p>姊妹站WhatsApp：{% contact with name="WhatsApp" siteId="2" %}</p>
  

• Robustness considerations: null value handling:In the actual operation, some custom fields may not always be filled in. To avoid the template