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

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

As an experienced website operations expert, I fully understand the importance of a flexible and efficient content management system for a corporate website.AnQiCMS stands out among many CMSs for its powerful customization capabilities and SEO-friendliness.It can not only help us manage content easily, but also seamlessly connect various configurations from the backend 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 backend.

In today's rapidly changing 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, Skype, etc., have become important bridges for enterprises to communicate with customers.AnQiCMS knows 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.

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

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

  1. Log in to the backend, locate to the contact information settings:Open your AnQiCMS management backend, find it in the left navigation menu:“Backend Settings”Then click to enter“Contact Information Settings”page.

  2. Default field and custom area:On this page, you will see some AnQiCMS preset contact information fields, such as 'Contact Person', 'Contact Phone', 'Contact Address', 'Contact Email', and so on.These are the commonly used and indispensable information that we have.Custom setting parametersThis is where we work 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 this custom contact method in your template.Strongly recommend using English and adopting CamelCase naming conventionfor exampleWhatsApp/WeChatOfficial/SkypeIDThis ensures clarity and consistency when calling the template. Avoid using Chinese or special characters.
    • Parameter value:Enter your actual contact information here, 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, making it convenient for you to manage and understand it in the future.For example, you can fill in the "Enterprise WhatsApp Business Number."

    For example, to add WhatsApp contact information:

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

    After completion, click save, and 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's frontend, so that your customers can see and use it. AnQiCMS's template engine provides a simple yet powerfulcontactTags to achieve this goal.

  1. KnowcontactTags:In the template system of AnQiCMS,contactTags are specifically used to call contact information. Its basic usage format is{% contact 变量名称 with name="字段名称" %}.字段名称This is the parameter name you filled in the "Contact Information Settings" on the backend.

  2. Directly output the custom field:If you just want to display the value of a custom contact method directly at a specific location in the template, you can usecontacta tag to 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:In some complex scenarios, you may wish to store the contact information value in a variable first, and then perform operations such as judgment, concatenation, or iteration. At this time, you can incontactDefine a variable name in the tag.

    For example, assign a 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 %}

    Here we used{%- ... %}Remove the whitespace around the label to make the code cleaner. At the same time,ifstatement to judge the variablewhatsappNumberDoes the value exist? It is a good programming habit to avoid blank content when the field is not configured.

  4. Call in 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 specify.siteId.

Practical Case: Displaying contact information in the website footer

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

<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 integrated the backend custom onesWhatsAppandWeChatOfficialField is displayed.When these custom fields have values in the background, they will be displayed on the front end; if not configured in the background, this part of the content will not be rendered, ensuring the tidiness of the page.

Summary and **Practice

With AnQiCMS's flexible backend configuration and powerful template tag features, you can easily manage and display personalized contact information. Whether it's domestic WeChat, QQ, or international WhatsApp, Telegram, seamless integration is achievable.This high level 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 clear and meaningful English names for 'parameter name', avoid ambiguity, and facilitate later maintenance and team collaboration.
  • Content testing:After modifying the template, be sure to test on different browsers and devices to ensure that all contact methods display and clickable correctly.
  • Consideration for multilingual:For multilingual sites, you may need to combine the multilingual function of AnQiCMS, 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 calling skills and make your website more expressive and closer to user needs.

Common Questions (FAQ)

  1. Q: I have set up a custom contact information field in the background, but it does not display any content in the template. What could be the reason? A:Please check the following points:
    • Parameter name spelling is correct:In `{% contact with name=“field”}