作为一名资深的网站运营专家,我深知网站页脚虽然看似不起眼,却是用户寻找关键信息、建立信任感的重要区域。统一、清晰地展示联系方式,不仅能提升用户体验,更是网站专业性和服务能力的重要体现。对于使用安企CMS(AnQiCMS)的企业和内容运营团队来说,得益于其灵活的模板机制和便捷的后台管理功能,实现这一点轻而易举。

今天,我们就来深入探讨如何在安企CMS的网站页脚,优雅而高效地统一显示联系人、电话、邮箱等核心联系方式。


一、后台设置:您的联系方式信息库

在安企CMS中,所有的联系信息都集中在后台进行统一管理,这大大方便了运营者进行内容的更新和维护。想象一下,如果您的电话号码或邮箱需要变更,只需在后台修改一次,前台所有调用该信息的地方都会同步更新,避免了繁琐的页面修改工作。

首先,让我们从安企CMS的后台管理界面开始。您需要前往左侧菜单的“后台设置”,然后找到“联系方式设置”选项。点击进入后,您会看到一个直观的配置页面。

在这里,安企CMS提供了一系列预设的联系方式字段,包括:

  • 联系人
  • 联系电话
  • 联系地址
  • 联系邮箱
  • 微信号
  • 微信二维码
  • 以及一些社交媒体联系方式,如QQ、WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube等。

这些字段覆盖了企业常用的各种沟通渠道。您只需在对应的输入框中填入您的实际信息。

灵活自定义,满足个性化需求

如果这些默认选项仍不能完全满足您的业务需求,例如您可能有一个专属的客服热线或一个特定的业务洽谈QQ群号,安企CMS还提供了强大的“自定义设置参数”功能。您可以点击添加新的参数,为它们命名(建议使用英文或拼音,如 ServiceHotline),然后填入相应的值和备注。这个自定义的参数名将是您在模板中调用该信息的“钥匙”。

配置完成后,请务必点击页面底部的“保存”按钮,确保您的所有联系方式设置都已生效。这些信息现在就像一个随时可取的宝库,等待在网站前台被合理地调用。


二、模板引用:将信息呈现到网站页脚

接下来,我们将把后台配置好的联系方式,通过安企CMS的模板标签呈现在网站页脚。在安企CMS的模板体系中,页脚通常作为公共代码片段存在,以便在网站的每个页面都能统一显示。这类公共代码文件通常位于 /template 目录下的 bash.html 或者 partial/footer.html 等文件中,具体取决于您所使用的模板设计。

要将后台设置的联系方式显示到前端,我们需要用到安企CMS强大的模板标签之一:contact 标签。这个标签专门用于获取后台“联系方式设置”中的各项信息。

它的基本用法非常简洁明了:

{% contact 变量名称 with name="字段名称" %}

其中:

  • 变量名称 是一个可选的临时变量,如果您希望将获取到的值先存储起来进行进一步处理(例如判断是否为空再显示),可以使用它。如果不定义变量名称,标签会直接输出字段的值。
  • 字段名称 就是您在后台“联系方式设置”中看到的或自定义的字段名(例如 CellphoneEmail 或您自定义的 WhatsApp)。

让我们通过几个常见的例子,看看如何在页脚模板中引用这些信息:

1. 显示联系电话:

<p>电话:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>

这里我们不仅显示了电话号码,还通过 tel: 协议使其可点击拨打,并添加了 rel="nofollow" 属性。

2. 显示联系邮箱:

<p>邮箱:<a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></p>
与电话类似,`mailto:` 协议让用户点击即可发送邮件。

3. 显示联系地址:

<p>地址:<span>{% contact with name="Address" %}</span></p>

4. 调用自定义的WhatsApp联系方式:

假设您在后台自定义了一个名为 WhatsApp 的字段。

{# 先将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 %}

通过 {% if whatsappNumber %} 进行判断,可以确保只有当后台设置了WhatsApp号码时,前端才会显示这行信息,避免了空行或不必要的占位。

5. 显示微信二维码:

”`twig {# 同理,