How to display the contact information set in the website backend on the front page of AnQi CMS?

When using Anqi CMS to build a website, displaying the contact information set in the background to the front-end of the website is a key step to improving user experience and building trust.Aqit CMS provides a very intuitive and flexible way, even without a strong technical background, it can be easily implemented.

Configure the contact information in the website backend

Firstly, you need to configure the contact information in the Anqi CMS backend management interface.Generally, you can find the 'Backend Settings' in the left navigation bar, and clicking on it will show the 'Contact Information Settings' option.

Enter this interface, you will see some preset contact information fields, such as "contact personThese fields cover the most commonly used contact methods on corporate or personal websites, just fill in your information in the corresponding input boxes.For example, you can enter the company's customer service phone number in the 'Contact Phone' field, and the consultation email address in the 'Contact Email' field.

In addition to these default fields, Anqi CMS also allows custom contact information to be added based on specific needs.For example, if you want to display WhatsApp contact information or a link to a social media homepage on your website, you can find the custom parameter settings at the bottom of the page.Click to add a new setting item, you need to fill in three parts: "Parameter name", "Parameter value", and "Note".The parameter name is the unique identifier used when calling the template in the future, it is recommended to use English or pinyin, for example, “WhatsApp”.The parameter value is the specific content of the contact information, such as your WhatsApp number.Note" is used to describe the purpose of the parameter, convenient for future management.

After completing the entry and customization of all contact information, remember to click Save to ensure that your settings take effect.

Call contact information in the website front-end template.

After completing the background configuration, the next step is to call this information in the template files of the website front end. Anqi CMS provides a special template tag for this:contact.

ThiscontactThe usage of tags is very concise and clear. Its basic syntax is{% contact 变量名称 with name="字段名称" %}. Among them,变量名称Optional, if set, it can be used to further process the data; if not set, the tag will directly output the value of the corresponding field.字段名称It is the parameter name corresponding to the parameter in the background settings, for example, the parameter name corresponding to 'Phone number' isCellphone，“Email contact” corresponds to the parameter name isEmail.

Let's look at some specific call examples:

To display the contact phone number, you can write it like this in the template:

<p>联系电话：{% contact with name="Cellphone" %}</p>

If you want the phone number to be clickable and dialable, you can combine it with HTML'stel:protocol:

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

It's similar to display the contact email:

<p>电子邮件：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>

For image information like WeChat QR codes, since the tag directly outputs the image URL, it usually needs to be combined with<img>Label to display. In addition, to prevent HTML content from being escaped, it is usually used with|safeThe filter is used:

<div class="wechat-qr">
    {% contact qrcode_url with name="Qrcode" %}
    {% if qrcode_url %}
        <img src="{{ qrcode_url|safe }}" alt="微信二维码" width="120" height="120">
    {% endif %}
</div>

Here we define a variableqrcode_urlStore the link of the QR code image, then check if it exists, and then insert it into<img>label'ssrcthe attribute.

For the custom contact information you add in the background, such as the WhatsApp mentioned earlier, the calling method is similar, just make surenameThe parameter matches the parameter name you have set:

<p>WhatsApp：{% contact with name="WhatsApp" %}</p>

By these flexible calling methods, you can place contact information on the website's header, footer, contact us page, or any place where it needs to be displayed, ensuring that visitors can easily and quickly contact you.

Summary

AnQi CMS through its intuitive backend configuration and powerful template tags greatly simplifies the management and display of website contact information.Whether it is the commonly used fields provided by default or the unique contact methods customized according to business needs, they can be efficiently and flexibly presented on the website front-end, helping you better communicate with users and improve the practicality and user experience of the website.

Frequently Asked Questions (FAQ)

1. Q: Why did the front-end page not update immediately after I modified the contact information in the background?A: This is likely due to system caching.The AnQi CMS aims to improve website access speed by caching page content.You can find the 'Update Cache' option in the left navigation bar of the background management interface, click to clean, usually you can see the latest content.

2. Q: I added custom contact information, but it does not display in the template or shows an error. How should I troubleshoot?A: Please carefully check the following points:

   • Is the parameter name consistent:Make sure you use in the template tag{% contact with name="字段名称" %}。“字段名称It should be exactly the same as the parameter name you entered when customizing parameters in the background “Contact Information Settings”, including case sensitivity。“
   • Whether to save:After confirming the addition or modification of contact information in the background, the save button has been clicked.
   • Clear the cache:Similarly, the update of custom fields may also be affected by the cache, try clearing the cache.

3. Q: Can contact label be used to determine if a contact exists besides directly displaying text?A: Okay. You can first assign the value of the contact information to a variable, and then use the template's conditional judgment (iflabel) to check if the variable is empty. For example:

   {% contact phone_num with name="Cellphone" %}
   {% if phone_num %}
       <p>联系电话：{{ phone_num }}</p>
   {% else %}
       <p>暂无联系电话</p>
   {% endif %}
   

   Such, only when the background has set the phone number, will the phone information be displayed.