如何获取并显示网站后台配置的联系方式（如电话、地址、社交媒体链接）？

在网站运营中，清晰、便捷地展示企业的联系方式是至关重要的，它不仅提升了客户信任度，也是用户获取服务、进行咨询的直接途径。安企CMS（AnQiCMS）作为一个功能强大的内容管理系统，提供了直观的后台配置选项和灵活的模板调用机制，让您能够轻松管理并展示这些信息。

接下来，我们将一同探索如何在AnQiCMS中配置并显示您的网站联系方式，包括电话、地址、社交媒体链接等。

第一部分：在AnQiCMS后台配置联系方式

AnQiCMS将网站的基础信息管理集中于“后台设置”模块，其中就包含了“联系方式设置”。这是您统一管理所有对外联系信息的入口。

1. 进入联系方式设置

登录您的AnQiCMS后台管理界面后，请在左侧导航栏中找到“后台设置”，然后点击展开，选择“联系方式设置”。进入这个页面，您会看到一系列预设的联系信息字段。

2. 填写核心联系信息

在“联系方式设置”页面，您可以根据实际情况填写以下默认字段：

• 联系人：例如“王先生”或“客服团队”。
• 联系电话：您的客服电话或业务咨询电话。
• 联系地址：公司的详细地址，方便客户线下访问或邮寄。
• 联系邮箱：用于接收邮件咨询的电子邮箱。
• 微信号：如果您的企业使用微信进行客户服务，可以填写微信号。
• 微信二维码：上传您的微信客服二维码图片，方便用户扫码添加。

除了上述常用信息，AnQiCMS还预设了主流的社交媒体平台链接字段，如QQ、WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube等。您可以根据您的业务需求和目标客户群体，选择性地填写这些平台的链接。

3. 添加自定义联系方式（按需扩展）

如果默认提供的字段未能涵盖您所有的联系方式需求，例如您希望添加一个特定的即时通讯工具链接或某个不常见的社交平台，AnQiCMS同样支持您自定义添加。

在“联系方式设置”页面下方，通常会有一个“自定义设置参数”的区域。在这里，您可以：

• 参数名：输入一个具有标识性的英文名称，例如LineId或TelegramLink。这个参数名将是您在网站模板中调用此信息的关键标识。系统会自动将其转换为驼峰命名法（如lineId），方便模板调用。
• 参数值：填写对应的具体联系信息，如您的Line ID或Telegram群组链接。
• 备注：为这个自定义字段添加简短说明，帮助您或其他管理员理解其用途。

通过这种方式，AnQiCMS确保了您网站所有联系信息都能在后台集中管理，并能灵活扩展，以适应不断变化的业务需求。

第二部分：在网站模板中获取并显示联系方式

配置好后台信息后，下一步就是在您的网站前台模板中调用并展示这些数据。AnQiCMS的模板系统采用类似Django的语法风格，通过特定的标签（Tag）来获取后台数据。

1. 核心标签：contact

在AnQiCMS的模板文件中（通常是位于 /template 目录下的 .html 文件），您可以使用 contact 标签来获取您在后台“联系方式设置”中配置的各项信息。

contact 标签的基本使用方式是：{% contact 变量名称 with name="字段名称" %}。其中：

• 变量名称：是可选的，您可以为获取到的联系信息指定一个变量名，方便在后续代码中使用。如果不指定，则 contact 标签会直接输出字段的值。
• name：这是最关键的参数，它需要与您在后台配置的字段名称（默认字段或自定义字段的“参数名”）相对应。

2. 显示常用联系方式

让我们通过具体的代码示例，了解如何在模板中显示这些信息：

• 显示联系电话

  <p>联系电话：{% contact with name="Cellphone" %}</p>
  {# 结合tel:协议，用户点击可直接拨号 #}
  <p><a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">拨打电话：{% contact with name="Cellphone" %}</a></p>
  

• 显示联系地址

  <p>公司地址：{% contact with name="Address" %}</p>
  

• 显示联系邮箱

  <p>业务邮箱：{% contact with name="Email" %}</p>
  {# 结合mailto:协议，用户点击可直接发送邮件 #}
  <p><a href="mailto:{% contact with name="Email" %}" rel="nofollow">发送邮件：{% contact with name="Email" %}</a></p>
  

• 显示微信号

  <p>客服微信：{% contact with name="Wechat" %}</p>
  

• 显示微信二维码 当您需要显示图片链接（如微信二维码）时，请注意使用 |safe 过滤器。这是因为AnQiCMS模板系统默认会对输出的内容进行安全转义，以防止跨站脚本攻击（XSS）。对于HTML代码或图片URL等需要直接解析的内容，|safe 过滤器能确保其正确显示。

  {% contact wechatQrcode with name="Qrcode" %}
  {% if wechatQrcode %} {# 检查是否存在二维码图片URL #}
      <p>微信扫码：<img src="{{ wechatQrcode | safe }}" alt="微信二维码" style="width: 100px; height: 100px;"></p>
  {% endif %}
  

• 显示社交媒体链接 以Facebook为例，其他社交媒体（如Twitter、Linkedin、Instagram等）的调用方式类似，只需将name参数替换为对应的字段名即可。

  {% contact facebookLink with name="Facebook" %}
  {% if facebookLink %}
      <p>关注我们：<a href="{{ facebookLink }}" target="_blank" rel="nofollow">Facebook</a></p>
  {% endif %}
  

3. 显示自定义联系方式

如果您在后台添加了自定义联系方式，例如LineId，您也可以通过contact标签来调用：

{% contact lineId with name="LineId" %}
{% if lineId %}
    <p>Line ID：<a href="https://line.me/ti/p/~{{ lineId }}" target="_blank" rel="nofollow">{{ lineId }}</a></p>
{% endif %}

请注意，对于像Line ID这样的值，如果它本身不是一个完整的URL，您可能需要手动构建一个可点击的链接，就像上面示例中所示。

4. 优化显示体验

为了确保网站界面的整洁和用户体验，建议在模板中加入条件判断，只有当某个联系方式有值时才显示，避免出现空白或不完整的信息：

”`twig {# 综合示例：显示所有可用联系信息 #}

<h3>联系我们</h3>
{% contact userName with name="UserName" %}
{% if userName %}<p>联系人：{{ userName }}</p>{% endif %}

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

{% contact address with name="Address" %}
{% if address %}<p>地址：{{ address }}</p>{% endif %}

{% contact email with name="Email" %}
{% if email %}<p>邮箱：<a href="mailto:{{ email }}" rel="nofollow">{{ email }}</a></p>{% endif %}

{% contact wechat with name="Wechat" %}
{% if wechat %}<p>微信：{{ wechat }}</p>{% endif %}

{% contact wechatQrcode with name