在网站运营中，清晰准确地展示联系方式对于提升用户信任度、促进沟通交流至关重要。AnQiCMS 提供了一套便捷的后台设置和模板调用机制，让您能够轻松管理和展示这些关键信息。本文将详细介绍如何在 AnQiCMS 后台配置联系电话和地址，以及如何在网站模板中获取并灵活显示这些内容。
一、在 AnQiCMS 后台配置联系电话和地址
首先，我们需要在 AnQiCMS 的管理后台录入和管理联系信息。这部分操作非常直观。
登录 AnQiCMS 后台后，请导航至左侧菜单栏的“后台设置”选项，然后点击“联系方式设置”。
在联系方式设置页面，您会看到一系列预设的字段，例如：
- 联系人：通常是您希望对外公布的联系代表姓名。
- 联系电话：用于展示给客户拨打的电话号码。
- 联系地址：您的公司或办公室的具体位置。
- 联系邮箱：方便客户通过电子邮件进行沟通。
- 微信号 和 微信二维码：用于展示微信联系方式。
您只需在对应的输入框中填入您的联系电话和公司地址即可。除了这些基本信息，AnQiCMS 还允许您自定义更多的联系参数。例如，如果您需要展示一个 WhatsApp 号码，可以在该页面下方的“自定义设置参数”区域添加一个新的参数，设置其参数名（例如：WhatsApp）和参数值。
完成所有信息的填写或修改后，请务必点击页面下方的“保存”按钮，确保您的更改被成功保存到系统中。
二、在网站模板中获取和显示联系信息
当联系方式在后台配置完毕后，下一步就是将这些信息呈现在您的网站前台。AnQiCMS 的模板引擎基于 Go 语言开发，支持类似 Django 模板引擎的语法，使得在模板中调用后台数据变得非常方便。
AnQiCMS 提供了一个专门用于获取联系方式的模板标签：contact。通过这个标签，您可以根据后台设置的字段名称，准确地获取到所需的信息。
基本用法
contact 标签的基本使用格式是：{% contact 变量名称 with name="字段名称" %}。其中，“变量名称”是可选的，如果您想将获取到的数据存储到一个临时变量中以便后续处理，可以指定它；如果您只是想直接输出数据，则可以省略变量名称。name 参数是您在后台设置的字段名，例如 Cellphone、Address 或您自定义的参数名。
获取并显示联系电话
在您的模板文件（例如，页脚
partial/footer.html或联系我们页面page/contact.html）中，您可以使用Cellphone这个字段名来获取联系电话：<p>联系电话：<span>{% contact with name="Cellphone" %}</span></p>这样，后台设置的联系电话就会显示在
<span>标签内。获取并显示公司地址
类似地，要获取并显示公司地址，您可以使用
Address这个字段名：<p>公司地址：<span>{% contact with name="Address" %}</span></p>获取并显示自定义联系方式
如果您在后台自定义了其他联系方式，例如参数名为
WhatsApp的 WhatsApp 联系方式，获取方式也是一样的：<p>WhatsApp：<span>{% contact with name="WhatsApp" %}</span></p>这样，您后台配置的 WhatsApp 号码也将呈现在页面上。
完整示例
为了更好地展示，以下是一个包含联系电话和地址以及其他一些常用联系信息的模板代码片段：
<div class="footer-contact-info">
<h3>联系我们</h3>
<ul>
<li>
<strong>联系人：</strong>
<span>{% contact with name="UserName" %}</span>
</li>
<li>
<strong>联系电话：</strong>
<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">
<span>{% contact with name="Cellphone" %}</span>
</a>
</li>
<li>
<strong>公司地址：</strong>
<span>{% contact with name="Address" %}</span>
</li>
<li>
<strong>电子邮件：</strong>
<a href="mailto:{% contact with name="Email" %}">
<span>{% contact with name="Email" %}</span>
</a>
</li>
<!-- 假设您后台自定义了 WhatsApp 联系方式，参数名为 WhatsApp -->
<li>
<strong>WhatsApp：</strong>
<span>{% contact with name="WhatsApp" %}</span>
</li>
<!-- 如果有微信二维码，可以这样显示 -->
{% set qrcodeUrl = "" %}
{% contact qrcodeUrl with name="Qrcode" %} {# 将二维码图片URL存储到 qrcodeUrl 变量 #}
{% if qrcodeUrl %} {# 判断二维码URL是否存在 #}
<li>
<strong>微信二维码：</strong>
<img src="{{ qrcodeUrl }}" alt="微信二维码" class="contact-qrcode-img">
</li>
{% endif %}
</ul>
</div>
通过上述代码，您可以灵活地在网站上展示所有重要的联系信息。您可以将这段代码放置在网站的页脚 (partial/footer.html)、侧边栏 (partial/aside.html) 或专门的联系我们页面 (page/detail.html) 中，并通过 {% include "partial/footer.html" %} 等标签引用。
三、进一步的模板应用技巧
优雅处理空值： 在实际使用中，如果后台某个联系信息没有填写，直接调用可能会导致页面出现空白。为了提升用户体验，您可以使用 AnQiCMS 模板的
if逻辑判断标签来检查值是否存在。例如：{% set phone = "" %} {% contact phone with name="Cellphone" %} {# 尝试获取联系电话并存入 phone 变量 #} {% if phone %} {# 判断 phone 变量是否有值 #} <p>联系电话：<a href="tel:{{ phone }}" rel="nofollow">{{ phone }}</a></p> {% endif %}这样，只有当后台设置了联系电话时，这行内容才会在前台显示。
实现可点击拨号链接： 将电话号码直接显示固然重要，但如果能点击拨号，会更加方便。您可以通过
tel:协议来实现这一点，如上面的示例所示：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>当用户在移动设备上点击这个链接时，会自动触发拨号功能。
模板模块化与重用： 为了提高代码的维护性和复用性，强烈建议将所有联系方式的显示代码封装到一个独立的模板代码片段中（例如命名为
partial/contact_info.html）。然后，在您网站的页脚、侧边栏或其他任何需要显示联系信息的地方，只需使用{% include "partial/contact_info.html" %}标签即可引入。这样，将来需要修改联系信息显示样式时，只需修改一个文件，所有引用之处都会自动更新。
通过 AnQiCMS 的后台配置和灵活的模板标签，您可以轻松地管理并以美观高效的方式在网站上展示所有重要的联系信息，从而提升用户体验和企业形象。
常见问题 (FAQ)
Q1: 如果后台没有设置联系电话或地址，前台页面会显示什么？
A1: 如果您在模板中直接使用 {% contact with name="Cellphone" %} 这样的标签，但后台并未设置对应的值，那么前台页面在显示该位置时会是空白的。为了避免这种情况，建议使用 {% if %} 标签进行判断，只有当数据存在时才进行显示，如本文“优雅处理空值”部分的示例。
Q2: 我在哪里可以查看到所有预设的联系方式字段名称（如 Cellphone、Address）？
A2: 您可以在 AnQiCMS 的开发文档中找到 contact 标签的详细说明。具体来说，请查阅 tag-contact.md 文档，其中列出了 name 参数所有可用的字段名称，包括预设字段和可供自定义的社交媒体字段等。
**Q3: 我