如何在模板中显示后台自定义的联系方式信息（如电话、地址、社交媒体）？

The contact information of the website is the key bridge of communication and trust between you and the visitors.Whether seeking service, consulting products, or simply learning more information, clearly and accurately displaying contact information is crucial for improving user experience.Auto CMS is an efficient and convenient content management system that provides an intuitive backend management interface and flexible template calling functions, allowing you to easily manage this information centrally and seamlessly present it in all corners of the website.

This article will detail how to set these key contact information in the Anqi CMS, and teach you how to accurately display them in the website template.

Step 1: Manage your contact information centrally in the background

In the Auto CMS, it is recommended to set all contact information that needs to be displayed on the website in the background.The benefits of doing this are that once the information changes, you only need to modify it in one place, and all the places that call this information on the website will be updated automatically, greatly improving management efficiency.

  1. Visit the "Contact Information Settings" pageLog in to your security CMS backend management interface.In the navigation menu on the left, find the item "Background Settings" and click to expand. You will see a submenu named "Contact Information Settings.Click to enter; this is the center where you manage all the contact information for your website.

  2. Enter the default contact informationAfter entering the "Contact Information Settings" page, you will see a series of preset fields, which cover the most commonly used contact methods on corporate websites, such as:

    • Contact Person：通常是您公司的对外联络人姓名。
    • Phone Number：您的公司电话或客服热线。
    • Contact Address：您公司的详细物理地址。
    • Contact Email：您的公司邮箱或客服邮箱。
    • WeChat ID：The company's WeChat number.
    • WeChat QR Code：Upload the WeChat service number or QR code image of the company's personal WeChat.
    • In addition, there are some commonly used social media fields, such as QQ, WhatsApp, Facebook, Twitter, Instagram, LinkedIn, YouTube, TikTok, Pinterest, etc. You just need to enter accurate information in the corresponding input box.For fields that require uploading images (such as WeChat QR codes), the system provides a convenient upload entry.

  3. Customize more contact methodsThe Auto CMS fully considers the personalized needs of different websites.If the default field does not meet all your requirements, for example, you may need to display a specific customer service link, or a link to a niche social media platform, you can use the "Custom Setting Parameters" feature at the bottom of the page.

    • Parameter nameThis is the unique identifier you use when calling the template.To facilitate understanding and maintenance, it is recommended to use meaningful English names, such as "CustomerServiceLink" or "LineID".
    • parameter value：Enter the actual content corresponding to this parameter, such as specific URL links, ID numbers, etc.
    • [en] NoteEnglish: To add a brief description of this custom parameter, to help you remember its purpose. Through this method, you can flexibly expand and manage any contact information required based on the actual operational needs of the website.

Step 2: Display contact information elegantly in the website template

After saving the contact information in the background, the next step is to display them in the front-end template of the website. The template engine syntax of Anqi CMS is designed to be very intuitive, similar to Django templates, mainly through double curly braces{{变量}}auto{% 标签 %}auto

autocontacttagsThis tag is specifically used to extract data from the "Contact Information Settings" backend. Its basic usage method is{% contact 变量名称 with name="字段名称" %}.

Let's look at some specific examples to see how to present this information on your website.

  1. Dial the default contact information (such as phone and address)If you want to display the company's contact phone number and address in the footer of the website, you can write your template code like this:

    <!-- 假设这是您模板文件中的某个位置，比如页脚 -->
<footer>
    <p>联系电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>
    <p>公司地址：{% contact with name="Address" %}</p>
    <p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
</footer>

    In this code,contactTagged throughname="Cellphone"/name="Address"andname="Email"These parameters specify the background fields to be called. The tags will automatically output the corresponding values set in the background.<a>Label it and usetel:Protocol, convenient for users to click and dial directly.

  2. Display social media icons and links.Modern websites usually integrate social media links. You can make use of the Anqi CMS's.contactTags to easily achieve:

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


    {%- contact twitterLink with name="Twitter" -%}
    {%- if twitterLink %}
        <a href="{{ twitterLink }}" target="_blank" rel="nofollow"><img src="/static/images/twitter_icon.png" alt="Twitter"></a>
    {%- endif -%}


    {%- contact instagramLink with name="Instagram" -%}
    {%- if instagramLink %}
        <a href="{{ instagramLink }}" target="_blank" rel="nofollow"><img src="/static/images/instagram_icon.png" alt="Instagram"></a>
    {%- endif -%}
</div>

    Here, we define a temporary variable for each social media link (for examplefacebookLink) and by{% if facebookLink %}Check if the link has been set on the backend to avoid displaying an empty link. The image icon needs to be prepared and placed in the static resource directory of the website (such as/public/static/images/), then through<img>.rel="nofollow"The attribute helps optimize SEO, indicating to search engines not to track these external links.

  3. Invoke custom contact information (e.g., WhatsApp)If you have customized a parameter named “WhatsApp” in the background, the way to call it in the template is also intuitive: 

    {%- contact whatsappLink with name="WhatsApp" -%}
{%- if whatsappLink %}
    <p>
        <a href="{{ whatsappLink }}" target="_blank">通过WhatsApp联系我们</a>
    </p>
{%- endif -%}

    This code will first attempt to retrieve the parameter value named "WhatsApp" from the background. If it exists, it will create a paragraph with a WhatsApp link.

  4. Display WeChat QR Code ImageIf your contact information includes a WeChat QR code, you can directly reference it in the template:

    `twig

    <h4>扫码关注我们</h4>
{%- contact qrcodeImg with name="Qrcode" -%}
{%- if q