如何在模板中动态获取和显示网站的联系方式，如电话、邮箱、社交媒体链接？

网站的联系方式，如电话、邮箱和社交媒体链接，是用户与我们建立连接的重要桥梁。在网站运营中，这些信息的准确性和可访问性至关重要。AnQiCMS作为一个高效的内容管理系统，提供了非常便捷的方式来管理和动态展示这些联系信息，让我们能轻松维护网站内容的统一性，并在需要时快速更新。

本文将深入探讨如何在AnQiCMS中设置联系方式，以及如何在模板中动态获取并以用户友好的方式显示它们。

一、在AnQiCMS后台集中管理联系信息

所有网站的联系信息都统一在AnQiCMS后台进行集中管理，这极大地简化了网站运营人员的工作。

  1. 访问联系方式设置： 登录AnQiCMS后台，依次点击左侧菜单的“设置” -> “联系方式设置”。

  2. 填写预设字段： 在这个页面，您会看到一系列预设的联系信息字段，包括：

    • 联系人： 通常是负责业务咨询的姓名，例如“王先生”。
    • 联系电话： 网站主要的联系电话，建议填写可直接拨打的号码。
    • 联系地址： 公司的详细地址，方便访客定位。
    • 联系邮箱： 用于接收业务咨询或用户反馈的电子邮件地址。
    • 微信号/QQ： 如果您希望通过微信或QQ与客户互动，可以在此填写。
    • 微信二维码： 上传您的微信二维码图片，方便用户扫码添加。
    • 社交媒体链接： AnQiCMS内置了对Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube等主流社交媒体链接的支持，只需填入相应的URL即可。

  3. 自定义联系方式： AnQiCMS非常灵活，除了这些预设字段，还允许我们添加自定义联系方式，以满足特定需求。例如，如果您需要添加一个“WhatsApp”联系方式，可以在“自定义设置参数”区域进行添加。

    • 参数名： 这是在模板中调用时使用的字段名称，建议使用英文字母，例如 WhatsApp。
    • 参数值： 对应的联系方式内容，例如您的WhatsApp号码或链接。
    • 备注： 用于内部管理，方便您识别该字段的用途。

完成所有信息的填写后，记得点击保存按钮，确保更改生效。

二、在模板中动态获取和显示联系方式

一旦后台的联系信息设置完毕，下一步就是在网站模板中动态调用这些信息了。AnQiCMS提供了强大的contact标签，可以非常方便地实现这一点。

1. 使用contact标签获取信息

contact标签是获取联系信息的关键。它的基本使用方法是 {% contact 变量名称 with name="字段名称" %}。

  • 变量名称：可选，如果您想将获取到的值存储到一个变量中以便后续处理或多次使用，可以指定一个变量名，如myPhone。
  • 字段名称：这是必填项，对应您在后台“联系方式设置”中填写的预设字段名称（例如Cellphone、Email）或自定义字段的参数名（例如WhatsApp）。

让我们通过具体的例子来看看如何使用：

  • 获取并显示联系电话： 假设我们想显示网站的联系电话，可以直接在模板中使用：

    电话：{% contact with name="Cellphone" %}

    如果想将其存储到变量中，可以这样做：

    {% contact websitePhone with name="Cellphone" %}
<p>电话：{{ websitePhone }}</p>

  • 获取并显示联系邮箱： 同样地，获取邮箱信息也非常简单：

    邮箱：{% contact with name="Email" %}

    或者：

    {% contact websiteEmail with name="Email" %}
<p>邮箱：{{ websiteEmail }}</p>

  • 获取并显示社交媒体链接： 对于像Facebook这样的社交媒体链接，只需使用对应的字段名称：

    <a href="{% contact with name='Facebook' %}" target="_blank">我们的Facebook主页</a>

  • 获取并显示自定义联系方式： 如果您在后台自定义了一个WhatsApp字段，调用方式与预设字段一致：

    WhatsApp：{% contact with name="WhatsApp" %}

2. 将联系方式转化为可点击的交互元素

为了提升用户体验，我们通常会将电话和邮箱地址转化为可点击的链接，让用户可以直接拨打或发送邮件。

  • 可点击的电话号码： 利用tel:协议，用户点击后即可在手机上直接拨打电话：

    {% contact phoneNum with name="Cellphone" %}
{% if phoneNum %}
    <a href="tel:{{ phoneNum }}" class="contact-phone">{{ phoneNum }}</a>
{% endif %}

    这里我们还加入了一个{% if phoneNum %}判断，确保只有当电话号码不为空时才显示链接，避免页面出现空白或错误链接。

  • 可发送邮件的链接： 利用mailto:协议，用户点击后会唤起邮件客户端：

    {% contact emailAddr with name="Email" %}
{% if emailAddr %}
    <a href="mailto:{{ emailAddr }}" class="contact-email">{{ emailAddr }}</a>
{% endif %}

3. 显示微信二维码

如果您上传了微信二维码，可以通过以下方式显示：

{% contact wechatQrcode with name="Qrcode" %}
{% if wechatQrcode %}
    <div class="wechat-qr-code">
        <img src="{{ wechatQrcode }}" alt="微信二维码">
        <p>扫码添加微信</p>
    </div>
{% endif %}

三、实际应用场景与进阶技巧

动态获取的联系方式可以灵活地放置在网站的各个关键区域，如页眉、页脚、联系我们页面，甚至侧边栏。

  1. **统一页眉和页脚