How to call and display the contact information of the website in AnQiCMS template?

Easily call and display the website contact information in AnQiCMS templates

AnQiCMS as an efficient and flexible content management system, is committed to helping enterprises and content operation teams easily manage website content.The powerful template engine support allows web developers to display data configured on the backend on the frontend page in a straightforward manner.Today, let's delve into how to conveniently call and display the contact information of the website in AnQiCMS template, so that your visitors can contact you as soon as possible.

1. Backend configuration: Set the website contact information

In AnQiCMS, the contact information of the website is managed uniformly in the background. This greatly simplifies the process of content maintenance, as updating contact information does not require modifying the code.

You can find it in the background navigation menu“Background Settings”and then clickthe "Contact Information Settings".

This provides the main contact information fields of the website, for example:

  • Contact
  • Contact phone number
  • Contact address
  • Contact email
  • WeChat ID
  • WeChat QR code

You can fill in this information according to your actual situation. AnQiCMS also very considerately supports more social media contact methods such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube, etc.

If you have any additional needs, such as your website needing to display a Telegram contact method that is not on the default list, AnQiCMS allows you toCustom settings parameters. Just click the 'Add' button in the 'Custom Parameter Settings' area and enter a 'Parameter Name' (such asTelegramFill in the corresponding "parameter value" (such as your Telegram account or link), and add a brief note to indicate its purpose.The AnQiCMS template system will automatically convert your input parameter names to camel case (i.e., each word's first letter is capitalized, and there are no spaces in between), making it convenient to call in the template.

After completing all contact information entries and custom settings, don't forget to click save to ensure your changes take effect.

II. Front-end template: flexibly call contact information

After configuring the background information, we can easily call this data in the website template next.AnQiCMS uses a template engine syntax similar to Django, allowing you to retrieve the contact information you set in the background through specific tags.

The core template tags arecontact. Its basic usage is{% contact 变量名称 with name="字段名称" %}where "variable name" is an optional parameter, and if you set it, you can refer to the data obtained through this variable name;If not set, the label will directly output the value of the field.nameThe parameter is the specific contact method you want to call.

Next, let's look at how to call it through specific examples:

1. Call the basic contact information

Assuming you want to display contact information, email, and address in the footer of your website, you can write it like this:

<div class="contact-info">
    <p>联系电话：{% contact with name="Cellphone" %}</p>
    <p>电子邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
    <p>公司地址：{% contact with name="Address" %}</p>
</div>

In this example,{% contact with name="Cellphone" %}It will directly output the contact information you fill in the background. For email, we also use an extra<a href="mailto:...">Label it so that visitors can click to send an email directly, enhancing user experience.

2. Call social media links

AnQiCMS has built-in various social media fields. If you have filled in the Facebook homepage link in the background, you can call it like this in the template:

<div class="social-links">
    {% contact facebookLink with name="Facebook" %}
    {% if facebookLink %}
        <a href="{{ facebookLink }}" target="_blank" rel="nofollow">
            <img src="/public/static/images/facebook-icon.png" alt="Facebook">
        </a>
    {% endif %}

    {# 类似的，如果需要调用Twitter #}
    {% contact twitterLink with name="Twitter" %}
    {% if twitterLink %}
        <a href="{{ twitterLink }}" target="_blank" rel="nofollow">
            <img src="/public/static/images/twitter-icon.png" alt="Twitter">
        </a>
    {% endif %}
</div>

We used here{% contact 变量名称 with name="字段名称" %}This kind of writing with variable names, and combining{% if ... %}Logical judgment, only when the back-end has set the corresponding link, will the social media icon and link be displayed, avoiding the appearance of empty links.rel="nofollow"Properties are also commonly used for social media links, making SEO more friendly.

3. Call custom contact information

Remember the 'Telegram' custom parameter we added in the background before? It's just as simple and intuitive to call it in the template:

<div class="custom-contact">
    {% contact telegramInfo with name="Telegram" %}
    {% if telegramInfo %}
        <p>Telegram：<a href="{{ telegramInfo }}" target="_blank">点击添加Telegram</a></p>
    {% endif %}
</div>

Please note,nameThe value corresponds to the parameter name you filled in the "Custom Parameter Settings" on the backend, and it will be automatically converted to camel case. For example, the parameter name you enter in the backendTelegramUse in templatename="Telegram"to call.

4. Call WeChat QR code

If your website needs to display a WeChat QR code for visitors to scan and add, you can call it like this:

<div class="wechat-qrcode">
    {% contact qrcodeImage with name="Qrcode" %}
    {% if qrcodeImage %}
        <p>微信扫码添加：</p>
        <img src="{{ qrcodeImage }}" alt="微信二维码" style="width: 120px; height: 120px;">
    {% endif %}
</div>

Three, optimize the display effect and user experience

It may not be enough to simply call and display information; we can further optimize to make these contact methods more practical:

  • Phone numbers can be clicked:Use<a href="tel:号码">Label, allowing mobile device users to directly dial a phone call.
  • Email can be sent:Use<a href="mailto:邮箱地址">Label, convenient for users to contact directly through email clients.
  • Icon combined with text:For social media, combining small icons and text descriptions, it is both aesthetic and clear.
  • Unified layout:Consider placing all contact information in the footer, sidebar, or a separate "Contact Us" page to maintain the overall cleanliness and professionalism of the website.

Through AnQiCMS flexible template tags and backend settings, you can easily manage and display the various contact information of the website.Whether it is an embedded field or a custom parameter, it can be implemented in a few lines of simple template code, greatly improving the management efficiency and maintainability of website content.Hope this guide can help you better utilize AnQiCMS to build a more perfect and user-friendly website.

Frequently Asked Questions (FAQ)

1. Why did I follow the steps, but the contact information did not display on the front page?

This usually has several reasons. First, make sure you have filled in and clicked "Save" for the corresponding field in the "Contact Information Settings" of the AnQiCMS backend.Next, check your template code incontactlabel'snameIs the parameter exactly matching the field name you want to call (including case).Finally, the AnQiCMS system has a caching mechanism, and sometimes you may need to refresh your browser cache, or click 'Update Cache' in the background to ensure that the latest changes are loaded.

2. I would like to add other contact methods, such as Telegram, what should I do?

AnQiCMS supports custom contact information. You can find the "Custom Settings Parameters" area at the bottom of the "Contact Information Settings" page.Click the 'Add' button and enter in the 'Parameter Name' fieldTelegram(or any name you want), enter your Telegram account or link in the "parameter value" and add a note. Save it, and you can use it in the template.{% contact with name="Telegram" %}Call this custom Telegram message.

3. My website is in a multi-site mode, can I call the contact information of other sites?

Sure. AnQiCMS'scontactTag supportsiteIdParameters. If you have created multiple sites in multi-site management, each site has a unique ID. You cancontactthe tagsiteIdTo call the contact information of a specific site, for example: `{% contact