How to get the contact information, phone number, email, social media and other information configured in the 'Contact Settings' on the backend?

AnQiCMS provides a convenient function for website administrators to centrally manage and display contact information.The contact information, phone number, email, social media and other information configured in the "Contact Settings" in the background can be flexibly presented on the website front-end through simple template tags, greatly enhancing the efficiency and consistency of content updates.

Understand the "Contact Information Settings" on the back-end

Firstly, let's get familiar with the configuration location of this information in the AnQiCMS backend. You can find it in the backend management interface's "Backend settings"Contact information settingsOptions. This module allows you to centrally manage all the contact information displayed on the website.

Here are many commonly used fields preset, such as contacts, contact phone number, contact address, contact email, WeChat ID, WeChat QR code, as well as links to mainstream social media platforms such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram and Youtube. What's more, if these preset fields cannot meet your specific needs, the system also allows you to customize according to your business requirements.Add custom parametersFor example, you can add a "customer service hotline" or "business cooperation email" and other personalized fields.

This information configured in the background, its core value lies in the fact that it can be dynamically called, avoiding the inconvenience of hard coding in the template.Once the information changes, you only need to update it once in the background, and all front-end pages referencing this information will be automatically synchronized.

Get contact information in the template

To call this information on the website front-end page, AnQiCMS provides a specialcontacttag. The design of this tag is simple and powerful, and its basic usage format is as follows:

{% contact 变量名称 with name="字段名称" %}

Among them,nameThe parameter is crucial, it corresponds to the unique identifier for each contact field you set up in the background. If omitted变量名称part, the label will directly output the value of the field; if you specify变量名称，then this value will be assigned to this variable, and you can access it in the subsequent template code{{ 变量名称 }}.

Next, we will demonstrate how to retrieve these contact methods with a specific example:

to obtain the website'sContact Name，usually corresponds to the backend'sUserNameFields:

<p>联系人：{% contact with name="UserName" %}</p>

getPhone Number,"Cellphonefield. To facilitate user click-to-dial, it can be combinedtel:agreements:

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

Contact AddressautoAddressthe field:

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

Contact EmailPassEmailfield to obtain, which can also be combinedmailto:to generate clickable links via the

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

ForWeChat ID, you may want to display the text directly:

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

whileWeChat QR CodeThis is a picture link, which needs to be embedded<img>in the tag to display normally. To improve the readability of the code, we usually assign it to a variable first:

{% contact wechatQrcode with name="Qrcode" %}
{% if wechatQrcode %}
<div class="wechat-qrcode">
    <img src="{{ wechatQrcode }}" alt="微信二维码">
</div>
{% endif %}

Here we have additionally added oneifJudgment to ensure that the page will not display an empty one when the QR code is not set in the background<img>Label.

AnQiCMS also built-in support for multipleSocial media informationThe support. These fieldsnameThe parameters are usually the platform name, for exampleFacebook/Twitter/QQ/WhatsAppYou can call them like this:

<p>
    关注我们：
    <a href="{% contact with name="Facebook" %}" target="_blank">Facebook</a>
    <a href="{% contact with name="Twitter" %}" target="_blank">Twitter</a>
    <a href="https://wpa.qq.com/msgrd?v=3&uin={% contact with name="QQ" %}&site=qq&menu=yes" target="_blank">QQ咨询</a>
</p>

Please note that the QQ consultation link requires a specific format, and an example is provided here. Other social media links are usually the URLs of the platform pages.

If you create one in the backgroundCustom Parametersfor example, a customer service phone number namedcustomerServicePhonecan also be called using its parameter name:

<p>客服热线：{% contact with name="customerServicePhone" %}</p>

Actual application example

Combine the above various contact methods, you can create a complete contact information area in the footer of the website or a dedicated "Contact Us" page:

<div class="footer-contact-info">
    <h3>联系我们</h3>
    <p>联系人：<span>{% contact with name="UserName" %}</span></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>地址：<span>{% contact with name="Address" %}</span></p>

    {% contact wechatQrcode with name="Qrcode" %}
    {% if wechatQrcode %}
    <div class="wechat-qr-section">
        <img src="{{ wechatQrcode }}" alt="微信二维码">
        <p>扫码添加微信</p>
    </div>
    {% endif %}

    <div class="social-media-links">
        <a href="{% contact with name="Facebook" %}" target="_blank" rel="nofollow">Facebook</a>
        <a href="{% contact with name="Twitter" %}" target="_blank" rel="nofollow">Twitter</a>
        <a href="{% contact with name="Linkedin" %}" target="_blank" rel="nofollow">LinkedIn</a>
        <a href="https://wpa.qq.com/msgrd?v=3&uin={% contact with name="QQ" %}&site=qq&menu=yes" target="_blank" rel="nofollow">QQ</a>
    </div>
    <p class="copyright">版权所有 &copy; {% now "2006" %} {% system with name="SiteName" %}</p>
</div>

PasscontactThe flexible use of labels, AnQiCMS makes it easy to manage and display website contact information, whether it is conventional fields or customized content, all can be called through a unified way, which greatly improves the maintenance efficiency and scalability of the website.

Common Questions (FAQ)

  1. How to add a custom contact information field in the background?In AnQiCMS backend, go to the 'Backend Settings' -> 'Contact Information Settings' page.At the bottom of the page, you will see a 'Custom settings parameters' area.Click "Add Custom Parameter", then enter the "Parameter Name" (this is the identifier used when calling the template, it is recommended to use English), "Parameter Value" (the actual content displayed), and "Remark" (used to describe the purpose of this parameter).{% contact with name="你的参数名" %}to call it.

  2. Why did I call the WeChat QR code, but the front-end only displays a link text instead of an image?When you use{% contact with name="Qrcode" %}When calling the WeChat QR code, it returns the URL path of the QR code image. To display the image on the front-end, you need to embed this URL into the HTML's<img>TagssrcProperties, for example:<img src="{% contact with name="Qrcode" %}" alt="微信二维码">. Also, to prevent an empty image tag from appearing on the page when the background does not set the QR code, it is recommended to addif