如何在网站前台展示自定义的联系方式信息，例如WhatsApp或Facebook链接？

在当今数字时代，让客户能够轻松找到并联系上您，是任何网站成功的基石。无论是提供客户支持，促进销售，还是建立社区互动，清晰可见的联系方式都至关重要。幸运的是，安企CMS提供了一套直观而强大的功能，让您能够轻松地在网站前台展示各类自定义联系方式，比如WhatsApp或Facebook链接，确保您的客户总能便捷地与您沟通。

接下来，我们将分步详细介绍如何在安企CMS中实现这一目标。

第一步：后台配置——联系方式的“大本营”

首先，我们需要进入安企CMS的后台管理界面，找到左侧导航栏中的“后台设置”菜单，点击进入“联系方式设置”选项。这里是您管理所有网站对外联系方式的核心区域。

在这里，您会看到一系列预设的联系方式字段，比如联系人、联系电话、联系地址、联系邮箱、微信号、微信二维码等。更棒的是，安企CMS已经内置了对一些主流社交平台的直接支持，例如WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube等。您只需在对应的字段中填入您的WhatsApp链接（例如https://wa.me/您的WhatsApp号码）或Facebook主页URL即可。

如果您的需求更具体，或者希望添加一个不在默认列表中的联系方式，比如一个特殊的在线客服链接，或者您想用不同的名称来展示某个社交媒体链接，“自定义设置参数”功能就能派上用场了。您只需点击“新增自定义参数”，填入一个易于识别的“参数名”（例如MyCustomChat），以及对应的“参数值”（也就是实际的链接或文本），再加一个“备注”方便记忆，保存即可。这个“参数名”是您后续在网站模板中调用此信息的关键。

完成这些信息的填写后，点击保存，您的联系方式数据就已经安全地存储在系统中了。

第二步：前台展示——让信息触手可及

配置好联系方式后，下一步就是在网站前台合适的位置展示它们了。安企CMS采用了类似Django模板引擎的语法，通过简洁的模板标签，您可以轻松地将这些信息呈现在访客面前。

展示联系方式的核心是使用contact标签。这个标签允许您根据在后台设置的“参数名”来调用对应的值。

1. 展示内置的WhatsApp或Facebook链接

假设您已经在后台的“联系方式设置”中，为“WhatsApp”和“Facebook”字段分别填入了完整的链接地址。现在，您想在网站的页脚或侧边栏展示这些链接，可以这样编写模板代码：

{# 在后台的“WhatsApp”字段填写：https://wa.me/1234567890 #}
{# 在后台的“Facebook”字段填写：https://www.facebook.com/yourpage #}

<div>
    <a href="{% contact with name='WhatsApp' %}" target="_blank" rel="noopener noreferrer">
        <img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp">
        <span>通过WhatsApp联系我们</span>
    </a>
</div>

<div>
    <a href="{% contact with name='Facebook' %}" target="_blank" rel="noopener noreferrer">
        <img src="/public/static/images/facebook-icon.png" alt="Facebook">
        <span>访问我们的Facebook主页</span>
    </a>
</div>

请注意，img标签中的src路径需要根据您实际存放图标的位置进行调整。target="_blank" rel="noopener noreferrer"是网页开发中的良好实践，用于在新窗口打开链接并增强安全性。

2. 展示自定义的联系方式

如果您之前在后台创建了一个名为OnlineChatLink的自定义参数，并在其中填入了您的在线客服链接，您就可以这样调用它：

{# 假设您在后台自定义参数中设置了：参数名=OnlineChatLink，参数值=https://chat.example.com/ #}

<div>
    <a href="{% contact with name='OnlineChatLink' %}" target="_blank" rel="noopener noreferrer">
        <img src="/public/static/images/chat-icon.png" alt="在线客服">
        <span>在线咨询</span>
    </a>
</div>

3. 放置模板代码的位置

这些代码片段可以放置在网站的多个关键位置。最常见的是在全局的页头（通常对应header.html模板文件）或页脚（通常对应footer.html模板文件）中，确保每个页面都能展示。

对于“联系我们”这样的独立页面，您可以在后台的“页面资源”->“页面管理”中编辑该单页内容，直接在可视化编辑器中插入这些链接。或者，如果您想更精细地控制显示布局，可以在该单页对应的模板文件（例如page/detail.html）中进行编辑。

为了保持模板结构清晰，易于维护，您可以将这些联系方式的代码片段封装在/template目录下的某个自定义模板文件中，例如创建一个partial/contact-info.html文件，然后通过{% include "partial/contact-info.html" %}的方式在需要的地方引入。

总结

通过安企CMS直观的后台设置和灵活的模板标签，展示自定义联系方式变得异常简单。无论您是想添加热门社交媒体链接，还是需要为特定需求定制联系入口，An