How to obtain the contact information, phone number, email, social media, and other information configured in the background "Contact Settings"?

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

Understand the background "Contact Information Settings"

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

Here are many commonly used fields such as contact person, phone number, address, 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 do not meet your specific needs, the system allows you to customize according to your business requirementsAdd 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 its ability to be dynamically called, avoiding the maintenance inconvenience brought by hard coding in the template.Once the information changes, you only need to update it once in the background, and all the front-end pages referencing this information will be automatically synchronized.

Get contact information in the template

To call this information on the front-end page of the website, 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 key, it corresponds to the unique identifier for each contact information 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, you can refer to it in the subsequent template code through{{ 变量名称 }}to refer to it.

Next, we will demonstrate how to obtain these contact methods through specific examples:

to get the websiteContact Nameusually corresponds to the background'sUserNameField:

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

ObtainContact phone numberyou can useCellphonefield. To make it convenient for users to click and call, it can be combined withtel:protocol:

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

Contact addressIt will pass.Addressthe field:

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

Contact emailByEmailfield to obtain, which can also be combined withmailto:to generate clickable links via protocol:

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

ForWeChat IDYou may want to display the text directly:

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

AndWeChat QR codeIt is an image link, which needs to be embedded<img>It can be displayed normally in the tag. 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 %}

We added an extra one here:ifDetermine, so that when the background does not set the QR code, the page will not display an empty<img>.

AnQiCMS also built-in support for multipleSocial media informationfields.nameParameters are usually the name of the platform, for exampleFacebook/Twitter/QQ/WhatsAppetc. You 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 QQ consultation links require a specific format, and an example is provided here. Other social media links are usually the URLs of the platform pages.

If you have created in the backgroundCustom parameterfor example, a namedcustomerServicePhonecustomer service phone number, you can also call it using its parameter name:

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

Actual application example

Combine the above contact methods, you can create a complete contact information area in the website footer 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>

BycontactThe flexible use of tags, AnQiCMS makes it easy to manage and display website contact information, whether it is a regular field or custom content, it can be called in a unified way, which greatly improves the maintenance efficiency and scalability of the website.

Frequently Asked Questions (FAQ)

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

  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 it in the template{% 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>label'ssrcIn the attribute, for example:<img src="{% contact with name="Qrcode" %}" alt="微信二维码">At the same time, it is recommended to add a blank image tag on the page to avoid the situation where the background has not set a QR code.if