How to call and display the contact information (such as phone, email, social media) configured in the AnQiCMS template?

As a senior content worker who deeply understands the operation of Anqing CMS, I am well aware of the importance of showing contact information to the outside world.This is not only about whether the customer can contact you conveniently, but also the foundation for building trust and promoting business cooperation.AnQi CMS provides a straightforward and flexible solution for website operators, allowing you to easily manage and display various contact information without writing complex code.

Below, I will elaborate on how to call and display the contact information configured in the AnQiCMS template, including phone numbers, email addresses, and various social media links, to help you efficiently build an informative website.

Configure your contact information: Back-end operation guide

On this interface, you will find a series of preset fields, such as "contact personThese are the commonly used and essential contact information for corporate websites.You just need to fill in your actual information in the corresponding input box.

In addition to these standard fields, Anqi CMS also provides powerful custom functions.If you need to display links to specific social media platforms such as WhatsApp, Facebook, Twitter, Instagram, LinkedIn, or YouTube, or any other custom business-related contact information, you can click on 'Customize settings parameters' to add them.WhatsApp), and the corresponding "parameter value" (i.e., the contact information or link you want to display), and you can optionally add a "note" for future management.

After completing all contact information entry and customization, please be sure to click Save to ensure that your changes take effect in the system. These configurations will become the data source for the front-end template calls.

Use contact information called in the template:contactTag

The AnQi CMS template system uses a syntax similar to the Django template engine, allowing front-end developers to retrieve data configured in the background through simple tags. To call and display contact information, we will mainly usecontact.

contactThe basic method of using the tag is{% contact 变量名称 with name="字段名称" %}.The "field name" parameter is crucial, as it corresponds to the names of each field you fill in the "Contact Information Settings" backend (including preset fields and custom fields).If you do not specify the variable name, the label will directly output the field value.

For example, to display your contact phone number, you can write it in the template like this:

<li>电话：{% contact with name="Cellphone" %}</li>

If you want to assign the phone number to a variable for further processing, you can do it like this:

{% contact phoneNumber with name="Cellphone" %}
<li>联系电话：<a href="tel:{{ phoneNumber }}">{{ phoneNumber }}</a></li>

Here we also used HTML'stel:protocol, convenient for mobile device users to directly click and dial.

Display various contact information examples

Here are some specific code examples demonstrating how to call and display different types of contact methods, whether it be phone, email, or various social media platforms.

Core contact information

Displaying contact information, phone number, address, and email is one of the most common needs on a website.

<address>
    <ul>
        <li>联系人：{% contact with name="UserName" %}</li>
        <li>联系电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></li>
        <li>联系地址：{% contact with name="Address" %}</li>
        <li>联系邮箱：<a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></li>
    </ul>
</address>

Social media and instant messaging

For WeChat, QQ, or international social media platforms, you can also access them throughcontacttag to call:

<div class="social-media">
    <p>关注我们：</p>
    <ul>
        <li>微信：{% contact with name="Wechat" %} <img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 100px;"></li>
        <li>QQ：<a href="tencent://message/?uin={% contact with name="QQ" %}&Site=安企CMS&Menu=yes" rel="nofollow">{% contact with name="QQ" %}</a></li>
        <li>WhatsApp：<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank" rel="nofollow">{% contact with name="WhatsApp" %}</a></li>
        <li>Facebook：<a href="{% contact with name="Facebook" %}" target="_blank" rel="nofollow">Facebook</a></li>
        <li>Twitter：<a href="{% contact with name="Twitter" %}" target="_blank" rel="nofollow">Twitter</a></li>
        <li>LinkedIn：<a href="{% contact with name="Linkedin" %}" target="_blank" rel="nofollow">LinkedIn</a></li>
        <li>Instagram：<a href="{% contact with name="Instagram" %}" target="_blank" rel="nofollow">Instagram</a></li>
        <li>YouTube：<a href="{% contact with name="Youtube" %}" target="_blank" rel="nofollow">YouTube</a></li>
    </ul>
</div>

Please note that for instant messaging tools like QQ and WhatsApp, links usually require specific protocols or URL structures to enable direct redirection. The example code above has considered these situations and addedrel="nofollow"Attribute, this helps indicate to search engines not to track these external links, which is a common SEO practice.

Call custom field

If you have customized it in the backgroundCustomerServiceHotline(Customer service hotline) This field, then it is as simple to call it in the template as to call a preset field:

<li>客户服务热线：{% contact with name="CustomerServiceHotline" %}</li>

Call data for the specified site in a multi-site environment

AnQi CMS supports multi-site management, which means that a system can manage multiple independent websites. If you need to call other sites' contact information in a multi-site environment,contactLabels also providedsiteIdParameters are used to achieve this. Usually, you do not need to fill in manuallysiteIdBecause the system will default to obtaining the contact information of the current site. But if your needs are special, for example, to display a list of contact information of all child sites on a main site, you can specifysiteIdto complete.

{# 假设 siteId 为 2 的站点是您的分公司 #}
<li>分公司电话：{% contact with name="Cellphone" siteId="2" %}</li>

Practical recommendations and SEO considerations

When displaying contact information in a website template, it is important to ensure that the information is accurate and error-free, as well as some practical recommendations and SEO considerations are worth noting:

  • Visibility:Place important contact information (such as phone, email) in the header, footer, or a separate "Contact Us" page to ensure users can find it at any time.
  • Interactivity:Usetel:andmailto:Wait for the HTML protocol, allowing users to make phone calls or send emails directly when clicked.
  • Schema Markup (Structured Data):Consider using JSON-LD and other structured data to mark your contact information, which helps search engines better understand your business information and display richer snippets in search results, such as directly displaying the phone number in local business search results.The Anqi CMS provides custom Json-LD call tags, you can wrap your custom Json-LD code in the template.
  • Consistency:Ensure consistency of all contact information on the website, including phone numbers, addresses, and company names, which is particularly important for local SEO.

By following these steps and examples, you can flexibly and efficiently display various contact methods configured in the AnQiCMS template, providing your website visitors with clear and convenient communication channels.

Frequently Asked Questions

Q1: I added a new social media link in the background "Contact Information Settings", but it does not display when called in the template. Why is that?

A1: Please check the usage in your templatenameIs the parameter exactly consistent with the custom parameter name in the background. The template tags of Anqi CMS are case-sensitive, for example, if the parameter name you set in the background isFacebookPage, but it was written in the templatefacebookpageThis could lead to an inability to call correctly. At the same time, make sure you have saved the settings in the background, and if the website has enabled caching, try clearing the cache and viewing it again.

Q2: How can you determine if a contact method exists before displaying it to avoid showing empty contact information?

A2: You can use AnQiCMS templates.ifLogical judgment label to check if the value of the contact information exists.First, assign the contact information to a variable, and then check if the variable is empty.

{% contact whatsAppNumber with name="WhatsApp" %}
{% if whatsAppNumber %}
    <li>WhatsApp：<a href="https://wa.me/{{ whatsAppNumber }}" target="_blank" rel="nofollow">{{ whatsAppNumber }}</a></li>
{% endif %}

This will only display this item on the front end when the background has set the WhatsApp number, avoiding empty links or unnecessary text.

Q3: Is there a way to manually add social media platforms for specific countries that are not available in the contact settings of AnQi CMS?

A3: Absolutely.The 'Contact Settings' of AnQi CMS, the 'Custom Setting Parameters' feature is designed for this purpose.VkontakteorKakaoTalk)，and fill in the corresponding link or ID in the "parameter value". In the template, you can use{% contact with name="Vkontakte" %}to call and display your custom contact information.