Display contact information clearly at the bottom of the website, which is crucial for improving user experience and building trust.AnQiCMS as an efficient content management system, fully considers this point, and provides an intuitive and flexible way to manage and display this key information, such as phone numbers and email addresses.

One, AnQiCMS backend contact settings and management

On the AnQiCMS admin interface, you can easily find and configure the website's contact information.These settings are located under the "Background Settings" menu, select "Contact Information Settings" to enter the editing page.Here not only provides common contact information fields such as contact name, phone number, contact address and contact email, but also allows you to add custom contact methods according to your actual business needs.

For example, if you need to display the company's WhatsApp account or the link to the Facebook homepage, you can add it here as a custom parameter, enter the corresponding name and value.This flexibility ensures that both traditional and social media contact methods can be managed and maintained in the same place, greatly simplifying the process of updating information.

Two, Call contact information in the website template

AnQiCMS's template engine is designed to be simple and efficient, with a syntax structure similar to Django templates, making it very convenient to display backend-configured data on the website's front end. The key to displaying the contact information set in the backend at the bottom of the website (usually in the footer area) is to use the built-incontact.

contactthe basic usage of tags is{% contact 变量名称 with name="字段名称" %}. Among them,nameThe parameter is used to specify the specific contact information type you want to call.

We take the phone number and email address of the called website as an example. Suppose you want to display these two pieces of information in the footer, you can add the following code to the footer template file of your website (usuallypartial/footer.htmlOr the main template file that includes the footer content).

<div class="footer-contact">
    <p>联系电话：{% contact with name="Cellphone" %}</p>
    <p>电子邮件：{% contact with name="Email" %}</p>
</div>

If you want to store this information in template variables for further logic processing or style binding, you can also do this:

{% contact websitePhone with name="Cellphone" %}
{% contact websiteEmail with name="Email" %}

<div class="footer-contact">
    <p>联系电话：{{ websitePhone }}</p>
    <p>电子邮件：{{ websiteEmail }}</p>
</div>

In addition to the phone and email, you can also call other predefined fields set in the background, such asAddress(Contact address),Wechat(WeChat ID) orQrcode(WeChat QR code). If you have customized the contact information parameter in the background before, such as "WhatsApp", you can use it as well{% contact with name="WhatsApp" %}to call its value. Just make surenameThe value of the parameter should be consistent with the parameter name you set in the background.

Section 3: Practical Operations and Precautions

The specific steps to display the contact information at the bottom of the website are as follows:

  1. Set contact information in the background:Log in to the AnQiCMS backend, navigate to "Backend Settings" -> "Contact Information Settings", fill in or update your phone number, email, address information, and save the changes.If needed, add any custom contact information.
  2. Locate the footer template file:Enter the "Template Design" area, find the template folder currently used by your website. According to the template structure, the footer code of the website usually exists inpartial/footer.html/bash.html(If the footer is a general part) or in some main HTML file under the root directory of the theme folder. If you are not sure which file it is, you can checkbash.htmlwhether it passesincludeThe label includes other files.
  3. Insert the call code:In the footer template file found, paste the aforementioned:contactLabel code snippet at the location where you want to display contact information.
  4. Save and update the cache:Save the template file you have modified. Then go back to the AnQiCMS background, click the 'Update Cache' feature at the bottom of the left navigation bar to ensure that the latest template content can be loaded on the website front end.
  5. Front-end preview:Refresh your website's front page and check if the contact information at the bottom is displayed correctly.

Points to note:

  • Template file encoding:When editing HTML template files, please ensure that the file encoding is UTF-8 to avoid Chinese character garbled issues.
  • Field name accuracy:Invokecontacttags in the template,nameThe value must match the field name in the background "Contact Settings" (including the "Parameter Name" of custom fields), pay attention to the case.
  • Cache cleanup:After modifying the template file or backend settings, it is a good habit to clear the cache, which ensures that the latest changes take effect immediately.

By following these steps, you can easily display the contact information set in the background of the AnQiCMS website at the bottom, providing visitors with a convenient communication channel.

Frequently Asked Questions (FAQ)

  1. Why didn't the website front-end update immediately after I updated the phone number or email address in the background?Answer: After modifying the content or settings in the AnQiCMS background, the system will use caching to improve website access speed.You usually need to manually clear the cache to see the latest changes on the front end.You can find the "Update Cache" feature on the AnQiCMS backend (usually at the bottom of the left navigation bar), click to execute it.

  2. Besides phone and email, I can also usecontactLabel which contact information to call?Answer: BesidesCellphone(Phone) andEmail(Email), you can also callAddress(Contact address),Wechat(WeChat ID),Qrcode(WeChat QR code image URL) and preset fields. More flexible is that if you add custom parameters in the "Contact Information Settings" backend (for example, parameter name isWhatsAppYou can also use{% contact with name="WhatsApp" %}to call its corresponding value.

  3. Ask: How can I make the phone number in the call clickable or make the email clickable to send an email link?Answer: You can combine HTML's<a>Tags andtel:ormailto:protocol to implement. For example:

    {% contact phoneNum with name="Cellphone" %}
{% contact emailAddr with name="Email" %}
<p>电话: <a href="tel:{{ phoneNum }}">{{ phoneNum }}</a></p>
<p>邮箱: <a href="mailto:{{ emailAddr }}">{{ emailAddr }}</a></p>

    In this way, when visitors click on a phone number or email, they can directly make a call or send an email.