如何在网站模板中动态显示联系方式信息？

在运营网站时，我们经常需要展示公司的联系方式，比如电话、邮箱、地址，甚至是社交媒体链接。传统的方式可能是在模板中直接硬编码这些信息，但这样一来，每次联系方式有变动，你就需要修改代码，这既麻烦又容易出错。

安企CMS（AnQiCMS）提供了一套灵活且高效的解决方案，让你能够轻松地在网站模板中动态显示和管理这些联系方式。这意味着一旦联系方式发生变化，你只需要在后台更新一次，网站上所有用到这些信息的地方都会自动同步更新，大大提升了运营效率。

后台设置联系方式信息

所有网站的联系方式都集中在安企CMS后台的“后台设置”模块中。进入后台后，在左侧菜单找到“后台设置”，然后点击“联系方式设置”即可。

你会看到一些预设的联系方式字段，例如：

  • 联系人：通常是公司或主要联系人的姓名。
  • 联系电话：公司的主要联系电话。
  • 联系地址：公司的实际办公地址。
  • 联系邮箱：用于业务沟通的邮箱地址。
  • 微信号、微信二维码：方便用户通过微信联系。
  • QQ、WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube：这些涵盖了主流的国内外社交媒体平台，方便你全球化推广。

如果这些内置字段不能满足你的需求，比如你需要添加一个特定的部门联系电话，或者一个不常用的社交媒体链接，安企CMS也提供了自定义设置项的功能。你只需点击“自定义设置参数”，然后填写：

  • 参数名：这是你在模板中调用时使用的名称，建议使用英文，系统会自动将其转换为驼峰命名。例如，你可以设置 SalesEmail 或 SupportPhone。
  • 参数值：实际的联系方式内容，比如 sales@yourcompany.com。
  • 备注：方便你识别这个参数的用途，它不会在网站前端显示。

通过这种方式，你可以根据网站的实际需求，灵活地增加、修改和管理各种联系方式。

在网站模板中动态调用联系方式

在后台设置好联系方式后，你就可以在网站模板中利用安企CMS的contact标签来动态显示这些信息了。这个标签非常直观，它的基本用法是：

{% contact 变量名称 with name="字段名称" %}

其中：

  • 变量名称 是可选的，你可以给获取到的数据起一个临时的名字，方便后续在代码中引用。如果省略这个部分，标签会直接输出字段的值。
  • name="字段名称" 是关键，你需要在这里指定你想要调用的联系方式的字段名，比如 Cellphone、Email 或你自定义的 WhatsApp。

下面我们通过几个常见的例子，来看看如何在模板中实际运用：

1. 显示联系电话

你可以在页头、页脚或者“联系我们”页面显示公司的联系电话。为了方便用户直接点击拨打，我们还可以将其包裹在 tel: 链接中。

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

2. 显示联系邮箱

与电话类似，邮箱地址也可以制作成可点击的 mailto: 链接。

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

3. 显示公司地址

地址信息通常在页脚或联系页面展示。

<p>地址：{% contact with name='Address' %}</p>

4. 展示微信二维码

如果你的网站需要展示微信二维码，可以通过 Qrcode 字段调用后台上传的图片。

<div class="wechat-qrcode">
    <img src="{% contact with name='Qrcode' %}" alt="微信二维码" />
    <p>扫描微信二维码联系我们</p>
</div>

5. 调用自定义的WhatsApp账号

假设你在后台自定义了一个名为 WhatsApp 的联系方式，你可以这样调用它：

<p>WhatsApp：<a href="https://wa.me/{% contact with name='WhatsApp' %}" target="_blank">{% contact with name='WhatsApp' %}</a></p>

这里我们结合了WhatsApp的官方链接格式，让用户可以直接跳转聊天。

6. 多站点联系方式调用

如果你的安企CMS部署了多个站点（通过多站点管理功能），并且希望在当前站点的模板中显示*其他*站点的联系方式，你可以在 contact 标签中加上 siteId 参数来指定站点 ID。例如，如果站点 ID 为 2 的站点有特定的联系电话，你可以这样调用：

<p>分公司电话：<a href="tel:{% contact with name='Cellphone' siteId=2 %}">{% contact with name='Cellphone' siteId=2 %}</a></p>

实用场景与进阶技巧

灵活组合显示 通过组合不同的contact标签，你可以在网站的任何位置，比如页脚、侧边栏或者弹出窗口中，灵活地展示所需的联系信息。

<footer>
    <p>联系人：{% contact with name='UserName' %}</p>
    <p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a></p>
    <p>邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name='Email' %}</a></p>
    <p>地址：{% contact with name='Address' %}</p>
    <div class="social-links">
        {% if contact.Facebook %}
            <a href="{% contact with name='Facebook' %}" target="_blank">Facebook</a>
        {% endif %}
        {% if contact.Twitter %}
            <a href="{% contact with name='Twitter' %}" target="_blank">Twitter</a>
        {% endif %}
    </div>
</footer>

处理空值 为了避免某些联系方式为空时，页面上出现空白或不美观的文字，你可以在显示前进行判断。结合 if 逻辑判断标签和 default 过滤器，可以使模板更健壮。

{% if contact.Cellphone %}
    <p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a></p>
{% else %}
    <p>电话：暂无</p>
{% endif %}

{# 或者使用default过滤器提供默认值 #}
<p>电话：{% contact with name='Cellphone' %}|default:"暂无联系电话"</p>

安企CMS的contact标签为网站的联系方式管理带来了极大的便利和灵活性。通过简单的后台配置和模板调用，你就可以构建出动态、易于维护且用户友好的网站。再也不用担心因为联系方式的变动而频繁修改代码了。