How to uniformly display contact information, phone numbers, email addresses, and other contact details in the footer of a website?
As an experienced website operations expert, I know that the website footer, although seemingly unimportant, is an important area for users to find key information and establish a sense of trust.Display contact information uniformly and clearly, which not only enhances the user experience but is also an important manifestation of the website's professionalism and service capabilities.For enterprises and content operation teams using AnQiCMS, it is easy to achieve this thanks to its flexible template mechanism and convenient backend management features.
Today, let's delve into how to elegantly and efficiently display contact information, phone numbers, email addresses, and other core contact methods in the footer of the Anqi CMS website.
One, backend settings: Your contact information library
In AnQi CMS, all contact information is centralized for unified management in the background, which greatly facilitates operators in updating and maintaining content.Imagine if you need to change your phone number or email, you only need to modify it once in the background, and all the places that call this information on the front end will be synchronized updated, avoiding the cumbersome page modification work.
First, let's start from the Anqi CMS backend management interface. You need to go to the left menu's “Backend settings”, then find the “Contact information settings”Option. Click to enter and you will see a straightforward configuration page.
Here, AnQi CMS provides a series of preset contact information fields, including:
- Contact
- Contact phone number
- Contact address
- Contact email
- WeChat ID
- WeChat QR code
- and some social media contact information such asQQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtubeetc.
These fields cover all the communication channels commonly used by enterprises. You just need to fill in your actual information in the corresponding input boxes.
Flexible customization to meet personalized needs.
If these default options do not fully meet your business needs, for example, you may have a dedicated customer service hotline or a specific business QQ group number, AnQi CMS also provides powerfulCustom settings parameters”Function. You can click to add new parameters, and name them (it is recommended to use English or pinyin, such asServiceHotline），then fill in the corresponding value and remarks. This custom parameter name will be the 'key' you use to call this information in the template.
After the configuration is complete, please be sure to click the bottom of the page’s “SaveButton, ensure that all your contact information settings are effective. This information is now like a readily accessible treasure, waiting to be appropriately called up on the website front end.
Chapter 2, Template Reference: Present information at the footer of the website
Next, we will display the contact information configured on the backend through the Anqi CMS template tags in the website footer.In Anqi CMS template system, the footer is usually as a common code snippet, so that it can be displayed uniformly on each page of the website./templateUnder the directorybash.htmlOrpartial/footer.htmlin the files, depending on the template design you are using.
We need to use one of the powerful template tags of Anqiz CMS to display the contact information set in the background on the front end:contactLabel. This label is specifically used to obtain various information from the background "Contact Settings".
Its basic usage is very simple and clear:
{% contact 变量名称 with name="字段名称" %}
Among them:
变量名称Is an optional temporary variable, if you want to store the value obtained first for further processing (such as checking if it is empty before displaying), you can use it.If the variable name is not defined, the label will directly output the field value.字段名称is the field name you see in the background "Contact Information Settings" or custom (for exampleCellphone/Emailor custom by youWhatsApp)
Let's look at some common examples to see how to reference this information in the footer template:
1. Display contact information:
<p>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
Here, we not only display the phone number, but also throughtel:The protocol allows it to be clickable and dial, and addsrel="nofollow"Property.
2. Display contact email:
<p>邮箱：<a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></p>
与电话类似，`mailto:` 协议让用户点击即可发送邮件。
3. Display contact address:
<p>地址：<span>{% contact with name="Address" %}</span></p>
4. Call the custom WhatsApp contact method:
Suppose you have customized a namedWhatsAppfield.
{# 先将WhatsApp的值赋给一个变量，以便进行判断 #}
{% set whatsappNumber = "" %}{% contact whatsappNumber with name="WhatsApp" %}
{% if whatsappNumber %}
<p>WhatsApp：<a href="https://wa.me/{{ whatsappNumber }}" target="_blank" rel="nofollow">{{ whatsappNumber }}</a></p>
{% endif %}
By{% if whatsappNumber %}Make a judgment to ensure that the front-end will display this line of information only when the WhatsApp number is set in the background, avoiding blank lines or unnecessary placeholders.
5. Show WeChat QR code:
”`twig {# Similarly,