在网站运营中，清晰、便捷地展示网站的联系电话和地址，是建立用户信任、促进沟通交流的关键一步。对于使用AnQiCMS的朋友们来说，系统提供了非常灵活和直观的方式来管理和展示这些重要的联系信息。本文将详细介绍如何在AnQiCMS的前端页面中显示网站的联系电话和地址。

第一步：在AnQiCMS后台录入联系方式

首先，我们需要确保网站的联系信息已经在后台正确录入。这是在前端显示这些信息的基础。

请登录AnQiCMS的后台管理界面，在左侧的导航栏中找到“后台设置”，然后点击进入“联系方式设置”页面。

在这个页面中，你会看到一系列预设的字段，比如“联系人”、“联系电话”、“联系地址”、“联系邮箱”、“微信号”以及“微信二维码”等。这些都是网站最常用的联系信息，你只需要在对应的输入框中填入你的网站或公司的实际信息即可。

如果你的网站有特殊的需求，例如除了常规电话外，还需要展示WhatsApp联系方式，或者其他自定义的联系信息，AnQiCMS的“联系方式设置”页面也支持添加自定义参数。你可以在页面下方的“自定义设置参数”区域，点击添加新的参数。例如，你可以添加一个参数名为“WhatsApp”，并在参数值中填入你的WhatsApp号码。系统在模板调用时，会将参数名自动转换为驼峰命名（即每个单词首字母大写，例如WhatsApp）。

完成信息填写后，记得点击页面底部的“保存”按钮，确保所有修改生效。

第二步：在前端模板文件中展示联系方式

当后台数据准备就绪后，下一步就是将这些信息呈现在网站的前端页面上。AnQiCMS的模板系统采用了类似Django的语法，其中有一个专门用于获取联系方式的强大标签——contact。

这个contact标签的使用方式非常直接，通过指定name参数，就能获取到你在后台“联系方式设置”中录入的对应字段值。

显示联系电话

要在网站页面上显示联系电话，你可以在模板文件中使用以下代码：

{% contact with name='Cellphone' %}

这条代码会直接输出你在后台“联系电话”字段中填写的值。为了提升用户体验，特别是移动端用户，我们通常会把电话号码做成可点击拨号的链接。你可以这样实现：

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

这里的href="tel:..."是一个标准的HTML属性，可以让移动设备用户直接点击拨打电话，rel="nofollow"则建议搜索引擎不要追踪此链接，这通常是SEO的**实践。

显示联系地址

显示联系地址也同样简单。你只需在模板中使用name='Address'参数即可：

地址：{% contact with name='Address' %}

调用自定义参数

如果你在后台设置了自定义参数，例如前面提到的WhatsApp，也可以使用contact标签来调用。为了更严谨地处理，可以先将其赋值给一个变量，并判断其是否存在，再决定是否显示：

{# 假设您在后台自定义了参数名为 'WhatsApp' #}
{% contact whatsappNumber with name='WhatsApp' %}
{% if whatsappNumber %}
<p>WhatsApp：{{ whatsappNumber }}</p>
{% endif %}

通过这种方式，只有当WhatsApp参数在后台有值时，前端页面才会显示相应内容。

放置在模板的哪个位置？

你通常会将这些联系信息放置在网站的公共部分，例如：

  • 页眉（Header）：在bash.html（如果你的模板有此文件，通常包含网站的公共头部）或其他头部模板文件中，让访客在任何页面都能快速找到联系方式。
  • 页脚（Footer）：在网站底部显示，这是最常见的做法。同样是在bash.html或专门的页脚模板文件中添加。
  • “联系我们”单页：如果你创建了一个专门的“联系我们”页面（通过“页面资源”下的“页面管理”创建），可以在该页面的内容模板（例如page/detail.html或自定义的page/contact-us.html）中，详细展示所有联系方式。

一个完整的示例代码片段可能如下所示，你可以根据自己的模板结构进行调整：

{# 假设这是你网站页脚或侧边栏的一部分 #}
<div class="site-footer-contact">
    <h3>联系我们</h3>
    <p>电话：<a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">{% contact with name='Cellphone' %}</a></p>
    <p>邮箱：<a href="mailto:{% contact with name='Email' %}" rel="nofollow">{% contact with name='Email' %}</a></p>
    <p>地址：{% contact with name='Address' %}</p>
    {% contact wechat with name='Wechat' %}
    {% if wechat %}
    <p>微信：{{ wechat }}</p>
    {% endif %}
    {% contact whatsappNumber with name='WhatsApp' %}
    {% if whatsappNumber %}
    <p>WhatsApp：{{ whatsappNumber }}</p>
    {% endif %}
</div>

小贴士

  • 模板文件编码：请确保你的模板文件统一使用UTF-8编码，否则可能导致页面显示乱码。
  • 样式调整：以上代码只负责内容的输出，具体的外观样式（字体、颜色、布局等）需要通过CSS进行调整，以保持与你网站整体设计风格的一致性。
  • 多站点管理：如果你使用了AnQiCMS的多站点功能，并且希望调用特定站点（而非当前站点）的联系信息，contact标签还支持siteId参数来指定站点ID，例如{% contact with name='Cellphone' siteId='2' %}。

通过AnQiCMS灵活的后台设置和强大的模板标签，展示网站的联系电话和地址变得轻而易举。希望这篇文章能帮助你更好地利用AnQiCMS，提升网站的用户体验和业务转化。

常见问题 (FAQ)

1. 为什么我在后台设置了联系方式，但在前端页面没有显示出来？

通常有几个原因：

  • 模板文件未添加对应的调用代码：请检查你想要显示联系信息的模板文件（如页脚或联系我们页面），是否已经按照本文介绍的方式，使用了{% contact ... %}标签来调用。
  • 后台设置未保存：确认在“联系方式设置”页面填写完信息后，是否点击了“保存”按钮。
  • 缓存问题：在某些情况下，浏览器或AnQiCMS的系统缓存可能导致更新未能及时显示。尝试清除浏览器缓存，或在AnQiCMS后台点击“更新缓存”功能。

2. 我想在不同的页面显示不同的联系电话，AnQiCMS能实现吗？