AnQiCMS如何显示自定义的联系方式信息（如WhatsApp、Facebook链接）？

在当今数字时代，网站不仅仅是展示信息的平台，更是企业与客户建立连接的重要桥梁。提供多样化的联系方式，如WhatsApp、Facebook链接，能够极大地提升用户体验和转化效率。AnQiCMS作为一个功能强大的内容管理系统，在这方面提供了灵活且便捷的解决方案。

本文将详细介绍如何在AnQiCMS中设置和显示自定义的联系方式信息，确保您的网站能以最便捷的方式与潜在客户沟通。

---

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

AnQiCMS的“联系方式设置”功能是管理您所有联络信息的核心。在这里，您可以填充系统默认提供的联系方式，也可以根据业务需求，添加更多个性化的联系渠道。

1. 访问联系方式设置界面： 登录AnQiCMS后台后，您可以在左侧导航栏找到“后台设置”菜单，点击后选择“联系方式设置”。这将带您进入一个集中管理网站所有联系信息的地方。

2. 填写内置联系方式： 进入联系方式设置页面，您会看到一些常用的默认字段，例如：

   • 联系人：通常是您公司对外联络的代表姓名。
   • 联系电话：用于客户直接拨打的电话号码。
   • 联系地址：您的公司地址，方便客户了解您的地理位置。
   • 联系邮箱：接收客户邮件的邮箱地址。
   • 微信号 和 微信二维码：方便中国客户通过微信联系。

   这些都是网站底部或“联系我们”页面常见的元素。您可以根据实际情况，将这些信息一一填写完整。

3. 添加自定义联系方式（以WhatsApp和Facebook为例）： AnQiCMS的强大之处在于其“自定义设置参数”功能。虽然系统已经内置了一些主流社交媒体（如WhatsApp、Facebook、Twitter等）的调用字段，但您仍然可以通过自定义设置来补充或修改。

   在“联系方式设置”页面的下方，您会找到一个“自定义设置参数”区域。这里允许您添加任何不在默认列表中的联系方式，或者为现有联系方式添加额外的说明。

   • 添加WhatsApp链接： 如果您的业务广泛使用WhatsApp，并且希望在网站上直接提供WhatsApp聊天链接，可以这样添加：

     • 点击“添加”按钮。
     • “参数名”：建议填写为WhatsAppLink（名称清晰，且在模板中调用时更方便识别）。请注意，参数名应尽量使用英文字母，系统会自动转换为驼峰命名（如WhatsAppLink）。
     • “参数值”：填写您的WhatsApp聊天链接，例如 https://wa.me/国家区号手机号（例如 https://wa.me/15551234567），或者如果是直接展示手机号，也可以只填写手机号。
     • “备注”：简要说明该参数的用途，如“WhatsApp聊天链接”。
     • 点击保存。

   • 添加Facebook主页链接： 同样地，要添加Facebook主页链接：

     • 点击“添加”按钮。
     • “参数名”：填写FacebookPage。
     • “参数值”：填写您的Facebook主页URL，例如 https://www.facebook.com/YourPageName。
     • “备注”：例如“公司Facebook主页”。
     • 点击保存。

   通过这种方式，您可以灵活地添加和管理任何您需要的联系方式，例如LinkedIn个人资料、YouTube频道链接、Telegram群组链接等。

---

第二步：在前端模板中调用并显示联系方式

完成后台配置后，接下来就是将这些信息展示到网站的前端页面上。AnQiCMS提供了专门的“联系方式标签” {% contact %} 来实现这一功能。

1. 了解 {% contact %} 标签的基本用法： 这个标签可以用来获取后台“联系方式设置”中配置的任何字段值。它的基本语法是： {% contact 变量名称 with name="字段名称" %} 其中，“变量名称”是可选的，如果您不指定变量名称，标签会直接输出该字段的值。如果您指定了变量名称（例如 {% contact myWhatsapp with name="WhatsAppLink" %}），则可以在后续模板代码中通过 {{ myWhatsapp }} 来引用这个值。

2. 调用内置联系方式的示例： 假设您想在网站页脚显示联系电话和邮箱：

   <div class="footer-contact">
       <p>电话: {% contact with name="Cellphone" %}</p>
       <p>邮箱: <a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
   </div>
   

   AnQiCMS的{% contact %}标签在name参数中直接支持WhatsApp、Facebook等主流社交平台字段。这意味着即使您没有在“自定义设置参数”中添加，只要在后台“联系方式设置”中对应的文本框里填入值，即可直接调用。如果某些平台不在默认支持列表中，才需要通过“自定义设置参数”来添加。

3. 调用WhatsApp和Facebook链接的示例： 根据我们在后台配置的WhatsAppLink和FacebookPage，您可以在模板中这样调用它们，并使其成为可点击的链接：

   <div class="social-media-links">
       {# WhatsApp 链接 #}
       {% contact whatsappLink with name="WhatsAppLink" %} {# 获取自定义的WhatsApp参数值 #}
       {% if whatsappLink %} {# 判断是否有值，避免显示空链接 #}
           <a href="{{ whatsappLink }}" target="_blank" rel="noopener noreferrer">
               <img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp">
               <span>WhatsApp</span>
           </a>
       {% endif %}
   
   
       {# Facebook 链接 #}
       {% contact facebookPage with name="FacebookPage" %} {# 获取自定义的Facebook参数值 #}
       {% if facebookPage %} {# 判断是否有值，避免显示空链接 #}
           <a href="{{ facebookPage }}" target="_blank" rel="noopener noreferrer">
               <img src="/public/static/images/facebook-icon.png" alt="Facebook">
               <span>Facebook</span>
           </a>
       {% endif %}
   
   
       {# 如果是内置的Facebook字段，且后台已填写，也可以直接这样调用 #}
       {% contact facebookUrl with name="Facebook" %}
       {% if facebookUrl %}
           <a href="{{ facebookUrl }}" target="_blank" rel="noopener noreferrer">
               <img src="/public/static/images/facebook-icon-builtin.png" alt="Facebook">
               <span>Facebook</span>
           </a>
       {% endif %}
   </div>
   

   请注意：

   • src 属性中的图片路径 /public/static/images/whatsapp-icon.png 需要您根据实际情况，将社交媒体图标图片上传到对应的模板静态资源目录中。
   • target="_blank" rel="noopener noreferrer" 属性是网页安全的**实践，用于在新窗口打开外部链接。
   • {% if ... %} 判断语句非常重要，它能确保只有当后台填写了该联系方式时，前端才会显示对应的链接，避免出现空链接。

4. 多站点环境下的调用： 如果您使用了AnQiCMS的多站点管理功能，并且需要调用其他站点而不是当前站点的联系方式，可以使用 siteId 参数来指定： {% contact with name="WhatsAppLink" siteId="2" %} (假设站点ID为2)

---

实战案例：网站页脚联系信息整合

假设您想在网站页脚部分，整合多种联系方式，包括电话、邮箱，以及自定义的WhatsApp和Facebook链接。

”`twig