如何在AnQiCMS中设置联系方式，并在前台页面显示（如电话、地址、微信）？

在当今数字时代，一个网站的联系方式不仅是信息展示，更是企业与客户之间沟通的桥梁。清晰、易寻的联系信息能够有效提升客户信任度，促成业务转化。AnQiCMS（安企内容管理系统）深知这一点，为您提供了简洁高效的方式来设置和展示各类联系方式，无论是电话、地址，还是微信。

下面，就让我们一步步了解如何在AnQiCMS中配置和展示这些关键信息。

第一步：在后台设置您的联系方式

首先，我们需要将联系信息录入到AnQiCMS的后台系统中。这个过程非常直观。

1. 登录AnQiCMS后台： 使用您的管理员账号登录到AnQiCMS的管理界面。
2. 导航到联系方式设置： 在左侧的导航菜单中，找到【后台设置】，然后点击展开，您会看到【联系方式设置】这一项。点击进入，这里就是管理您网站所有联系信息的地方。

进入【联系方式设置】页面后，您会看到一些预设的常用字段，例如：

• 联系人： 通常用于称呼，如“王先生”或“客服团队”。
• 联系电话： 您希望客户拨打的电话号码。
• 联系地址： 您的公司或实体店铺的详细地址。
• 联系邮箱： 客户可以通过邮件联系您的地址。
• 微信号： 您的企业或个人微信账号。
• 微信二维码： 可以上传一个微信二维码图片，方便客户扫码添加。

您可以根据实际情况，在对应的输入框中填入您的信息。

自定义联系方式： 除了这些常用字段，AnQiCMS还提供了极大的灵活性，让您可以添加自定义的联系方式。比如，如果您希望展示WhatsApp号码、Facebook主页链接或其他的社交媒体账号，可以利用页面下方的“自定义设置参数”功能。 点击“新增自定义参数”，您会看到三个输入框：

• 参数名： 这是供模板调用的名称，建议使用英文，例如WhatsApp、FacebookLink。系统会自动将其转换为驼峰命名。
• 参数值： 填写对应的联系信息，比如WhatsApp号码或Facebook主页的完整URL。
• 备注： 这是一个内部说明，方便您和团队理解该参数的用途，它不会显示在前台。

填写完成后，记得点击页面底部的【保存】按钮，确保您的所有更改都已生效。

第二步：在前台页面展示您的联系方式

联系信息设置完毕后，下一步就是将它们呈现在网站的前端页面上。AnQiCMS采用类似Django模板引擎的简洁语法，通过特定的“标签”来轻松调用后台数据。

核心标签：contact

在AnQiCMS的模板文件中，您可以使用contact标签来获取之前在后台设置的联系方式。它的基本用法是：

{% contact 变量名称 with name="字段名称" %}

这里：

• 变量名称：是一个可选参数，用于将获取到的值存储在一个变量中，方便在模板中多次使用。
• 字段名称：这是必填参数，需要与您在后台【联系方式设置】中填写的字段名称（无论是预设的还是自定义的）完全匹配，例如Cellphone、Address、Wechat、Qrcode或者您自定义的WhatsApp。

下面是一些常见的展示示例：

1. 显示联系电话： 您可以在页脚或“联系我们”页面中添加电话信息，并使其可点击，方便手机用户直接拨号。

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

这里，rel="nofollow"属性有助于告诉搜索引擎此链接不传递权重，通常用于非内容性的链接。

2. 显示公司地址：

<p>
    地址：{% contact with name='Address' %}
</p>

3. 显示微信号：

<p>
    微信：{% contact with name='Wechat' %}
</p>

4. 显示微信二维码： 对于图片类型的联系方式，如微信二维码，您需要使用<img>标签来显示。同时，为了确保图片能正确渲染，推荐使用|safe过滤器。

{%- comment %} 先尝试获取二维码图片链接，并存储到 qrcode 变量中 {%- endcomment %}
{%- contact qrcode with name='Qrcode' %}
{%- if qrcode %} {%- comment %} 判断 qrcode 变量是否有值，有值才显示 {%- endcomment %}
<div class="wechat-qrcode">
    <img src="{{ qrcode|safe }}" alt="微信二维码" style="width: 100px; height: 100px;">
    <p>扫码添加微信</p>
</div>
{%- endif %}

这里我们首先尝试将二维码图片链接获取并赋值给qrcode变量。然后，通过{% if qrcode %}判断qrcode变量是否存在值，只有存在时才显示图片。|safe过滤器在这里是关键，它告诉模板引擎将字符串作为安全的HTML内容直接输出，避免了URL中的特殊字符被转义导致图片无法显示。

5. 显示自定义的WhatsApp链接： 如果您在后台设置了自定义参数名为WhatsApp，并填入了WhatsApp的聊天链接，可以这样调用：

{%- contact whatsappLink with name='WhatsApp' %}
{%- if whatsappLink %}
<p>
    WhatsApp: <a href="{{ whatsappLink }}" target="_blank" rel="nofollow">
        {% contact with name='WhatsApp' %}
    </a>
</p>
{%- endif %}

模板文件放置位置建议： 这些联系方式的展示代码通常会放在网站的公共部分，比如：

• bash.html 或 header.html / footer.html： 网站的页眉或页脚，确保每个页面都能显示。
• page/detail.html (或自定义单页面模板)： 创建一个专门的“联系我们”单页面，集中展示所有联系信息。

实战案例与技巧：构建一个完整的页脚联系信息块

让我们来看一个将多种联系方式整合到网站页脚的实战代码示例，这能让访问者一目了然地找到所需信息：

”`html