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

It is crucial to clearly and conveniently display the 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 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's contact information in AnQiCMS, including phone numbers, addresses, social media links, and more.

First part: Configure contact information in AnQiCMS backend

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

1. Enter contact information settings

Log in to your AnQiCMS admin interface, then find the "" in the left-hand navigation bar.Backend settingsThen click to expand it and select the "Contact information settingsEnter 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 PersonFor example, "Mr. Wang" or "Customer Service Team".
  • Phone Number[en] Your customer service phone number or business consultation phone number.
  • Contact Address[en] The detailed address of the company, convenient for customers to visit offline or mail.
  • Contact Email[en] The email address for receiving email 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 link fields for mainstream social media platforms such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, and Youtube.You can selectively fill in the links to these platforms based on your business needs and target customer group.

3. Add Custom Contact Information (Optional Extension)

If the default provided fields do not cover all your contact information needs, such as if you want to add a link to a specific instant messaging tool or a less common social platform, AnQiCMS also supports you in customizing and adding it.

Below the 'Contact Information Settings' page, there is usually a "Customize settings parameters" section. Here, you can:

  • Parameter name: Enter an identifiable English name, such asLineIdorTelegramLinkThis 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 (likelineId), for easy template access.
  • parameter valueFill in the corresponding specific contact information, such as your Line ID or Telegram group link.
  • [en] NoteAdd 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 flexibly expand to adapt to changing business needs.

Part Two: Obtain and Display Contact Information in Website Templates

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

1. Core Tags:contact

In the template files of AnQiCMS (usually located in)/templatethe directory..htmlfile), you can usecontactLabel to obtain the various information you configure in the "Contact Information Settings" on the backend.

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

  • 变量名称The colon is optional. You can specify a variable name for the contact information you get to facilitate its use in subsequent code. If not specified,contactthe label will directly output the field value.
  • nameThis is the most critical parameter, which needs to correspond to the field name you configured in the background (the default field or a custom field's 'parameter name').

2. Display common contact methods

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>

  • Show WeChat QR CodeWhen you need to display an image link (such as a WeChat QR code), please note that you should use|safeFilter.This is because the AnQiCMS template system defaults to performing security escaping on the output content to prevent cross-site scripting (XSS) attacks.|safeThe filter can ensure its correct display.

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

  • Show social media linksFor example, Facebook, the calling methods of other social media platforms (such as Twitter, LinkedIn, Instagram, etc.) are similar, just need tonameParameter replacement with the corresponding field name is sufficient.

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

3. Display custom contact information

If you have added a custom contact method in the background, such asLineId, you can also go throughcontacttags:

{% 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 build a clickable link, as shown in the example above.

4. Optimize Display Experience

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

[en] 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