如何在网站前端调用并展示后台配置的联系方式信息？

在现代网站运营中，清晰、便捷地展示企业的联系方式是至关重要的。安企CMS（AnQiCMS）深知这一需求，提供了灵活且易于操作的后台配置选项，让您无需编写复杂的代码，就能将联系信息动态呈现在网站前端。本文将详细介绍如何在安企CMS中配置并调用这些联系方式，让您的用户能第一时间找到您。

一、后台配置联系方式：信息之源

一切前端展示的数据都源于后台的精心配置。在安企CMS中，管理网站的联系方式是一个直观的过程。您需要登录后台管理界面，然后导航到左侧菜单的 “后台设置”，接着点击 “联系方式设置”。

在这里，您会发现一系列预设的常用联系信息字段，例如：

• 联系人 (UserName)：通常是您希望对外公布的联系人姓名。
• 联系电话 (Cellphone)：客户与您沟通最直接的方式。
• 联系地址 (Address)：方便客户实地考察或寄送物品。
• 联系邮箱 (Email)：商务合作或详细咨询的常用渠道。
• 微信号 (Wechat)：时下流行的即时通讯方式。
• 微信二维码 (Qrcode)：方便用户扫码添加。
• 此外，安企CMS还内置了众多社交媒体字段，如 QQ、WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube 等，以满足全球化运营和多渠道推广的需求。

如果这些预设字段仍不能满足您的特定需求，安企CMS还提供了强大的 “自定义设置参数” 功能。比如，您可能需要一个专门的售后服务电话或者一个特定的业务咨询QQ群号，您可以在这里新增自定义参数。只需填写一个“参数名”（这是在前端模板中调用的关键标识，建议使用英文），赋予其相应的“参数值”，并添加“备注”说明其用途，即可轻松扩展。这些自定义参数的加入，极大地提升了网站联系信息展示的灵活性和定制性。

二、前端模板调用核心：联系方式标签

在安企CMS的模板系统中，调用后台配置的联系方式主要依赖于一个名为 contact 的专用标签。这个标签设计得非常简洁高效，能够根据您提供的字段名称，准确地从后台提取相应的数据。

contact 标签的基本使用格式是：{% contact 变量名称 with name="字段名称" %}。 其中：

• 变量名称 是可选的，如果您想将获取到的联系信息赋值给一个临时变量以便后续处理（例如在 if 条件中判断是否存在），就可以使用它。如果您只是想直接输出数据，则可以省略此部分。
• name="字段名称" 是核心部分，您需要在这里指定您在后台“联系方式设置”中配置的字段名。无论是预设的字段（如 Cellphone、Email），还是您自定义的字段（如您定义的 WhatsApp），都通过这个 name 参数来获取。
• siteId 参数一般情况下无需填写，它主要用于多站点管理场景下，当您希望从非当前站点调用联系信息时才需要指定。对于大多数单站点用户而言，保持默认即可。

安企CMS的模板引擎支持类似Django的语法，所以这些标签的编写非常直观。

三、常见联系方式字段的调用示例

了解了 contact 标签的用法后，接下来我们通过一些具体示例，看看如何在网站前端灵活展示各种联系方式。

1. 展示联系人姓名和电话

通常，网站的页脚或“联系我们”页面会展示联系人的姓名和电话。

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

这里，我们直接使用 name="UserName" 和 name="Cellphone" 来获取后台配置的联系人姓名和电话，并通过 <a href="tel:..."> 标签，让电话号码在移动设备上可以直接点击拨打。

2. 展示联系地址和邮箱

为了方便用户，联系地址和邮箱也常常一同出现。

<p>公司地址：{% contact with name="Address" %}</p>
<p>电子邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>

同样，邮箱地址也添加了 mailto: 链接，点击后可直接打开邮件客户端。

3. 展示微信二维码

微信二维码的展示略有不同，它需要使用 <img> 标签来加载图片。

<div class="wechat-qrcode">
    <p>微信扫一扫，添加好友：</p>
    {% contact wechatQrcode with name="Qrcode" %}
    {% if wechatQrcode %}
        <img src="{{ wechatQrcode }}" alt="微信二维码" />
    {% else %}
        <p>暂无微信二维码信息</p>
    {% endif %}
</div>

