How to display the contact information and social media links on AnQi CMS templates?

In website operations, clearly and effectively displaying contact information and social media links is crucial for building customer trust and promoting interaction.AnQiCMS (AnQiCMS) provides a convenient and flexible way to easily integrate these key information into website templates.

One, Preparation: Configure contact information and social media on the Anqi CMS backend

Before displaying contact information and social media on the website front end, we need to make the corresponding configuration 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 Settings" in the left navigation bar, and then click "Contact Information Settings".This is the area where all contact information is centrally managed.

2. Fill in the default contact informationOn the "Contact Information Settings" page, you will see a series of predefined fields, such as:

   • Contact: This is usually the name of your customer service representative or the name your company uses for external contact.
   • Contact phone number: This is the main contact phone number for the website.
   • Contact address: The physical address of the company.
   • Contact email: Customers can contact you via email using this address.
   • WeChat ID/WeChat QR code：Used to display WeChat contact information.
   • QQIf you use QQ as a customer service channel, you can also fill it in here.
   • WhatsApp/Facebook/Twitter/TikTok/Pinterest/LinkedIn/Instagram/YouTube：AnQi CMS has built-in fields for links to mainstream social media platforms, simply enter the corresponding account or homepage link.

3. Customize social media or special contact informationIf your website needs to display other social media platforms that are not listed, or if you have other special contact methods (such as Telegram links, customer service phone numbers for specific regions), Anqi CMS also provides a powerful 'custom setting parameter' function.

   • Click the "Add" button in the "Customize Setting Parameters" area.
   • Enter a concise and identifiable English name in the "Parameter Name" (for example:TelegramLinkThis name will be used for the call in the template.
   • Enter the corresponding link or information in the "Parameter Value".
   • Briefly describe the purpose of this parameter in the "Remarks" for future management.

After completing all the information, remember to click the “Save” button to ensure your configuration takes effect.

Second, use the contact information tag in the template.contact

Anqi CMS passedcontactThe tag makes it very direct to call these contact information in the template. This tag allows us to accurately obtain the required information based on the "field name".

contactThe basic syntax of the tag is:{% contact 变量名称 with name="字段名称" %}In which, the variable name is optional, if you want to store the obtained data for subsequent processing or multiple use, you can specify a variable name;If it is only output once, the variable name can be omitted directly.

Let's take a look at some examples to see how to use it:

1. Display basic contact informationSuppose you want to display the contact phone number and company address in the website footer, you 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>
   

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

2. Use variables for conditional judgmentSome contact information may not be necessary for every website, or may only be displayed when the user provides data. In this case, we can store the value obtained fromcontactthe tag in a variable and combine it withifConditional tags are used 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 %}
   

   In this way, if the WeChat ID is not filled in the backend, this code will not be displayed on the front end, keeping the page clean.

3. Display social media links and icons

Social media links are often displayed with icons, which can make the page look more professional and beautiful. Anqi CMS has built-in direct support for various social platforms.

1. Invoke built-in social media linkFor platforms like Facebook, Twitter, we just need to use the correspondingnameJust set the 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 tag is used to get the static resource path of the current template (such as CSS, JS, images), ensuring that the icons can be loaded correctly.rel="nofollow"An attribute is a SEO **practice, telling the search engine not to track these external links.

2. Display WeChat QR codeIf the background is configured with a WeChat QR code image, we can directly go throughQrcodeField to get image link and pass|safeFilter to safely output HTML:

   {% 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 a custom social media linkIf you have added a named parameter in the background beforeTelegramLinkWe can also call it in the template in the same way:

   ”`twig {% contact telegramLink with name=“TelegramLink” %} {% if telegramLink %}

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

   {%