如何在AnQiCMS前端页面集成并显示后台自定义的联系方式，如WhatsApp链接？

在AnQiCMS上，我们经常需要让访客以最便捷的方式联系到我们，而WhatsApp因其广泛的使用率，成为了许多企业和个人首选的联系工具。幸运的是，AnQiCMS在设计之初就充分考虑了内容和功能的灵活性，让您能够轻松地在后台自定义联系方式，并将其展示在网站的前端页面上。

这篇文章将详细为您介绍如何在AnQiCMS后台添加并管理像WhatsApp这样的自定义联系方式，以及如何在前端模板中优雅地集成并显示它们。

第一步：在AnQiCMS后台设置自定义联系方式

AnQiCMS的后台管理界面设计得非常直观，所有网站的基础信息和联系方式都集中在一个地方进行管理。

首先，请登录您的AnQiCMS后台。在左侧的导航菜单中，找到并点击“后台设置”，然后选择“联系方式设置”。

进入联系方式设置页面后，您会看到一些默认的联系信息字段，例如联系人、联系电话、联系地址、联系邮箱和微信号等。这些都是我们日常网站运营中常用的信息。

现在，如果您的需求是添加一个WhatsApp联系方式，而默认字段中没有，没关系，AnQiCMS提供了灵活的自定义功能。滚动页面到底部，您会看到一个“自定义设置参数”的区域。

在这里，您可以点击“添加”按钮来新增一个自定义字段。

  1. 参数名：这是供前端模板调用的唯一标识。为了方便管理和保持代码整洁，建议使用英文名称，例如“WhatsApp”。AnQiCMS系统会自动将其转换为驼峰命名，方便您在模板中直接调用。
  2. 参数值：这里请填写您的WhatsApp联系信息。您可以选择填写纯粹的WhatsApp号码（包含国家代码，例如+8613800138000），或者直接填写一个完整的WhatsApp聊天链接（例如https://wa.me/8613800138000）。如果您希望在前端直接点击即可发起聊天，推荐填写完整的链接。
  3. 备注：为这个自定义参数添加一个简短的描述，例如“WhatsApp联系链接”，这样日后您或您的团队在查看和维护时能一目了然。

填写完毕后，请点击页面底部的“保存”按钮。这样，您的WhatsApp联系方式就已经成功添加到AnQiCMS的后台设置中了。

第二步：将WhatsApp联系方式集成到前端模板

接下来，我们将把后台设置好的WhatsApp信息展示到网站的前端页面。AnQiCMS采用类似Django模板引擎的语法，使得前端开发人员可以非常容易地上手模板制作和内容调用。

AnQiCMS的模板文件通常存放在/template目录下，并以.html为后缀。您可能希望将WhatsApp链接放在网站的页脚、侧边栏或专门的“联系我们”页面中。以网站页脚为例，这部分代码通常在partial/footer.html或主布局文件bash.html中被引用。

AnQiCMS提供了一个名为contact的专用标签，用来获取后台“联系方式设置”中的所有信息，包括您自定义的参数。

要显示您添加的WhatsApp信息，您可以使用以下代码片段：

{# 获取后台自定义的WhatsApp联系方式的值 #}
{% contact whatsappInfo with name="WhatsApp" %}

{# 判断是否获取到值，避免空内容显示 #}
{% if whatsappInfo %}
  <div class="contact-item whatsapp-link">
    {# 如果后台存的是纯数字，这里需要拼接成完整的WhatsApp链接 #}
    {# 假设后台存的是纯数字，如：8613800138000 #}
    <a href="https://wa.me/{{ whatsappInfo }}" target="_blank" rel="noopener noreferrer">
      {# 您可以在这里放置一个WhatsApp图标，路径示例：/public/static/images/whatsapp-icon.png #}
      <img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp" style="height: 20px; vertical-align: middle; margin-right: 5px;">
      <span>联系WhatsApp: {{ whatsappInfo }}</span>
    </a>
  </div>
{% endif %}

代码解析：

  • {% contact whatsappInfo with name="WhatsApp" %}：这行代码是关键。它告诉AnQiCMS去“联系方式设置”中查找名为“WhatsApp”的参数，并将其值赋给一个名为whatsappInfo的变量。
  • {% if whatsappInfo %}：这是一个条件判断，确保只有当后台确实设置了WhatsApp信息时，前端才显示相关内容，避免页面出现不必要的空白或错误。
  • <a href="https://wa.me/{{ whatsappInfo }}" ...>：这会生成一个可点击的WhatsApp聊天链接。如果您的后台“参数值”中填写的是纯数字，那么我们在这里使用https://wa.me/前缀与whatsappInfo变量进行拼接，形成一个可以直接跳转到WhatsApp聊天的链接。如果后台填写的就是完整的链接，那么href="{{ whatsappInfo }}"即可。
  • target="_blank" rel="noopener noreferrer"：这是一种推荐的安全实践，target="_blank"让链接在新窗口或新标签页打开，而rel="noopener noreferrer"则增强了安全性，防止新打开的页面对当前页面产生潜在的恶意影响。
  • <img src="..." alt="WhatsApp" ...>：您可以根据自己的网站设计，在这里插入WhatsApp的官方图标或其他样式，提升用户体验。记得将图标文件上传到/public/static/images/等可访问的路径下。

第三步：预览与优化

完成模板代码的修改后，在AnQiCMS后台的左侧导航栏找到“更新缓存”并点击，确保您最新的模板更改能够立即生效。然后，您就可以在前台页面刷新查看效果了。

您还可以利用CSS样式来进一步美化WhatsApp联系方式的显示，例如