In website operation, clearly and conveniently displaying the website's contact phone number and address is a crucial 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 this important contact information.This article will introduce in detail 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 backend

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 admin interface, find it in the left navigation bar,Backend settingsthen click to enter theContact information settingspage.

On this page, you will see a series of preset fields, such as "contact",Contact phone numberHello WorldContact 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 your actual website or company information in the corresponding input box.

If your website has special requirements, such as displaying WhatsApp contact information in addition to the regular phone number, or other custom contact information, the "Contact Settings" page of AnQiCMS also supports adding custom parameters. You can add custom parameters at the bottom of the page.Custom settings parametersIn the area, click to add a new parameter. For example, you can add a parameter named "WhatsApp" and enter your WhatsApp number in the parameter value.The system will automatically convert parameter names to camel case when calling templates (i.e., each word is capitalized, such asWhatsApp)

After completing the information entry, 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 frontend template file.

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

ThiscontactThe way to use the label is very direct, by specifyingnamethe parameter, you can obtain the corresponding field value you entered in the background "Contact Information Settings".

Display contact phone number

To display the contact phone 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 in the background.To enhance the user experience, especially for mobile users, we usually make the phone number clickable and dialable.You can implement it like this:

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

Herehref="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 not track this link, which is usually a practice of SEO.

Display contact address

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

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

Invoke custom parameters

If you have set custom parameters in the background, such as the ones mentioned earlier,WhatsAppyou can also use them.contactLabel to call. To handle it more strictly, you can first assign it to a variable and check if 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 whenWhatsAppWhen there is a value in the background, the front-end page will display the corresponding content.

Where should it be placed in the template?

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

  • HeaderInbash.html(If 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.
  • FooterAt the bottom of the website, this is the most common practice. It is also added inbash.htmlor a dedicated footer template file.
  • the "Contact Us" pageIf you create a dedicated "Contact Us" page (created under "Page Resources" > "Page Management"), you can use the content template on that page (for example,page/detail.htmlor customizedpage/contact-us.htmlIn this section, detail all contact methods.

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>

Tip

  • Template file encodingEnsure that your template file uses UTF-8 encoding, otherwise it may cause the page to display garbled characters.
  • Style adjustmentThe above code is 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 supportsiteIdparameter to specify the site ID, for example{% contact with name='Cellphone' siteId='2' %}.

Easily display the website's contact number and address through AnQiCMS's flexible backend settings and powerful template tags.Hope this article can help you better utilize AnQiCMS and improve the user experience and business conversion of your website.

Frequently Asked Questions (FAQ)

1. Why did I set the contact information in the background, but it did not display on the front-end page?

There are usually several reasons:

  • The template file did not add the corresponding call codePlease check the template file (such as the 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.
  • The background settings have not been saved: Did you click the 'Save' button after filling out the information on the 'Contact Information Settings' page.
  • Cache issueIn some cases, the browser or AnQiCMS system cache may cause updates to not be displayed in time.Try clearing the browser cache or click the "Update Cache" feature in the AnQiCMS backend.

2. I want to display different contact numbers on different pages, can AnQiCMS do that?