How to call the custom contact information field added in the AnQiCMS template?

The complete guide to calling the custom contact information field in AnQi CMS template: from backend configuration to frontend display

As an experienced website operations expert, I am well aware of the importance of a flexible and efficient content management system for a corporate website.AnQiCMS stands out among many CMSes with its powerful customization capabilities and SEO-friendliness.It can not only help us easily manage content, but also seamlessly connect various information configured in the background to the front end of the website through its flexible template mechanism.Today, let's delve into a very practical scenario: how to call the custom contact information field added in the AnQiCMS template.

In today's fast-paced business environment, the contact information of a website is no longer limited to traditional phone and email.With the popularity of social media and instant messaging tools, various communication methods such as WhatsApp, Telegram, Line, and Skype have become important bridges for enterprises to communicate with customers.AnQiCMS understands this need and provides extremely flexible custom field functionality, allowing you to easily add these personalized contact information based on your actual business and target audience.

Step 1: Configure the custom contact information field in the AnQi CMS backend

Firstly, we need to complete the custom contact information setting in the AnQiCMS backend. This is like laying a solid foundation for your website's communication channels.

  1. Log in to the back end, locate to the contact information settings:Open your AnQiCMS management back end, find it in the left navigation menu:“Background Settings”and then click to enterthe "Contact Information Settings"the page.

  2. Default fields and custom areas:On this page, you will see some AnQiCMS preset contact information fields, such as "contact person", "contact phone number", "contact address", "contact email" and so on.This is the information we commonly use and is essential. Below the page, there is a very critical area named"Custom Setting Parameters"This is where we cast our magic, adding personalized contact information.

  3. Add your custom field:Click the 'Add' button, and you will see three input boxes:

    • Parameter name:This is a crucial field, which will serve as the unique identifier for the custom contact method you call in the template.Strongly recommend using English and adopting CamelCase naming conventionFor exampleWhatsApp/WeChatOfficial/SkypeIDand, this ensures clarity and consistency when calling the template. Avoid using Chinese or special characters.
    • Parameter value:Enter your actual contact information, such as your WhatsApp number+1234567890or your Telegram username@YourTelegramID.
    • Note:This is an optional field, used to simply describe the purpose of this custom parameter, for your future management and understanding.For example, you can fill in the "business WhatsApp number" of the enterprise.

    For example, to add a WhatsApp contact:

    • Parameter name:WhatsApp
    • Parameter value:+86 13812345678
    • Note:客户服务WhatsApp热线

    After completing the entry, click save, your custom contact information field will be successfully added to the background.

Step 2: Call the custom field in the AnQiCMS template.

After the background configuration is completed, the next step is to present this information on the website front end, so that your customers can see and use it. AnQiCMS template engine provides a simple and powerfulcontactTo achieve this goal with a tag.

  1. Get to knowcontactTags:In the AnQiCMS template system,contactA tag is specifically used to call contact information. Its basic format is.{% contact 变量名称 with name="字段名称" %}. Among them,字段名称It is the parameter name you filled in the background "Contact Information Settings".

  2. Directly output the custom field:If you just want to directly display the value of the custom contact information at a specific location in the template, you can use it directlycontactlabel and specifynameParameter.

    For example, to display the WhatsApp number you just added in the background:

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

  3. Assign a custom field to a variable and then use it:Under complex scenarios, you may want to store the value of the contact information in a variable first, and then perform judgment, concatenation, or loop operations. At this point, you cancontactDefine a variable name in the tag.

    For example, assign the WhatsApp number towhatsappNumberVariable:

    {%- contact whatsappNumber with name="WhatsApp" %}
{%- if whatsappNumber %} {# 判断变量是否存在且有值 #}
    <p>立即通过WhatsApp联系我们: <a href="https://wa.me/{{ whatsappNumber }}">{{ whatsappNumber }}</a></p>
{%- else %}
    <p>暂无WhatsApp联系方式</p>
{%- endif %}

    We used here{%- ... %}To remove the whitespace around the tag, making the code cleaner. At the same time, throughifStatement to determine the variablewhatsappNumberIs there a value, it is a good programming habit that can avoid blank content when the field is not configured.

  4. Calling under a multi-site environment:If you manage multiple AnQiCMS sites and need to call the contact information of a specific site, you can usesiteIdParameter.

    {# 调用站点ID为2的WhatsApp号码 #}
<p>分站2的WhatsApp热线：{% contact with name="WhatsApp" siteId="2" %}</p>

    In most cases, if you are working within a single site or wish to use the contact information of the current site, there is no need to specifysiteId.

Practical case: Display of contact information in the website footer

Let's integrate these knowledge points and build a contact information display area at the website footer.This area includes both default fields and our custom WhatsApp.

<footer class="site-footer">
    <div class="container">
        <div class="contact-info">
            <h3>联系我们</h3>
            <p>联系人：{% contact with name="UserName" %}</p>
            <p>电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>
            <p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
            <p>地址：{% contact with name="Address" %}</p>

            {# 调用自定义WhatsApp字段 #}
            {%- contact whatsappNumber with name="WhatsApp" %}
            {%- if whatsappNumber %}
            <p>
                <img src="/static/images/whatsapp-icon.png" alt="WhatsApp" style="width:24px; height:24px; vertical-align: middle; margin-right: 5px;">
                WhatsApp: <a href="https://wa.me/{{ whatsappNumber }}" target="_blank">{{ whatsappNumber }}</a>
            </p>
            {%- endif %}

            {# 您也可以在此处添加其他自定义字段，例如WeChatOfficial #}
            {%- contact wechatOfficial with name="WeChatOfficial" %}
            {%- if wechatOfficial %}
            <p>微信公众号: {{ wechatOfficial }}</p>
            {%- endif %}
        </div>
        <div class="copyright-info">
            <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
            <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
        </div>
    </div>
</footer>

In this example, we not only called the preset contact methods, but also elegantly customized the backgroundWhatsAppandWeChatOfficialThe field is displayed. When these custom fields have values in the background, they will be displayed on the front end;If the background is not configured, this part of the content will not be rendered, ensuring the tidiness of the page.

Summary and **Practice

Through AnQiCMS flexible backend configuration and powerful template tag functions, you can easily manage and display personalized contact information, whether it is domestic WeChat, QQ, or international WhatsApp, Telegram, seamless connection can be achieved.This high degree of customization undoubtedly brings great convenience and expansion space for website operation.

Here are some suggestions to better utilize this feature:

  • Clear parameter naming:Choose a clear and meaningful English name for "parameter name", avoid ambiguity, and facilitate later maintenance and teamwork.
  • Content test:After modifying the template, be sure to test on different browsers and devices to ensure that all contact information is displayed and clickable.
  • Consideration for multilingual:For a multilingual site, you may need to combine the multilingual function of AnQiCMS to configure corresponding contact information for different languages, or include multilingual text in the values of custom fields and switch through template logic.

AnQiCMS is not only a content publishing tool, but also a powerful assistant for your content marketing and global layout.Master these call techniques and make your website more expressive and closer to user needs.

Frequently Asked Questions (FAQ)

  1. Q: I have set up a custom contact information field in the background, but no content is displayed when called in the template. What could be the reason? A:Please check the following points:
    • Is the parameter name spelled correctly?In the field `{% contact with name=“