How to get the contact information configured in the `contact` tag of AnQiCMS template?

As an experienced website operator for AnQi CMS, I am well aware of the core position of content in website construction and user interaction.Effectively and conveniently displaying contact information is an indispensable part of the website function, which directly affects the efficiency and willingness of users to communicate with the enterprise.In AnQiCMS, we provide simple and powerful template tags for this——contactAllow you to easily display the contact information configured on the backend on the website front-end.

Obtain the contact information configured in the AnQiCMS template.

AnQiCMS provides a namedcontactA template tag used specifically to retrieve and display the contact information you preset in the backend management system.The design philosophy of this label is to maximize flexibility and ease of use, ensuring that even non-technical operation personnel can easily manage and update the contact information of the website without modifying any template code.

Configuration of backend contact information

In the AnQiCMS management backend, you can navigate to the 'Contact Information Settings' area under 'Backend Settings' to configure your contact information.Here not only includes a series of default contact fields such as contact person, contact phone number, contact address, etc., but also allows you to customize additional contact parameters according to your actual needs.For example, if you want to display WhatsApp account or Facebook homepage links on your website, you can add custom fields and their corresponding values in this area.

contactBasic usage of tags

contactThe general method of using tags is{% contact 变量名称 with name="字段名称" %}.

• 变量名称is an optional parameter, if you provide it, then the contact information value obtained will be stored in this variable, and you can refer to it in subsequent template code by{{变量名称}}. If you omit it变量名称thencontactThe label will directly output the value of the corresponding field.
• name="字段名称"It is the key parameter of the contact information field you want to retrieve. This "field name" needs to match the parameter name in the background configuration exactly.

Let us understand how to obtain this information through some specific examples.

Get the built-in contact information field

AnQiCMS has preset a variety of common contact information fields, which can be accessed directly throughnameparameters.

• Contact person (UserName)

  <p>联系人：{% contact with name="UserName" %}</p>
  {# 存储到变量再使用 #}
  {% contact contactPerson with name="UserName" %}
  <p>我们的联系人：{{ contactPerson }}</p>
  

• Contact phone (Cellphone)

  <p>联系电话：{% contact with name="Cellphone" %}</p>
  <a href="tel:{% contact with name="Cellphone" %}">立即致电</a>
  

• Contact address (Address)

  <p>公司地址：{% contact with name="Address" %}</p>
  

• Contact email (Email)

  <p>邮箱：{% contact with name="Email" %}</p>
  <a href="mailto:{% contact with name="Email" %}">发送邮件</a>
  

• WeChat account (Wechat)

  <p>微信：{% contact with name="Wechat" %}</p>
  

• WeChat QR code (Qrcode)If the background is configured with a WeChat QR code image, you can obtain its URL and display it in the following way:

  <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
  

• Social media links (for example)QQ,WhatsApp,Facebook,Twitter,Tiktok,Pinterest,Linkedin,Instagram,Youtube)AnQiCMS also has built-in common social media fields, you can call them as needed:

  <p>我们的QQ：{% contact with name="QQ" %}</p>
  <a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank">WhatsApp联系</a>
  <a href="{% contact with name="Facebook" %}" target="_blank">访问Facebook</a>
  

Get custom contact information fields

The strength of AnQiCMS lies in its scalability.If you add a new contact field (such as a customer service hotline parameter) through the "Custom Settings Parameters" in the background contact settings, you can also retrieve its value by the parameter name in the template.

Assuming you have customized a parameter name in the backgroundServiceHotlineIts parameter value is400-123-4567.

In the template, you can call it like this

<p>客服热线：{% contact with name="ServiceHotline" %}</p>

Please note that the name of the custom parameter must match the 'Parameter Name' setting in the background when calling it in the template.

Under a multi-site environmentsiteIdParameter

For users who operate multiple AnQiCMS sites, if they need to display the contact information configured for another site in a template on a site, they can usesiteIdParameter.

For example, to get the contact phone number of a site with ID 2:

<p>子站点联系电话：{% contact with name="Cellphone" siteId="2" %}</p>

Under normal circumstances, if you only manage a single site or only need to get the contact information of the current site, you can ignore it.siteIdParameter.

Comprehensive Application Example

On the website footer or the 'Contact Us' page, you may need to display all contact information uniformly. Here is a simple example showing how to integrate multiple contact methods together:

<div class="contact-info">
    <h3>联系我们</h3>
    <ul>
        <li>
            <i class="fa fa-user"></i>
            <span>联系人：{% contact with name="UserName" %}</span>
        </li>
        <li>
            <i class="fa fa-phone"></i>
            <span>电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></span>
        </li>
        <li>
            <i class="fa fa-envelope"></i>
            <span>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span>
        </li>
        <li>
            <i class="fa fa-map-marker"></i>
            <span>地址：{% contact with name="Address" %}</span>
        </li>
        {% contact wechatAccount with name="Wechat" %}
        {% if wechatAccount %}
        <li>
            <i class="fa fa-wechat"></i>
            <span>微信：{{ wechatAccount }}</span>
        </li>
        {% endif %}
        {% contact whatsappLink with name="WhatsApp" %}
        {% if whatsappLink %}
        <li>
            <i class="fa fa-whatsapp"></i>
            <span>WhatsApp：<a href="https://wa.me/{{ whatsappLink }}" target="_blank">{{ whatsappLink }}</a></span>
        </li>
        {% endif %}
        {# 假设您自定义了一个名为`BusinessHours`的字段 #}
        {% contact businessHours with name="BusinessHours" %}
        {% if businessHours %}
        <li>
            <i class="fa fa-clock-o"></i>
            <span>营业时间：{{ businessHours }}</span>
        </li>
        {% endif %}
    </ul>
</div>

In this way, you can create a clear and easy-to-maintain contact information display area.When the contact information changes, it only needs to be updated in the AnQiCMS background, and the front-end page will automatically synchronize the display, greatly improving the operational efficiency.

Frequently Asked Questions (FAQ)

1. I modified the contact information on the backend, but the website front end did not update immediately, why is that?AnQiCMS to improve website performance, it usually uses a caching mechanism.After you modify the background configuration, you may need to manually clear the system cache to display the latest information on the front end.You can find the option 'Update Cache' or similar in the AnQiCMS backend to perform the operation.If clearing the cache does not update, please check if you are modifying the configuration on the correct site (if it is a multi-site environment) or if the browser cache is causing the display of old content, try clearing the browser cache or accessing in incognito mode.

2. I added a custom contact method, but it always shows as empty when called in the template, how can I troubleshoot?First, please carefully check the template you are usingcontactlabel'snameParameter value, ensure it matches the custom parameter name you added in the backend "Contact Information Settings" exactly, including case sensitivity.AnQiCMS template tags are case-sensitive.Secondly, confirm that the custom parameter is indeed set in the background. If there are still issues, check the server logs or the AnQiCMS error logs for more detailed error information.

3. contactCan a tag retrieve formats other than text (such as HTML)? contactThe tag is mainly used to retrieve simple data such as plain text or image URLs. If you have entered HTML content in a custom field in the background and want the front-end to parse and render these HTML, you may need to use{{变量名称}}Output when adding|safeFilter, for example{{ contactDescription|safe }}However, this needs to be done carefully to prevent potential XSS security risks. For fields like WeChat QR code images, it is usually output as is<img>label'ssrcAttribute values are used, do not need|safefilter.