How to display the contact information and social media links of a website in Anqi CMS template?

It is crucial to clearly and effectively display contact information and social media links in website operation to establish customer trust and promote interaction.AnQiCMS provides a convenient and flexible way to help us easily integrate these key information into website templates.

---

一、Preparation: Configure contact information and social media on the security CMS backend

Before displaying contact information and social media details on the website frontend, we need to configure it accordingly in the Anqi CMS backend.This is like preparing a complete business card for our website.

1. Enter contact information settingsFirst, log in to the Anqi CMS backend management interface, find "Backend SettingsThis is the area where all contact information is centrally managed.

2. Enter default contact informationIn the "Contact Information Settings" page, you will see a series of preset fields, such as:

   • Contact Person: This is usually the name of your customer service representative or the name used by the company for external contact.
   • Phone Number: This is the main phone number for the website.
   • Contact Address：公司的物理地址。
   • Contact Email：Customers can contact your email address via email.
   • WeChat ID/WeChat QR Code：For displaying WeChat contact information.
   • QQ：If you use QQ as a customer service channel, you can also fill it in here.
   • WhatsApp/Facebook/Twitter/Tiktok/Pinterest/Linkedin/Instagram/Youtube：Security CMS has built-in fields for links to mainstream social media platforms, just fill in the corresponding account or homepage link.

3. Custom social media or special contact informationIf your website needs to display other social media platforms not listed, or has other special contact methods (such as: Telegram link, customer service phone numbers for specific regions), the Anqi CMS also provides a powerful "custom setting parameter" function.

   • Click the "Add" button in the "Customize Setting Parameters" area.
   • Enter a concise and distinguishable English name in the "Parameter Name".TelegramLinkThis name will be used to call in the template.
   • Enter the corresponding link or information in the 'Parameter Value'.
   • Briefly describe the use of this parameter in the 'Notes' section for easy management in the future.

Complete all information entries and remember to click the "Save" button to ensure your configuration takes effect.

Section II: Use contact tags in the template.contact

Secure CMS throughcontactTags make it very straightforward to call these contact information in templates. This tag allows us to accurately obtain the required information based on the 'field name'.

contactThe basic syntax of the label is:{% contact 变量名称 with name="字段名称" %}.The variable name is optional. If you want to store the data obtained for later processing or multiple uses, you can specify a variable name; if you just want to output it once, you can directly omit the variable name.

Let's see how to use it through some examples:

1. Display basic contact informationAssuming we want to display the contact phone number and company address in the footer of the website, we can do so in the template (such asfooter.htmlorbash.html) is written like this:

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

   Thus, the safe CMS will automatically retrieve and display the corresponding phone number, address, and email from the background configuration.

2. Use variables for conditional judgmentsSome contact information may not be required by every website, or may only be displayed when the user provides data. In this case, we can store the values obtained from the tags in a variable and combinecontact标签获取的值存储到变量中，并结合ifCondition judgment tag to flexibly control display.

   For example, we want to display the 'WeChat ID' only when it exists:

   {% contact wechatAccount with name="Wechat" %}
   {% if wechatAccount %}
       <p>微信号：{{ wechatAccount }}</p>
   {% endif %}
   

   Through this way, if the WeChat ID is not filled in the background, this code will not be displayed on the front end, maintaining the page's cleanliness.

3. Display social media links and icons

The display of social media links usually combines icons, which can make the page look more professional and beautiful. The Anqi CMS is built with direct support for multiple social platforms.

1. Call built-in social media linkFor platforms like Facebook, Twitter, we just need to use the correspondingnamethe parameters:

   {% contact facebookLink with name="Facebook" %}
   {% contact twitterLink with name="Twitter" %}
   {% contact linkedinLink with name="Linkedin" %}
   
   
   <div class="social-icons">
       {% if facebookLink %}
           <a href="{{ facebookLink }}" target="_blank" rel="nofollow" title="Facebook">
               <img src="{% system with name="TemplateUrl" %}/images/icons/facebook.svg" alt="Facebook">
           </a>
       {% endif %}
       {% if twitterLink %}
           <a href="{{ twitterLink }}" target="_blank" rel="nofollow" title="Twitter">
               <img src="{% system with name="TemplateUrl" %}/images/icons/twitter.svg" alt="Twitter">
           </a>
       {% endif %}
       {% if linkedinLink %}
           <a href="{{ linkedinLink }}" target="_blank" rel="nofollow" title="LinkedIn">
               <img src="{% system with name="TemplateUrl" %}/images/icons/linkedin.svg" alt="LinkedIn">
           </a>
       {% endif %}
   </div>
   

   Here,{% system with name="TemplateUrl" %}The label is used to obtain the static resource (such as CSS, JS, images) path of the current template, ensuring that the icon can be loaded correctly.rel="nofollow"属性则是一个SEO的**实践，告诉搜索引擎不要追踪这些外部链接。

2. Show WeChat QR Code如果后台配置了微信二维码图片，我们可以直接通过QrcodeField retrieves the image link and|safeoutputs HTML safely:

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

   |safeThe filter is very important here, as it indicates to the template engine that the output HTML content should be treated as safe, avoiding automatic escaping, thus ensuring that the QR code image can be displayed normally.

3. Call custom social media linkIf you have added a custom parameter namedTelegramLinkbefore in the background, we can also call it in the template in the same way:

   auto

   <a href="{{ telegramLink }}" target="_blank" rel="nofollow" title="Telegram">
       <img src="{% system with name="TemplateUrl" %}/images/icons/telegram.svg" alt="Telegram">
   </a>
   

   {%