如何在模板中显示网站的联系方式，如电话、邮箱和微信二维码？

作为一位精通安企CMS内容管理和网站运营的专家，我深知企业对外展示联系方式的重要性。这不仅是用户与您建立沟通的桥梁，也是提升网站专业度和可信度的关键环节。在安企CMS中，将这些关键信息集成到网站模板中，既灵活又高效。

在AnQiCMS模板中显示网站联系方式的详细指南

企业网站的核心目的之一是方便用户联系，无论是咨询产品、寻求服务支持还是商务合作，清晰可见的联系方式都不可或缺。安企CMS提供了一套直观且强大的机制来管理和展示这些信息，让您能够轻松地将电话、邮箱和微信二维码等联系方式嵌入到网站的各个角落。

一、配置网站联系方式：后端操作

在将联系方式显示到网站模板之前，我们需要确保这些信息已经在安企CMS后台进行了妥善配置。

1. 访问联系方式设置页面 登录到您的安企CMS后台，导航至 后台设置，然后点击 联系方式设置。这里是您管理所有对外联系信息的集中地。

2. 填写默认联系信息 在联系方式设置页面，您会看到一系列默认的字段，包括“联系人”、“联系电话”、“联系地址”、“联系邮箱”、“微信号”和“微信二维码”等。请根据您的实际情况，逐一填写这些字段。例如，在“联系电话”字段中输入您的业务电话，在“联系邮箱”中填写您的官方邮箱地址。对于“微信二维码”，您可以直接上传预先准备好的二维码图片。

3. 添加自定义联系方式（按需） 如果默认字段无法满足您的所有需求，例如您还希望展示WhatsApp账号或Facebook主页链接，安企CMS允许您自定义添加更多参数。

   • 在“联系方式设置”页面的下方，找到“自定义设置参数”区域。
   • 点击“添加”按钮，输入新的参数信息。
   • 参数名 (FieldName)：这是在模板中调用此信息的唯一标识，建议使用英文且清晰的名称，例如“WhatsApp”或“FacebookLink”。安企CMS会自动将其转换为驼峰命名法（例如，输入的“whatsapp”会变为“WhatsApp”）。
   • 参数值 (Value)：填写实际的WhatsApp账号、Facebook主页URL或其他信息。
   • 备注 (Remark)：可选，用于说明此参数的用途，方便日后管理。 保存这些自定义参数后，它们就可以像默认字段一样在模板中被调用。

二、在网站模板中显示联系方式：前端实现

配置好联系方式后，下一步就是将它们显示到网站前端页面上。安企CMS提供了简洁的模板标签contact来完成这项任务。

1. 了解contact标签的基础用法 contact标签的基本语法是{% contact 变量名称 with name="字段名称" %}。其中：

   • 变量名称：可选。如果您需要对获取到的联系信息进行进一步处理，可以将其赋值给一个变量。如果不需要，可以直接输出。
   • name="字段名称"：这是最重要的部分，字段名称就是您在后台“联系方式设置”中配置的“参数名”（包括默认字段和自定义字段）。

2. 显示联系电话 要在模板中显示您的联系电话，使用name="Cellphone"：

   <!-- 直接输出电话号码 -->
   <p>联系电话：{% contact with name="Cellphone" %}</p>
   
   <!-- 赋值给变量后输出 -->
   {% contact phoneNum with name="Cellphone" %}
   <p>咨询热线：<a href="tel:{{phoneNum}}">{{phoneNum}}</a></p>
   

   建议将电话号码包裹在<a>标签中，并使用tel:协议，方便移动设备用户点击拨号。

3. 显示联系邮箱 要显示联系邮箱地址，使用name="Email"：

   <!-- 直接输出邮箱地址 -->
   <p>邮箱：{% contact with name="Email" %}</p>
   
   <!-- 赋值给变量后输出 -->
   {% contact emailAddress with name="Email" %}
   <p>发送邮件至：<a href="mailto:{{emailAddress}}">{{emailAddress}}</a></p>
   

   同样，将邮箱地址包裹在<a>标签中并使用mailto:协议，可以方便用户点击发送邮件。

