`contact`标签如何在AnQiCMS页面中显示联系人、电话、地址和社交媒体链接？

在网站运营中，清晰准确地展示联系方式对于建立用户信任、促进沟通交流至关重要。AnQiCMS 提供了一个非常便捷的方式来管理和展示这些信息，那就是通过 contact 标签。这个标签能帮助我们轻松地在网站的任何页面上调用预设的联系人姓名、电话、地址乃至社交媒体链接，无需硬编码，大大提高了内容管理效率。

第一步：在AnQiCMS后台配置联系方式

在我们开始使用 contact 标签之前，首先需要将联系方式信息配置到 AnQiCMS 的后台。这个过程非常直观：

1. 登录 AnQiCMS 后台。
2. 在左侧导航栏中找到并点击“后台设置”。
3. 选择“联系方式设置”。

在这里，您会看到一系列预设的字段，例如“联系人”、“联系电话”、“联系地址”、“联系邮箱”、“微信号”和“微信二维码”等。只需在对应的输入框中填入您的信息即可。

值得一提的是，AnQiCMS 的灵活性允许您添加自定义联系方式。如果您的业务需要展示 WhatsApp、Facebook 主页或其他特定的社交媒体链接，但后台没有直接对应的字段，您可以通过该页面的“自定义设置参数”功能进行添加。比如，您可以添加一个名为“WhatsApp”的参数，并在“参数值”中填入您的 WhatsApp 联系链接或号码。这样，我们稍后就可以在模板中调用它了。

第二步：理解contact标签的基本用法

contact 标签是 AnQiCMS 模板引擎中的一个核心组件，它的基本用法是 {% contact with name="字段名称" %}。这个 name 参数就是我们在后台“联系方式设置”中配置的那些字段名（例如 UserName、Cellphone、Address 等）。

如果我们想直接在模板中输出某个联系信息，可以直接使用这种方式。例如，要显示联系电话，可以写成 {% contact with name="Cellphone" %}。

此外，我们也可以将获取到的联系信息赋值给一个变量，以便在模板中多次使用或进行更复杂的处理。这时候，用法就变为 {% contact 变量名称 with name="字段名称" %}{{ 变量名称 }}。例如，{% contact myPhone with name="Cellphone" %}{{ myPhone }}。

对于有多站点管理需求的用户，contact 标签还支持 siteId 参数，可以指定调用特定站点配置的联系信息。不过，对于大多数单站点用户来说，通常无需关注此参数。

第三步：在页面中实际调用联系方式

了解了 contact 标签的配置和基本用法后，接下来我们看看如何在网站页面中实际展示这些联系信息。

展示联系人姓名、电话和地址

要显示联系人的姓名、电话和地址，您可以使用 UserName、Cellphone 和 Address 字段。为了方便用户点击电话号码直接拨打，我们可以将其包裹在 tel: 链接中。

<p>联系人：{% contact with name="UserName" %}</p>
<p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a></p>
<p>地址：{% contact with name='Address' %}</p>

在上面的代码中，{% contact with name="UserName" %} 会直接输出您在后台填写的联系人姓名。电话号码则被用于构建一个可点击的电话链接。

展示联系邮箱和社交媒体链接

对于联系邮箱 (Email) 和各类社交媒体链接（如 Facebook, Twitter, Instagram, Youtube 等），调用方式也是一致的。请确保您在后台填入了完整的链接地址（包括 http:// 或 https://）。

<p>邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name name='Email' %}</a></p>
<p>Facebook：<a href="{% contact with name='Facebook' %}" target="_blank" rel="nofollow">我们的Facebook页面</a></p>
<p>Twitter：<a href="{% contact with name='Twitter' %}" target="_blank" rel="nofollow">关注我们Twitter</a></p>

这里需要注意 target="_blank" 会让链接在新标签页中打开，而 rel="nofollow" 属性可以告诉搜索引擎不要跟踪这个链接，在某些SEO策略中会用到。

展示微信二维码

如果您在后台“联系方式设置”中上传了微信二维码图片，可以使用 Qrcode 字段来显示它：

<div>
    <p>微信扫一扫：</p>
    <img src="{% contact with name='Qrcode' %}" alt="微信二维码" style="width: 100px; height: 100px;">
</div>

通过这种方式，用户可以直接扫描二维码添加您的微信。

调用自定义字段（以WhatsApp为例）

假设您在后台“联系方式设置”的“自定义设置参数”中添加了一个名为 WhatsApp 的参数，并在其“参数值”中填入了 WhatsApp 联系链接或号码。那么，在模板中您可以这样调用它：

<p>WhatsApp：<a href="{% contact with name='WhatsApp' %}" target="_blank">立即通过WhatsApp联系</a></p>

请确保后台“自定义设置参数”中的“参数名”与模板中 name 参数的值完全一致（例如 WhatsApp）。

总结

contact 标签是 AnQiCMS 模板系统中一个非常实用的功能，它让网站联系信息的管理和展示变得异常简单和高效。通过灵活配置后台参数，并结合模板标签的调用，您可以轻松地在网站的任何位置以您想要的方式呈现联系方式，从而更好地服务您的用户。无论是显示基本的联系信息，还是集成各种社交媒体链接，contact 标签都能提供强大的支持。

常见问题解答 (FAQ)

Q1: 如果我在后台更改了联系电话或地址，前台页面会立即更新吗？

A1: 是的，通常情况下，AnQiCMS 后台的数据更新