Clearly display contact information 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.

一、AnQiCMS 后台联系方式的设置与管理

In the AnQiCMS backend management interface, you can easily find and configure the contact information of the website.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 actual business needs.

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

二、在网站模板中调用联系方式

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 configuration data on the website front-end. The core of displaying the contact information set in the backend at the bottom of the website (usually the footer area) is to use the built-incontactLabel.

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

We take the contact phone number and email address of the website as an example. Suppose you want to display these two pieces of information in the footer of the page, you can add the following code to the footer template file of your website (usuallypartial/footer.htmlor the main template file containing 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 logical 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 phone and email, you can also call other predefined fields from the backend settings, such asAddress(Contact address),Wechat(WeChat ID) orQrcode（WeChat QR code）。If you have customized the contact information parameters in the background before, such as “WhatsApp”, you can also use it. Just make sure{% contact with name="WhatsApp" %}to call its value. Just make surenameThe value of the parameter should be exactly the same as the 'parameter name' you set in the background.

Section 3: Practical Operation 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 admin panel, navigate to “Admin Settings” -> “Contact Information Settings”, fill in or update your phone number, email, address and other information, and save the changes.If necessary, add any custom contact information.
  2. Locate the footer template file:Enter the "Template Design" area, find the template folder currently in use by your website. According to the template structure, the footer code of the website is usually located inpartial/footer.html/bash.htmlIf the footer is a common part) or some main HTML file in the root directory of the theme folder. If you are not sure which file it is, you can checkbash.htmlwhether it is throughincludeThe label includes other files.
  3. Insert the call code:In the footer template file found, paste the above mentionedcontactlabel code snippet at the position where you want to display contact information.
  4. Save and update the cache:Save the template file with your modifications.Then go back to the AnQiCMS background, click the "Update Cache" feature at the bottom of the left navigation bar to ensure that the website front-end can load the latest template content.
  5. Front-end preview:Refresh your website's front-end 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 garbling issues.
  • Field name accuracy:Invokecontactthen,nameThe value of the parameter must match the corresponding field name in the "Contact Information Settings" on the backend (including the "Parameter Name" of custom fields), pay attention to the case.
  • Cache cleaning:Each time you modify 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.

Common Questions (FAQ)

  1. 问：I have updated the phone number or email address on the backend, but the website front-end did not update immediately. Why is that?答：In AnQiCMS background, after modifying content or settings, the system will use cache to improve website access speed.It usually requires manual clearing of the cache to see the latest changes on the front end.You can find the 'Update Cache' feature (usually at the bottom of the left navigation bar) on the AnQiCMS backend, and click to execute.

  2. 问：In addition to the phone and email, I can also go throughcontactWhat contact information is called by the tag?Answer: In addition toCellphone(Phone)Email(Email), you can also callAddress(Contact address),Wechat(WeChat ID),Qrcode（WeChat QR code image URL）and other preset fields. More flexible is, if you add custom parameters in the "Contact Information Settings" backend (for example, parameter name isWhatsApp），you can also use{% contact with name="WhatsApp" %}to call its corresponding value.

  3. 问：How can I make the called phone number clickable as a dialing link, or make the email clickable as a sending email link?答：You can combine HTML's<a>Tags andtel:ormailto: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 the phone number or email address, they can make a direct call or send an email.