How to display custom contact information (such as phone, address, social media) in the template?

The contact information of the website is the key bridge for establishing communication and trust between you and the visitors.Whether it is to seek services, consult products, or simply learn more information, clearly and accurately displaying contact information is crucial for improving user experience.AnQi 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 and seamlessly present it in various corners of the website.

This article will detail how to set up these key contact information in 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 AnQi CMS, it is recommended to set all contact information that needs to be displayed on the website in the background.The benefit of doing this is that once the information changes, you only need to modify it in one place, and all the places on the website that call this information will be automatically updated, greatly improving management efficiency.

1. Access the "Contact Information Settings" interfaceLog in to your Anqie CMS backend management interface. In the left navigation menu, find the item 'Backend Settings', click to expand, and you will see a sub-menu named 'Contact Information Settings'.Click to enter, this is the center where you can manage all the contact information of your website.

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

   • Contact: Usually the contact person of your company.
   • Contact phone number: Your company's phone number or customer service hotline.
   • Contact address: The detailed physical address of your company.
   • Contact email: Your company's email or customer service email.
   • WeChat IDCompany's WeChat number.
   • WeChat QR codeUpload the QR code image of the company's WeChat service account or 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 fill in the 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 AnQi CMS fully considers the personalized needs that may exist on different websites.If the default fields do not meet all your requirements, for example, if you need to display a specific customer service link or links to other niche social media platforms, you can use the "custom settings parameters" feature at the bottom of the page.Click to add a new parameter item, you need to fill in three key pieces of information:

   • Parameter NameThis is the unique identifier you use when calling the template.In order to facilitate understanding and maintenance, it is recommended to use meaningful English names, such as 'CustomerServiceLink' or 'LineID'.
   • Parameter valueEnter the actual content corresponding to the parameter, such as a specific URL link, ID number, etc.
   • Note: Add a brief description for this custom parameter to help you remember its purpose.In this way, you can flexibly expand and manage any contact information according to the actual operation 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 on the website front-end template. The Anqi CMS template engine is designed to be very intuitive, similar to Django templates, mainly through double curly braces{{变量}}Output content and single curly braces with the percentage sign{% 标签 %}Execute various functions

To display contact information, we will use the built-in Anqi CMS.contactTag. This tag is specifically used to extract data from the "Contact Settings" on the backend. Its basic usage method is{% contact 变量名称 with name="字段名称" %}.

Let us go through some specific examples to see how to present this information on your website.

1. Call the default contact information (such as phone and address)Assuming you want to display the company's contact information 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 block,contactTag throughname="Cellphone"/name="Address"andname="Email"These parameters specify the backend fields to be called. The label will automatically output the corresponding values set in the backend. We will wrap the phone number in<a>Labels, and usetel:The protocol facilitates direct dialing by clicking.

2. Display social media icons and linksModern websites often integrate social media links. You can use Anqi CMS'scontacttags 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, such asfacebookLink), and through{% if facebookLink %}Determine whether the back-end has set the link 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 proceed<img>references.}rel="nofollow"Properties help optimize SEO, indicating to search engines not to track these external links.

3. Invoke custom contact information (e.g., WhatsApp)If you customize 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 try 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 contains a WeChat QR code, you can directly reference it in the template:

   `twig

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