How to retrieve and display the contact, phone number, address, and other information configured in the background?

It is crucial to clearly display a company's contact information in website operations to establish customer trust and promote communication.Whether it is the contact name, phone number, office address, or social media account, this information needs to be easily accessible to users in a prominent position on the website.Aqie CMS provides a convenient solution for this, allowing you to flexibly manage and display this key information without writing complex code.

Configure your contact information in the background

The AnqiCMS backend design is aimed at making it easy for you to manage your website content, including your contact information.To configure this information, you can log in to the background management interface, find the "Contact Information Settings" option under the "Background Settings" menu.Here, you will see a series of preset fields, such as "Contact Person", "Contact Phone", "Contact Address", "Contact Email", as well as "WeChat ID" and "WeChat QR Code".You just need to fill in your information in the corresponding input box.

It is worth mentioning that if the preset fields cannot meet your business needs, AnQi CMS also provides a "custom parameter setting" function.You can add custom fields as needed, such as WhatsApp account, Facebook homepage link.These custom field names can be freely set, and the system will automatically convert letters to camel case for easy calling in the front-end template.Fill in the "Parameter name" and "Parameter value", and add a "remark" for future identification, and your custom contact information is set up.

Retrieve and display contact information in the template

After configuring the contact information, the next step is to display them on the website front-end. Anqi CMS provides a special template tag for obtaining contact information—contact. This label is very intuitive and easy to use.

Basic usage is like this:{% contact 变量名称 with name="字段名称" %}

The "field name" is the name of the items you fill in the "Contact Information Settings" backend (such asUserName/Cellphone/AddressWait). If you do not specify a 'variable name', the label will directly output the value of the field. If you specify a 'variable name', for example{% contact myPhone with name="Cellphone" %}, then you can use it in subsequent code.{{myPhone}}to refer to this value

Here are some common ways to obtain fields:

• Contact name: <span>联系人：{% contact with name="UserName" %}</span>
• Contact Phone: <span>联系电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></span>
• Contact address: <span>联系地址：{% contact with name="Address" %}</span>
• Contact Email: <span>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span>
• WeChat account: <span>微信号：{% contact with name="Wechat" %}</span>
• WeChat QR Code: <span><img src="{% contact with name="Qrcode" %}" alt="微信二维码" /></span>Please note that when obtaining image URLs, such as WeChat QR codes, they are often embedded.<img>label'ssrcthe attribute.

For the custom contact information you add in the background, for example, if you create a custom parameter named "WhatsApp", you can also get its value bycontactusing the tag:<span>WhatsApp：{% contact contactWhatsApp with name="WhatsApp" %}{{contactWhatsApp}}</span>In the above example, we first assigncontactthe value obtained from thecontactWhatsApplabel to a variable, and then output. If a custom field may not have content, you can also use conditional judgment in conjunction with it{% if contactWhatsApp %}Avoid displaying empty content.

Flexible application to all corners of the website.

In a website, contact information is usually found in the footer, "Contact Us" page, or sidebar, etc. To avoid writing the same code on each page, you can fully utilize the Anqi CMS template'sincludeFeature.

You can create a name calledpartial/footer.htmlThe file, place all contact information related template code in it. For example:

<div class="contact-info-block">
    <p>联系人：{% contact with name="UserName" %}</p>
    <p>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
    <p>地址：{% contact with name="Address" %}</p>
    <p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
    <p>微信：{% contact with name="Wechat" %}</p>
    {% set qrcodeUrl = "" %}
    {% contact qrcodeUrl with name="Qrcode" %}
    {% if qrcodeUrl %}
        <div>
            <img src="{{qrcodeUrl}}" alt="微信二维码" />
        </div>
    {% endif %}
    {% set whatsapp = "" %}
    {% contact whatsapp with name="WhatsApp" %}
    {% if whatsapp %}
        <p>WhatsApp：{{whatsapp}}</p>
    {% endif %}
</div>

Then in your main template file (such asbase.htmlorindex.html), simply include this section:{% include "partial/footer.html" %}

This way, when you need to update contact information, you just need to modify it in the background, and the front-end page will automatically update without changing any template code, greatly improving operational efficiency.

For users with multiple site needs