这里我们首先将 Qrcode 的值赋给一个临时变量 wechatQrcode，然后使用 if 语句判断该变量是否存在。如果存在，就通过 <img> 标签显示，否则显示一个提示信息。这是一个良好的编程习惯，可以避免在数据缺失时出现空白或报错。

4. 调用其他社交媒体或自定义字段

无论是预设的社交媒体字段（如 WhatsApp）还是您自定义的字段（例如您在后台添加了一个名为 ServiceLine 的客服热线），调用方式都是一致的。

<p>WhatsApp：{% contact with name="WhatsApp" %}</p>
<p>客服热线：{% contact with name="ServiceLine" %}</p>

只要 name 参数与后台配置的字段名称完全对应，就能准确获取并展示信息。

四、整合与优化：让信息更灵活地展示

将上述零散的联系方式整合到一个统一的区域，并进行一些优化，能让您的网站看起来更专业、用户体验更佳。

您可以在页脚或专门的“联系我们”页面创建一个信息块，将所有联系方式集中展示。为了确保页面整洁，并避免在某个联系方式未填写时出现不美观的空行，建议您使用条件判断语句 if 来判断信息是否存在。

<div class="contact-info-block">
    <h4>联系我们</h4>
    <ul>
        {% contact userName with name="UserName" %}
        {% if userName %}<li>联系人：{{ userName }}</li>{% endif %}

        {% contact cellphone with name="Cellphone" %}
        {% if cellphone %}<li>电话：<a href="tel:{{ cellphone }}">{{ cellphone }}</a></li>{% endif %}

        {% contact contactEmail with name="Email" %}
        {% if contactEmail %}<li>邮箱：<a href="mailto:{{ contactEmail }}">{{ contactEmail }}</a></li>{% endif %}

        {% contact contactAddress with name="Address" %}
        {% if contactAddress %}<li>地址：{{ contactAddress }}</li>{% endif %}

        {% contact wechatId with name="Wechat" %}
        {% if wechatId %}<li>微信：{{ wechatId }}</li>{% endif %}

        {% contact whatsappId with name="WhatsApp" %}
        {% if whatsappId %}<li>WhatsApp：{{ whatsappId }}</li>{% endif %}
    </ul>

    {% contact wechatQrcode with name="Qrcode" %}
    {% if wechatQrcode %}
        <div class="wechat-qrcode-display">
            <p>微信扫码咨询：</p>
            <img src="{{ wechatQrcode }}" alt="微信二维码" />
        </div>
    {% endif %}
</div>

通过这种方式，每个联系信息都会先被赋值给一个临时变量，并通过 {% if 变量名 %} 来判断该信息是否存在。只有存在时，才会渲染相应的HTML代码，这样既保证了内容的完整性，又避免了空数据带来的页面布局问题。至于最终的样式和布局，则可以通过CSS文件进行美化。

至此，您已经掌握了如何在安企CMS后台配置联系方式，并将其动态、灵活地呈现在网站前端的技巧。安企CMS的设计理念就是让内容管理变得简单高效，通过这些标签，您将能够轻松管理并展示您的关键信息。

常见问题 (FAQ)

1. 我在后台设置了联系方式，但前端页面没有显示，是什么原因？ 首先，请确保您在模板中正确使用了 {% contact %} 标签，并且 name 参数填写的是后台配置的字段名（包括大小写）。其次，检查模板文件是否已上传至服务器并生效。如果使用了缓存，请尝试清除安企CMS的系统缓存。最后，确认在后台“联系方式设置”中，您确实为相应字段填写了内容。

2. 如何在一个多站点安企CMS中，调用另一个站点的联系方式？ 安企CMS的 contact 标签支持 siteId 参数。您可以通过 {% contact with name="FieldName" siteId="另一个站点的ID" %} 来指定调用特定站点的联系方式。您可以在后台的“多站点管理”中找到各个站点的ID。

3. 如果我设置了一个自定义的联系方式，例如“售后电话”，在前端应该如何调用？ 假设您在后台“联系方式设置”的“自定义设置参数”中，添加了一个“参数名”为 AfterSalesPhone 的字段。那么在前端模板中，您可以通过 {% contact with name="AfterSalesPhone" %} 来调用并展示其“参数值”。调用方式与预设字段完全相同，只需确保 name 参数与您定义的“参数名”一致即可。