How to call the contact phone number set in the AnQiCMS backend to the front page?

As an experienced website operations expert, I am well aware that the accuracy of website information and the convenience of front-end display are crucial to user experience and operational efficiency.AnQiCMS (AnQiCMS) provides a very friendly solution in this regard, especially for the management and retrieval of core information such as company contact details.Today, let's delve into how to accurately and efficiently present the carefully set phone number on your AnQiCMS backend on the website's front page.

Understanding the contact information management of AnQiCMS

In the daily operation of the website, contact information is an important bridge connecting you with customers.Whether it is consultation, cooperation, or after-sales service, a clear and easy-to-contact phone number can greatly enhance the customer's trust and conversion rate.The Aqie CMS fully considers this point and provides a centralized management function for website contact information in the background.

You can navigate to the backend of Anqi CMS and go to theBackend settingssection, then find theContact information settings”option.”}]On this page, you will see a series of preset fields such as 'Contact person', 'Phone number', 'Contact address', 'Contact email', and so on.These fields are intended to help you unify the management of various contact information on the website.Among them, the 'contact number' is the focus we are paying attention to today.Please enter your contact phone number here, AnQiCMS will safely store it and wait for the call from the front page.

This centralized management model greatly simplifies website maintenance work.When your contact phone number needs to be updated, you only need to modify it once in the background, and all front-end pages that call this field will be synchronized updated, avoiding the麻烦的手动查找和修改, greatly improving operational efficiency.

Core: How to display the contact phone number on the front page

Display the contact phone number set in the background on the front page, mainly depending on the powerful and easy-to-use AnQiCMSTemplate tag system. AnQiCMS uses a syntax similar to the Django template engine, making content calls intuitive and efficient.

For contact information and other global configuration information, AnQiCMS provides a special template tag -contactThis tag was designed to conveniently access the various data items in the background "Contact Information Settings".

To dial the contact phone number, you need to usecontacttags, and cooperatenameSpecify the specific field you want to retrieve. According to the Anqi CMS document, the background "Contact Phone" field corresponds tonameThe parameter value isCellphone.

Therefore, the most basic calling method is:

{% contact with name="Cellphone" %}

When AnQiCMS parses this code, it automatically retrieves the value of the "Contact Phone" field from the "Contact Information Settings" backend and outputs it directly to the page.

In order to better manage and utilize this phone number, we usually assign it to a variable and then display it with HTML tags.The benefit of doing this is that you can reuse the variable in multiple places in the template, or you can perform additional processing, such as turning it into a clickable dialing link.

For example, you can do it like this:

{% contact phoneNumber with name="Cellphone" %}
电话：{{ phoneNumber }}

This code first uses{% contact ... with name="Cellphone" %}Assign the value of the contact phone to a variable namedphoneNumberThen, through{{ phoneNumber }}Output this phone number to the page.

Further, in order for users to be able to directly dial phone numbers by clicking on them (especially on mobile devices), we can make use of HTML'stel:protocol:

{% contact phoneNumber with name="Cellphone" %}
<a href="tel:{{ phoneNumber }}">{{ phoneNumber }}</a>

This way, when a user asks your website on their phone, clicking this phone number can directly start the dialing function, greatly enhancing the user experience.

Moreover, if you have enabled the AnQiCMS multi-site management feature and need to call the contact phone number of other sites,contactLabels also providedsiteIdParameters. But for a single-site situation, it is usually unnecessary to fill in this parameter, the system will default to getting the settings of the current site.

Practical Exercise: Step-by-step Operation

Now, let's complete the display of the contact phone number on the front desk step by step:

1. Log in to the Anqi CMS backend and set the contact phone number:

   • First, log in to the AnQi CMS backend management interface with your administrator account.
   • Find and click on the item in the left navigation bar.Backend settings.
   • Select the item in the expanded submenu.Contact information settings.
   • Find the item “Contact phone numberPlease enter your company or personal contact number in this field.
   • Click the "Save" button at the bottom of the page to ensure your changes have taken effect.

