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

As a senior website operator for Anqi CMS, I know full well the core position of content in website construction and user interaction.Effectively and conveniently displaying contact information is an indispensable part of a website's function, directly affecting the efficiency and willingness of users to communicate with the company.contactPresent the contact information configured in the background on the website front-end easily.

Get the contact information configured in the background in AnQiCMS template.

AnQiCMS provides a namedcontactThe template tag is specifically used to retrieve and display the contact information you have preset from the background management system.This tag's design philosophy 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.

The configuration of the background contact information

In AnQiCMS management backend, you can configure your contact information by navigating to the 'Contact Information Settings' area under 'Backend Settings'.Here it includes a series of default contact fields, such as contact person, contact phone number, contact address, etc., and 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 link on your website, you can add custom fields and their corresponding values in this area.

contactBasic usage of the tag

contactThe general usage method of tags{% 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变量名称so thatcontactLabel 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' must 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 various common contact information fields that can be directly accessed.nameParameters can be used to call them.

  • 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 WeChat QR code image is configured on the back-end, you can obtain its URL and display it in the following way:

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

  • Social media link (for example)QQ,WhatsApp,Facebook,Twitter,Tiktok,Pinterest,Linkedin,Instagram,Youtube)AnQiCMS also includes 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 have added a new contact field (such as, you may have added a parameter named "Customer Service Hotline") in the "Contact Information Settings" in the background by using the "Custom Parameter Settings", then you can also retrieve its value in the template by using the parameter name.

Assuming you have customized a parameter named in the backgroundServiceHotline, its 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' set in the background when calling it in the template.

Environment with multiple sitessiteIdParameters

For users who operate multiple AnQiCMS sites, if they need to display the contact information configured for another site in a template of 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>

In most cases, 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 Examples

On the footer of the website 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>

Through this method, you can create a well-structured, easy-to-maintain contact information display area.When the contact information changes, just update it in the AnQiCMS backend, and the front-end page will automatically synchronize the display, greatly improving operational efficiency.

Common Questions and Answers (FAQ)

  1. I modified the contact information on the backend, but the front end of the website did not update immediately, why is that?AnQiCMS in order to improve website performance, it usually uses caching mechanisms.After you modify the background configuration, you may need to manually clear the system cache to display the latest information on the front immediately.You can find the 'Update Cache' or similar option in the AnQiCMS backend to perform the operation.If the update is not completed after clearing the cache, please check if you have modified 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 access in incognito mode.

  2. I added a custom contact method, but it always displays as empty when called in the template. How should I troubleshoot?First, please carefully check the template you are usingcontactTagsnameParameter value, ensure that it matches the 'parameter name' of the custom parameter you added in the 'Contact Information Settings' backend, including the case.The template tags of AnQiCMS are case-sensitive.Secondly, confirm that the custom parameter does indeed have a value in the background.If there are still problems, check the server logs or the AnQiCMS error logs for more detailed error information.

  3. contactCan the tag retrieve formats other than text (such as HTML)? contactLabels are mainly used to obtain simple data such as plain text or image URLs. If you enter HTML content in the custom fields in the background and want the front-end to parse and render these HTML, you may need to use{{变量名称}}Output with|safeFilter, for example{{ contactDescription|safe }}. But this requires careful operation to prevent potential XSS security risks. For fields like WeChat QR code image URLs, they are usually output directly as<img>TagssrcProperty value usage, not required|safeFilter.