如何显示网站设置的联系人、电话、地址等联系方式？

在现代网站运营中，清晰地展示企业的联系方式是建立信任、方便用户沟通的关键一环。安企CMS（AnQiCMS）深知这一点，为您提供了直观且灵活的后台设置，让您可以轻松管理和展示网站的联系人、电话、地址等各项信息。本篇文章将详细介绍如何在安企CMS中设置并显示这些重要的联系信息。

一、在安企CMS后台配置您的联系方式

所有展现在网站前端的联系信息，首先都需要在安企CMS的后台进行统一管理。这确保了信息的一致性和更新的便捷性。

  1. 进入联系方式设置界面： 登录您的安企CMS后台管理系统。在左侧导航栏中，找到并点击“后台设置”，然后选择“联系方式设置”。
  2. 填写默认联系信息： 进入该界面后，您会看到一系列预设的联系信息字段，例如：
    • 联系人： 通常填写您的姓名或客服代表的称谓，如“李经理”、“客服小安”。
    • 联系电话： 您希望客户拨打的电话号码。
    • 联系地址： 您的公司或实体店铺的详细地址。
    • 联系邮箱： 供客户发送邮件咨询的邮箱地址。
    • 微信号： 您的微信个人号或公众号ID。
    • 微信二维码： 上传您的微信二维码图片，方便用户扫码添加。 您只需在相应的输入框中填入准确的信息即可。
  3. 利用自定义设置参数扩展： 除了上述默认字段，安企CMS还提供了强大的“自定义设置参数”功能。如果您有其他需要展示的联系方式，例如WhatsApp、Facebook主页链接、Twitter账号等，都可以通过这里进行添加。
    • 点击“添加自定义参数”，您可以指定“参数名”（例如WhatsApp、Facebook），这个名称将用于后续在模板中调用。
    • 在“参数值”中填写对应的联系信息或链接。
    • “备注”字段则可以帮助您记录该参数的用途，方便日后管理。

完成信息填写后，记得点击保存，以便这些数据能在前端模板中被调用。

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

安企CMS采用简洁的模板标签语法，让您无需编写复杂的代码，就能将后台设置的联系信息呈现在网站的各个位置。

要在网站前端显示联系信息，您主要会用到一个核心模板标签：{% contact %}。这个标签允许您根据后台设置的“参数名”来获取对应的值。

其基本用法是：{% contact with name="字段名称" %}。

以下是一些常见联系方式在模板中的调用示例：

  • 显示联系人姓名： 
    
<span>联系人：{% contact with name="UserName" %}</span>
  • 显示联系电话： 
    
<span>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></span>
    这里，我们不仅显示了电话号码，还通过tel:协议使其可点击拨号，并添加了rel="nofollow"属性。
  • 显示联系地址： 
    
<span>地址：{% contact with name="Address" %}</span>
  • 显示联系邮箱： 
    
<span>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span>
  • 显示微信号： 
    
<span>微信号：{% contact with name="Wechat" %}</span>
  • 显示微信二维码图片： 由于二维码是图片链接，为了正确显示图片，您需要将其作为<img>标签的src属性值，并且通常需要使用|safe过滤器，以防止图片链接中的特殊字符被转义而无法正常显示。 
    
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    或者，如果您想将二维码图片地址先存储在一个变量中再使用： 
    
{% contact qr_code_url with name="Qrcode" %}
{% if qr_code_url %}
    <img src="{{ qr_code_url }}" alt="微信二维码" />
{% endif %}
  • 显示自定义联系方式（以WhatsApp为例）： 如果您在后台添加了名为WhatsApp的自定义参数，您可以通过同样的方式调用： 
    
<span>WhatsApp：{% contact with name="WhatsApp" %}</span>

重要提示：

  • name参数的值必须与您在后台“联系方式设置”中填写的字段名称（无论是默认字段还是自定义参数名）保持一致。
  • 对于图片路径、HTML内容等，建议配合使用|safe过滤器，以确保内容能被浏览器正确解析显示。
  • 如果您启用了多站点功能，并且希望调用其他站点的联系信息，可以在{% contact %}标签中添加siteId参数，例如{% contact with name="Cellphone" siteId="2" %}。

三、将联系信息融入网站设计

联系信息通常会放置在网站的几个固定位置，以确保用户能随时找到：

  • 网站页头（Header）： 可以在导航栏附近或页头顶部区域显示联系电话或邮箱，方便快速联系。
  • 网站页脚（Footer）： 这是展示完整联系信息（包括地址、电话、邮箱、社交媒体链接等）的常见位置。
  • “联系我们”页面： 专门的联系页面可以集中展示所有详细联系方式，并可能包含地图、在线留言表单等。
  • 侧边栏或浮动按钮： 在一些网站上，您可能还会看到浮动的客服按钮或侧边栏，提供快速联系通道。

通过以上步骤，您就可以在安企CMS中灵活、高效地管理并展示您网站的联系信息，为用户提供更好的访问体验。

常见问题 (FAQ)

  1. 自定义的联系方式（例如：WhatsApp）如何在前端调用？ 您需要在安企CMS后台的“后台设置”->“联系方式设置”页面，点击“自定义设置参数”添加。例如，参数名填写为WhatsApp，参数值填写对应的WhatsApp号码或链接。然后在前端模板中，您可以使用 {% contact with name="WhatsApp" %} 来显示其值。
  2. 如果我的网站支持多语言，联系方式会跟着切换语言吗？ 安企CMS的联系方式设置是站点级别的，而非语言级别的。这意味着您设置的联系人、电话、地址等信息将是固定内容，不会因为网站语言的切换而自动翻译或改变。如果您需要为不同语言版本提供不同的联系方式，建议使用多站点功能，为每个语言版本创建一个独立站点，并在各自站点的后台设置不同的联系信息。
  3. 联系方式设置后，在哪里可以看到它生效？ 您可以在网站前端模板的任何位置调用这些联系信息。通常，它们会被放置在网站的页头、页脚，或者专门的“联系我们”页面中。在修改或添加联系信息后，访问网站前端页面（可能需要刷新浏览器缓存）即可看到更新后的内容。