如何在前端页面显示企业联系方式，包括自定义字段？

在网站运营中，清晰、便捷地展示企业的联系方式是至关重要的一环。它不仅能增强访客对网站的信任度，方便潜在客户进行咨询，更是促进业务转化的基石。安企CMS（AnQiCMS）深知这一点，提供了强大而灵活的功能，让您能够轻松管理并在网站前端展示包括自定义字段在内的各类企业联系信息。

一、后台配置：建立您的企业“联络簿”

在安企CMS中，所有的联系信息都集中在后台的“系统设置”下的“联系方式设置”模块。这是您定义企业对外联络窗口的核心区域。

1. 核心联系信息

进入后台后，点击左侧菜单的“系统设置”，然后选择“联系方式设置”。您会看到一些预设的常用字段，例如：

  • 联系人： 通常是您希望对外公布的业务负责人姓名（例如：王先生）。
  • 联系电话： 访客可以通过电话直接与您沟通，建议填写便于联系的号码。
  • 联系地址： 您的公司所在地或常用办公地址，有助于访客了解您的地理位置。
  • 联系邮箱： 用于邮件沟通的重要渠道。
  • 微信号/微信二维码： 在国内市场，这两个字段是方便客户添加微信好友、扫码关注的便捷方式。

这些字段都是网站对外展示企业形象和提供服务的基础信息，请务必根据实际情况填写完整。

2. 灵活扩展：自定义联系方式

随着业务的全球化或特殊需求，您可能需要展示更多元化的联系方式，比如WhatsApp、Skype ID等。安企CMS提供了“自定义参数”功能，让您能够根据模板调用的需要，随意增加新的联系字段。

在“联系方式设置”页面的下方，有一个“自定义设置参数”区域。点击添加，您可以：

  • 参数名： 这是前端模板调用时使用的名称。例如，如果您想添加WhatsApp联系方式，参数名可以设置为 WhatsApp。
  • 参数值： 对应参数名所存储的具体内容，例如您的WhatsApp号码。
  • 备注： 方便您自己记录该参数的用途，不会在前端显示。

通过这种方式，您可以无限扩展您的企业联络方式，以满足不同场景和用户的需求。

二、前端展示：让访客轻松找到您

当您在后台配置好所有联系信息后，接下来就是如何在网站前端页面上将其展现出来。安企CMS提供了简洁高效的模板标签 contact 来实现这一目标。

1. 核心工具：contact 标签

contact 标签是用于在前端页面获取后台“联系方式设置”中所有信息的关键。它的基本使用方法是 {% contact 变量名称 with name="字段名称" %}。其中 name 属性用于指定您想获取的具体联系信息字段。

2. 调用标准联系方式

以几个常见字段为例，看看如何在您的模板中调用它们：

  • 显示联系电话：

    <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">
    电话：{% contact with name="Cellphone" %}
</a>

    这里使用了 tel: 协议，访客点击即可拨打电话，rel="nofollow" 可根据SEO策略选择添加。

  • 显示联系地址：

    <span>地址：{% contact with name="Address" %}</span>

  • 显示联系邮箱：

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

    mailto: 协议让访客点击即可通过邮件客户端发送邮件。

  • 显示微信二维码：

    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />

    src 属性用于指定二维码图片的链接。

3. 显示自定义联系方式

调用自定义联系方式与调用标准字段同样简单，关键在于 name 属性的值必须与您在后台“自定义设置参数”中设置的“参数名”一致。

  • 显示 WhatsApp 号码： 如果您在后台将WhatsApp的参数名设置为 WhatsApp，那么在前端您可以这样调用： 
    
<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank" rel="nofollow">
    WhatsApp：{% contact with name="WhatsApp" %}
</a>
    使用 wa.me/ 链接可以直接跳转到WhatsApp聊天。

4. 组织页面布局

这些联系方式可以灵活放置在您网站的任何位置。最常见且推荐的做法包括：

  • 网站页脚 (Footer)： 将核心联系信息（电话、地址、邮箱）放置在网站底部，方便访客在浏览任何页面时都能快速找到。
  • “联系我们”页面： 在专门的联系页面上，可以更详细地列出所有联系方式，包括地图、留言表单等。
  • 网站头部或侧边栏： 对于最重要的联系电话或咨询入口，可以考虑放置在网站顶部或侧边栏，使其更醒目。

为了避免在每个页面重复编写相同的代码，您可以将这些联系信息集中到一个模板片段中（例如 _partial/contact_info.html），然后使用 {% include "_partial/contact_info.html" %} 标签在需要显示的地方引用，大大提高了模板的可维护性。

三、高级技巧与**实践

1. 条件判断：内容存在时才显示

为了让页面显示更整洁，您可以利用安企CMS模板的条件判断功能，仅当某个联系方式有内容时才显示对应的代码块。这避免了因为某个字段未填写而导致页面出现空白标签或不美观的文字。

例如，只在后台上传了微信二维码图片时才显示：

{% set wechatQrcode = "" %} {# 先定义一个变量 #}
{% contact wechatQrcode with name="Qrcode" %} {# 获取二维码URL并赋值给变量 #}
{% if wechatQrcode %} {# 判断变量是否有值 #}
    <div class="wechat-qr">
        <img src="{{ wechatQrcode }}" alt="微信二维码" />
        <p>扫码添加微信</p>
    </div>
{% endif %}

这种方式可以确保页面内容的动态适应性，提升用户体验。

2. 全局信息与联系方式的区分

安企CMS除了 contact 标签用于获取联系方式外，还有 system 标签用于获取全局系统设置（如网站名称、备案号等）。虽然二者都能配置自定义字段，但建议将企业联系相关的字段统一在“联系方式设置”中配置，并通过 contact 标签调用。这样能保持后台设置的逻辑清晰，也便于未来的管理和维护。

通过以上步骤，您就能在安企CMS的强大支持下，轻松、灵活且专业地在网站前端展示您的企业联系方式，包括各种自定义的联络渠道，从而更好地服务您的访客和客户。

常见问题 (FAQ)

1. 我在后台“联系方式设置”里填写了信息，为什么前端页面上没有显示？

这通常有几个原因：

  • 模板未调用： 您需要在前端模板（如页脚、联系我们页面）中使用正确的 {% contact ... %} 标签来调用这些信息。仅仅在后台填写，前端是不会自动显示的。
  • 缓存问题： 清理一下网站缓存或浏览器缓存，有时旧的页面数据会导致新的内容无法立即显示。
  • 拼写错误： 检查模板中 name="字段名称" 的 字段名称 是否与后台配置的英文名称（对于预设字段）或“参数名”（对于自定义字段）完全一致，包括大小写。

2. 如何将一个联系电话或邮箱地址放在多个页面（例如页头和页脚）同时显示？

最推荐的做法是将显示联系方式的代码段封装成一个独立的模板文件，例如在 /template/您的模板目录/partial/contact_info.html 中编写代码。然后，在需要显示这些信息的页面（如 bash.html 或 index.html）中，使用 {% include "partial/contact_info.html" %} 标签来引用它。这样，您只需修改一个文件，就能同步更新所有引用该模板片段的页面。

3. 安企CMS除了电话、邮箱、微信外，还能添加其他联系方式吗？比如Skype ID或客服热线？

完全可以。安企CMS的“联系方式设置”模块支持“自定义设置参数”功能。您可以点击“添加”按钮，自定义一个参数名（例如 SkypeID），然后