In website operation, clearly and conveniently displaying the website's contact phone number and address is a key step in building user trust and promoting communication and exchange.For friends using AnQiCMS, the system provides a very flexible and intuitive way to manage and display these important contact information.This article will introduce how to display the contact phone number and address of the website on the AnQiCMS front-end page.

Step 1: Enter the contact information in the AnQiCMS background

Firstly, we need to ensure that the contact information of the website is correctly entered in the background. This is the basis for displaying this information on the front end.

Please log in to the AnQiCMS backend management interface, find the "" in the left navigation barBackend settingsContact information settings" page.

In this page, you will see a series of preset fields, such as “Contact”, “Phone NumberContact AddressContact email, WeChat ID, and WeChat QR code, etc.This is the most commonly used contact information on the website, you just need to fill in the actual information of your website or company in the corresponding input box.

If your website has special requirements, such as in addition to the regular phone number, you also need to display WhatsApp contact information, or other custom contact information, the "Contact Information Settings" page of AnQiCMS also supports adding custom parameters. You can add custom parameters at the bottom of the page.Customize settings parametersRegion, click to add a new parameter.For example, you can add a parameter named "WhatsApp", and enter your WhatsApp number in the parameter value.WhatsApp).

Complete information entry and remember to click the "Save" button at the bottom of the page to ensure all changes take effect.

Step 2: Display contact information in the front-end template file.

When the background data is ready, the next step is to display this information on the frontend page of the website. AnQiCMS's template system uses syntax similar to Django, with a powerful tag specifically for retrieving contact information.contact.

ThiscontactThe usage of the label is very direct, through specifyingnamethe parameter, you can obtain the corresponding field value you entered in the "Contact Information Settings" on the backend.

Display contact phone number

To display the contact number on the website page, you can use the following code in the template file:

{% contact with name='Cellphone' %}

This code will directly output the value you entered in the "Contact Phone" field on the backend.To enhance the user experience, especially for mobile users, we usually make the phone number clickable as a link.

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

Here are thehref="tel:..."is a standard HTML attribute that allows mobile device users to directly click to make a phone call,rel="nofollow"it is recommended that search engines do not track this link, which is usually a **practice of SEO.

Display contact address

Displaying the contact address is also simple. You just need to use it in the template.name='Address'the parameters:

地址：{% contact with name='Address' %}

Invoke custom parameters

If you have set custom parameters in the background, such as the ones mentioned earlier.WhatsAppIt can also be used,contactLabel it to call. To handle it more rigorously, you can assign it to a variable first, and then judge whether it exists before deciding whether to display it:

{# 假设您在后台自定义了参数名为 'WhatsApp' #}
{% contact whatsappNumber with name='WhatsApp' %}
{% if whatsappNumber %}
<p>WhatsApp：{{ whatsappNumber }}</p>
{% endif %}

In this way, only whenWhatsAppThe front-end page will display the corresponding content only when the parameter has a value in the background.

Where should it be placed in the template?

You usually place these contact information in the public part of the website, for example:

  • Header: Inbash.htmlIf your template has this file, it usually contains the common header of the website) or other header template files, allowing visitors to quickly find contact information on any page.
  • Footer（页脚）This is displayed at the bottom of the website, which is the most common practice. Similarly,bash.htmladd it in the footer template file or
  • contact us：If you create a dedicated "Contact Us" page (created under "Page Resources" -> "Page Management"), you can edit the content template on that page (for examplepage/detail.htmlor a custom onepage/contact-us.htmlIn the [auto], all contact methods are displayed in detail.

A complete example code snippet may look like this, you can adjust it according to your template structure:

{# 假设这是你网站页脚或侧边栏的一部分 #}
<div class="site-footer-contact">
    <h3>联系我们</h3>
    <p>电话：<a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">{% contact with name='Cellphone' %}</a></p>
    <p>邮箱：<a href="mailto:{% contact with name='Email' %}" rel="nofollow">{% contact with name='Email' %}</a></p>
    <p>地址：{% contact with name='Address' %}</p>
    {% contact wechat with name='Wechat' %}
    {% if wechat %}
    <p>微信：{{ wechat }}</p>
    {% endif %}
    {% contact whatsappNumber with name='WhatsApp' %}
    {% if whatsappNumber %}
    <p>WhatsApp：{{ whatsappNumber }}</p>
    {% endif %}
</div>

Tips

  • Encoding of the template filePlease ensure that your template file uses UTF-8 encoding, otherwise it may cause the page to display garbled characters.
  • Style AdjustmentEnglish: The above code is only responsible for outputting content, and the specific appearance style (font, color, layout, etc.) needs to be adjusted through CSS to maintain consistency with the overall design style of your website.
  • Multi-site managementIf you have used the multi-site feature of AnQiCMS and want to call the contact information of a specific site (instead of the current site),contactTags also supportsiteIdParameters to specify the site ID, for example{% contact with name='Cellphone' siteId='2' %}.

Through AnQiCMS's flexible backend settings and powerful template tags, displaying the contact phone number and address of the website becomes a breeze.Hope this article can help you better utilize AnQiCMS, improve the user experience and business conversion of the website.

Common Questions (FAQ)

1. Why is the contact information I set in the background not displayed on the front-end page?

There are usually several reasons:

  • The template file has not added the corresponding call codePlease check the template file (such as footer or contact us page) you want to display contact information, whether it has been used in the way described in this article{% contact ... %}tags to call.
  • Background settings not savedAre you sure you clicked the "Save" button after filling out the information on the "Contact Information Settings" page?
  • Cache issuesIn some cases, the system cache of the browser or AnQiCMS may cause the update to not be displayed in time.Try to clear the browser cache, or click the "Update Cache" feature in the AnQiCMS background.

2. I want to display different contact numbers on different pages, can AnQiCMS achieve this?