4. 显示微信二维码 显示微信二维码图片需要使用name="Qrcode"：

   <!-- 直接输出微信二维码图片 -->
   <div>
       <p>扫码添加微信：</p>
       <img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width:120px; height:120px;" />
   </div>
   
   <!-- 赋值给变量后输出 -->
   {% contact wechatQrcode with name="Qrcode" %}
   {% if wechatQrcode %}
   <div>
       <p>扫码咨询：</p>
       <img src="{{wechatQrcode}}" alt="微信二维码" style="width:100px; height:100px;"/>
   </div>
   {% endif %}
   

   这里使用了{% if wechatQrcode %}进行判断，确保只有当后台上传了二维码图片时才显示，避免显示一个破碎的图片链接。

5. 显示自定义联系方式 如果您在后台添加了自定义参数，例如名为“WhatsApp”的字段，可以在模板中这样调用：

   <!-- 显示WhatsApp账号 -->
   <p>WhatsApp：{% contact with name="WhatsApp" %}</p>
   
   <!-- 显示Facebook链接 -->
   {% contact facebookLink with name="FacebookLink" %}
   {% if facebookLink %}
   <p>关注我们：<a href="{{facebookLink}}" target="_blank" rel="nofollow">Facebook主页</a></p>
   {% endif %}
   

   对于外部链接，建议添加target="_blank"让链接在新窗口打开，并添加rel="nofollow"告知搜索引擎不传递权重。

三、关键注意事项

• 字段名称准确性：确保name参数中的字段名称与后台“联系方式设置”中的“参数名”完全一致，包括大小写。安企CMS的标签对大小写敏感。
• 多站点模式下的siteId：如果您启用了多站点管理，并且希望调用特定站点的联系方式，可以在contact标签中添加siteId="您的站点ID"参数。通常情况下，此参数无需设置，系统会自动识别当前站点。
• 缓存更新：在后台修改联系方式后，如果前台页面没有立即更新，请务必清除系统缓存。您可以在安企CMS后台的左侧菜单中找到“更新缓存”功能。

通过上述步骤，您可以轻松地在安企CMS网站的任何模板位置（如页眉、页脚、联系我们页面或侧边栏）显示所需的联系方式，为您的用户提供便捷的沟通途径。

常见问题解答 (FAQ)

1. 我如何在安企CMS后台添加更多的联系方式字段，例如WhatsApp账号或企业地址详细信息？

您可以在安企CMS后台的“后台设置” -> “联系方式设置”页面进行自定义。页面下方有一个“自定义设置参数”区域。点击“添加”按钮，然后在“参数名”中输入您想要的字段名称（例如“WhatsApp”），在“参数值”中填写具体内容，并可选地添加“备注”。保存后，这个新的联系方式字段就可以在模板中通过{% contact with name="WhatsApp" %}这样的标签进行调用。

2. 我更新了后台的联系方式信息，但网站前台页面没有立即变化，这是为什么？

这通常是由于网站缓存导致的。安企CMS为了提高访问速度，会对页面内容进行缓存。当您在后台更新了联系方式这类全局配置时，需要手动清除缓存才能让前端页面显示最新的信息。请登录到安企CMS后台，找到左侧菜单的“更新缓存”选项，点击执行清除缓存操作。之后刷新网站页面，新的联系方式就应该能正常显示了。

3. 我想将微信二维码作为背景图显示在某个div元素上，模板代码应该怎么写？

要将微信二维码作为背景图，您首先需要通过contact标签获取到二维码的图片URL，然后将其作为CSS样式应用到目标元素上。示例如下：

{% contact wechatQrcode with name="Qrcode" %}
{% if wechatQrcode %}
<div class="wechat-bg-section" style="background-image: url('{{wechatQrcode}}'); background-size: cover; background-position: center;">
    <!-- 这里是您的其他内容 -->
    <p>扫码联系我们</p>
</div>
{% else %}
<p>暂无微信二维码</p>
{% endif %}

这段代码会先尝试获取微信二维码的URL。如果获取成功，它会创建一个div元素，并使用内联样式background-image将二维码设置为背景图。您可以根据需要调整CSS属性，如background-size和background-position来控制背景图的显示方式。