How to retrieve and display the contact information configured on the website backend (such as phone number, address, social media links)?

It is crucial to clearly and conveniently display a company's contact information in website operation, as it not only enhances customer trust but also serves as a direct way for users to obtain services and consult.AnQiCMS (AnQiCMS) is a powerful content management system that provides intuitive backend configuration options and flexible template calling mechanisms, allowing you to easily manage and display this information.

Next, we will explore how to configure and display your website contact information on AnQiCMS, including phone numbers, addresses, social media links, and more.

The first part: Configure contact information in the AnQiCMS background

AnQiCMS concentrates the management of basic website information in the "Background Settings" module, which includes the "Contact Information Settings".This is the entry point for you to centrally manage all external contact information.

1. Go to contact information settings

Log in to your AnQiCMS admin interface and then find it in the left navigation barBackend settingsand then click to expand, selectContact information settings. Enter this page and you will see a series of preset contact information fields.

2. Fill in the core contact information.

On the "Contact Information Settings" page, you can fill in the following default fields according to your actual situation:

  • Contact: For example, "Mr. Wang" or "Customer Service Team".
  • Contact phone numberCustomer service phone number or business consultation phone number.
  • Contact addressCompany's detailed address, convenient for customers to visit offline or mail.
  • Contact emailEmail address for receiving consultation inquiries.
  • WeChat IDIf your company uses WeChat for customer service, you can fill in the WeChat ID.
  • WeChat QR codeUpload your WeChat customer service QR code image for easy scanning by users.

In addition to the above common information, AnQiCMS also presets mainstream social media platform link fields such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube, and so on.You can selectively fill in the links to these platforms based on your business needs and target customer group.

3. Add custom contact information (as needed)

If the default fields provided do not cover all your contact information needs, for example, if you want to add a link to a specific instant messaging tool or some uncommon social platform, AnQiCMS also supports custom addition.

Under the "Contact Information Settings" page, there is usually a “Custom settings parameters” area. Here, you can:

  • Parameter Name: Enter a distinctive English name, such asLineIdorTelegramLink. This parameter name will be the key identifier you use to call this information in the website template. The system will automatically convert it to camelCase (such aslineId), convenient for template calls.
  • Parameter valuePlease fill in the specific contact information, such as your Line ID or Telegram group link.
  • Note: Add a brief description for this custom field to help you or other administrators understand its purpose.

In this way, AnQiCMS ensures that all contact information on your website can be centrally managed in the background and can be flexibly expanded to meet the changing business needs.

Part Two: Retrieve and display contact information in the website template

After configuring the background information, the next step is to call and display these data in the front-end template of your website.AnQiCMS's template system adopts a syntax style similar to Django, obtaining background data through specific tags (Tag).

1. Core Tags:contact

In the template files of AnQiCMS (usually located/templateUnder the directory.htmlfile), you can usecontactTags to retrieve the various information you have configured in the "Contact Settings" on the backend.

contactThe basic usage of tags is:{% contact 变量名称 with name="字段名称" %}. Among them:

  • 变量名称: is optional, you can specify a variable name for the contact information obtained for use in subsequent code. If not specified, it willcontactThe label will output the value of the field directly.
  • nameThis is the most critical parameter, it needs to correspond to the field name you have configured in the background (default field or custom field "parameter name").

2. Display commonly used contact information

Let us understand how to display this information in a template through a specific code example:

  • Display contact phone number

    <p>联系电话：{% contact with name="Cellphone" %}</p>
{# 结合tel:协议，用户点击可直接拨号 #}
<p><a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">拨打电话：{% contact with name="Cellphone" %}</a></p>

  • Display contact address

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

  • Display contact email

    <p>业务邮箱：{% contact with name="Email" %}</p>
{# 结合mailto:协议，用户点击可直接发送邮件 #}
<p><a href="mailto:{% contact with name="Email" %}" rel="nofollow">发送邮件：{% contact with name="Email" %}</a></p>

  • Display WeChat ID

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

  • Display WeChat QR codePlease note when you need to display an image link (such as a WeChat QR code)|safeFilter. This is because the AnQiCMS template system defaults to escaping output content to prevent cross-site scripting attacks (XSS).For HTML code or image URLs that need to be directly parsed,|safeThe filter ensures its correct display.

    {% contact wechatQrcode with name="Qrcode" %}
{% if wechatQrcode %} {# 检查是否存在二维码图片URL #}
    <p>微信扫码：<img src="{{ wechatQrcode | safe }}" alt="微信二维码" style="width: 100px; height: 100px;"></p>
{% endif %}

  • Display social media linksFor example, using Facebook, the calling method is similar for other social media platforms (such as Twitter, LinkedIn, Instagram, etc.), just need tonameReplace the parameter with the corresponding field name.

    {% contact facebookLink with name="Facebook" %}
{% if facebookLink %}
    <p>关注我们：<a href="{{ facebookLink }}" target="_blank" rel="nofollow">Facebook</a></p>
{% endif %}

3. Show custom contact information

For example, if you have added a custom contact method in the background,LineIdyou can also usecontacttag to call:

{% contact lineId with name="LineId" %}
{% if lineId %}
    <p>Line ID：<a href="https://line.me/ti/p/~{{ lineId }}" target="_blank" rel="nofollow">{{ lineId }}</a></p>
{% endif %}

Please note that for values like Line ID, if it is not a complete URL itself, you may need to manually construct a clickable link, as shown in the example above.

4. Optimize display experience

To ensure the cleanliness of the website interface and the user experience, it is recommended to add conditional judgments in the template, so that only when a contact method has a value is it displayed, avoiding blank or incomplete information:

`twig {# Comprehensive example: Display all available contact information #}

<h3>联系我们</h3>
{% contact userName with name="UserName" %}
{% if userName %}<p>联系人：{{ userName }}</p>{% endif %}

{% contact cellphone with name="Cellphone" %}
{% if cellphone %}<p>电话：<a href="tel:{{ cellphone }}" rel="nofollow">{{ cellphone }}</a></p>{% endif %}

{% contact address with name="Address" %}
{% if address %}<p>地址：{{ address }}</p>{% endif %}

{% contact email with name="Email" %}
{% if email %}<p>邮箱：<a href="mailto:{{ email }}" rel="nofollow">{{ email }}</a></p>{% endif %}

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

{% contact wechatQrcode with name