如何在安企CMS模板中调用和展示网站的联系方式信息?

在网站运营中,清晰、便捷地展示网站的联系方式信息至关重要。无论是为了客户咨询、合作洽谈,还是提升品牌信任度,准确的联系方式都能发挥关键作用。AnQiCMS作为一个内容管理系统,充分考虑到了这一需求,提供了直观且灵活的方式来管理和调用网站的联系方式信息。

后台设置联系方式信息

首先,所有需要展示的联系方式信息都需在AnQiCMS的后台进行统一配置。这确保了信息的一致性,也方便后续的集中修改和管理。

进入后台管理界面后,您会发现左侧导航栏有一个“后台设置”选项,点击进入后,可以看到一个名为“联系方式设置”的子菜单。在这里,AnQiCMS提供了一系列常用的联系方式字段供您填写,例如:

  • 联系人: 通常用于显示一个对外联系的姓名或称谓,如“王先生”或“客服团队”。
  • 联系电话: 网站主要的咨询电话或客服热线。
  • 联系地址: 公司的详细地址或办公地点。
  • 联系邮箱: 对外服务的电子邮箱地址。
  • 微信号: 方便用户添加微信进行沟通。
  • 微信二维码: 可上传图片,供用户扫码添加。

AnQiCMS的强大之处在于其高度的灵活性。如果预设的字段无法满足您的特定需求,例如您需要展示其他社交媒体联系方式,可以在“自定义设置参数”区域新增参数。例如,如果您的业务需要展示WhatsApp联系方式,您可以在该区域新增一个参数,将其“参数名”设置为WhatsApp(建议使用英文字母,系统会自动转换为驼峰命名法,如whatsapp会变为WhatsApp),并在“参数值”中填入您的WhatsApp号码或链接。这样,您就可以根据业务需求无限扩展联系方式的种类。

在模板中调用和展示联系方式

一旦后台联系方式配置完成,接下来就是如何在网站前端模板中调用并展示这些信息了。AnQiCMS为此提供了一个专门的标签:{% contact ... %}

这个标签的核心在于其name属性,您可以通过它指定要调用的具体联系方式字段。以下是一些常见联系方式的调用示例:

  1. 调用联系电话: 如果想在模板中显示后台设置的联系电话,可以使用:

    电话:{% contact with name="Cellphone" %}
    

    这会直接输出您在后台“联系电话”字段中填写的值。

  2. 调用联系邮箱: 同样地,调用联系邮箱的方式如下:

    邮箱:{% contact with name="Email" %}
    
  3. 调用联系地址: 显示详细地址信息:

    地址:{% contact with name="Address" %}
    
  4. 调用微信二维码图片: 如果后台上传了微信二维码图片,您可以在模板中将其作为图片的src属性来展示:

    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    
  5. 调用自定义联系方式(例如WhatsApp): 对于您在后台自定义的WhatsApp字段,调用方式与内置字段类似:

    WhatsApp:{% contact with name="WhatsApp" %}
    

为了更灵活地使用或进行复杂逻辑处理,您还可以将调用的结果赋值给一个自定义变量。例如,将联系电话赋值给myPhone变量,再进行后续操作:

{% contact myPhone with name="Cellphone" %}
我们的热线电话是:{{ myPhone }},欢迎致电。

对于运营多站点的用户,如果需要调用其他站点的联系方式,可以通过siteId参数指定站点ID,但这在大多数单站点情况下无需考虑。

实践建议与技巧

在使用这些联系方式信息时,有一些实用的建议可以帮助您提升用户体验和网站专业度:

  • 电话号码可点击: 将电话号码包裹在<a>标签中,并使用tel:协议,方便移动设备用户直接点击拨号:
    
    <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>
    
  • 邮箱地址可点击: 类似地,邮箱地址可以使用mailto:协议:
    
    <a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a>
    
  • 合理布局与样式: 确保联系方式在页面的页眉、页脚、侧边栏或专门的“联系我们”页面中都能良好显示,并保持设计风格与网站整体一致。
  • 响应式设计: 尤其对于电话号码和二维码,应确保在不同设备(PC、手机、平板)上都能清晰可见且易于操作。

通过AnQiCMS的“联系方式设置”功能及其强大的模板标签,您可以非常便捷地在网站上展示各种联系信息,不仅提升了网站的专业度,也为用户提供了更加流畅和便利的沟通渠道。

常见问题 (FAQ)

Q1:我自定义的联系方式字段名称可以随意命名吗?例如“我的电话号码”? A1:在后台“联系方式设置”中添加自定义参数时,虽然“参数名”可以输入中文,但我们强烈建议使用英文字母、数字和下划线的组合,例如MyPhoneNumber。系统会自动将其转换为驼峰命名法进行存储和调用。使用英文命名能更好地兼容模板解析,避免潜在问题。

Q2:我在后台设置了新的联系方式,但是网站前台并没有显示,是怎么回事? A2:这通常是因为您在模板中没有正确调用该字段,或者模板中调用了但被CSS样式隐藏了。请检查您的模板文件中是否使用了正确的{% contact with name="您设置的参数名" %}标签,并确保标签的name属性值与您在后台设置的“参数名”完全一致(注意大小写)。此外,也请检查浏览器开发者工具,看看该元素是否被CSSdisplay: none;等属性隐藏。

Q3:如果我想在网站上展示Facebook、Twitter、Instagram等社交媒体的链接,AnQiCMS支持吗? A3:是的,AnQiCMS的“联系方式设置”除了常规的联系信息外,也内置了Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube等主流社交媒体的字段,您可以直接在后台填写相应的链接或ID。在模板中,同样通过{% contact with name="Facebook" %}{% contact with name="Twitter" %}等标签进行调用即可。