2. Enter the template editing interface:

   • Return to the left navigation bar, click "template design.
   • Select "Template management" to enter the template file list.
   • According to your website layout and requirements, find the template file you want to display the phone number. For example, if the phone number is usually displayed at the top or bottom of the website, you may need to editheader.html/footer.htmlorbash.html(Public code file). If it is the "Contact Us" page, it may bepage/detail.htmlor a custom page template you created.

3. Insert the tag in the template file:

   • Click the selected template file to enter code editing mode.
   • Insert the template tag we discussed earlier at the location where you want the phone number to appear.
   • For example, to display a clickable phone number at the bottom of the page:

     
     <!-- 假设这是您的footer.html文件 -->
     <footer>
         <p>联系我们：{% contact telNum with name="Cellphone" %}<a href="tel:{{ telNum }}">{{ telNum }}</a></p>
         <!-- 其他页脚内容 -->
     </footer>
     

4. Save and update the cache:

   • After completing the template code modifications, be sure to click the "Save" button on the editing interface.
   • To ensure that the front-end page can immediately reflect your changes, please return to the Anqi CMS backend homepage or click on the left-hand navigation bar, click theUpdate CacheButton, clear the website cache. This step is very important, as it allows the system to reload the latest templates and data.

5. Front-end page validation:

   • Open your website's frontend page, refresh the browser.
   • Check the location where you inserted the phone number, confirm that the phone number is displayed correctly, and whether it can trigger the dialing function after clicking.

Summary

By following these steps, you will find that AnQi CMS is very intuitive and efficient in handling such common information calls.Benefiting from its flexible template tag system, you can easily display the contact information and other configurations from the backend accurately at any corner of the website, while ensuring consistency and maintainability of the data.This is undoubtedly a tool to improve website operation efficiency and optimize user experience.

I encourage you to try other template tags provided by AnQiCMS, such as calling company address, email, website logo, etc., their usage is similar tocontactThe tag has the same effect, bringing great convenience to your website management.

---

Frequently Asked Questions (FAQ)

1. I followed the steps, but the front page still does not display the phone number, or displays the wrong number, why is that?

First, please check a few places carefully:

• Have the background settings been saved correctly?Ensure that the phone number entered in the 'Background Settings' -> 'Contact Settings' is correct, and click the 'Save' button.
• Is the template tag spelled correctly?Confirm that you have inserted in the template file{% contact phoneNumber with name="Cellphone" %}The tag has no spelling errors, especiallyname="Cellphone"Part. Case sensitive, please make sure to keep it consistent.
• Did you update the cache?After modifying the template or backend settings, be sure to click the 'Update Cache' button on the backend to clear old cache data and reload the latest content on the website.
• Check browser cache:Sometimes browsers also cache page content, try clearing the browser cache or access the website in incognito mode.

How can I make the front desk phone number directly clickable and callable?

You can use HTML's<a>Tags andtel:protocol to implement this feature.tel:The protocol allows users to directly initiate the device's dialing function when clicking on a link.

You can write it like this in your template file:

{% contact phoneNumber with name="Cellphone" %}
<a href="tel:{{ phoneNumber }}">{{ phoneNumber }}</a>

This will convert{{ phoneNumber }}into a clickable and callable phone link.

3. Can I also contact you through other means of communication (such as email, address) instead of the phone number?

Of course! It's the Anqi CMS.contactThe tag supports calling all fields configured in the "Background Settings" to "Contact Settings", as well as your custom contact parameters. You just need tonameThe value should be replaced with the corresponding field name.

For example:

• Contact email:{% contact emailAddress with name="Email" %}
• Contact address:{% contact companyAddress with name="Address" %}
• WeChat ID:{% contact wechatId with name="Wechat" %}
• If you have customized a 'WhatsApp' field in the background, the calling method might be:{% contact whatsappNumber with name="WhatsApp" %}

The core idea is to find the correspondingnameparameter value, and then{% contact ... with name="对应值" %}use it in.