如何在模板中获取并显示后台设置的联系方式（如电话、邮箱、微信）？

在网站运营中，清晰地展示联系方式对于提升用户信任和促进互动至关重要。无论是咨询产品、寻求支持，还是进行商务合作，便捷的联系渠道都能大大提高转化率。安企CMS（AnQiCMS）深知这一点，为您提供了灵活且强大的功能，让您能轻松地在网站模板中获取并显示后台设置的各种联系信息。

接下来，我们就一起看看如何在安企CMS中，把后台设置的联系方式，比如电话、邮箱、微信等，自然流畅地呈现在您的网站上。

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

首先，您需要确保所有的联系信息都已经在安企CMS的后台中录入。这是一个集中管理您网站重要信息的地方，方便您随时更新和维护。

登录您的安企CMS后台，您会发现一个名为“后台设置”的菜单。点击进入后，里面有一个专门的选项叫做“联系方式设置”。

在这里，系统已经为您预设了一些常用的联系字段，比如：

  • 联系人
  • 联系电话
  • 联系地址
  • 联系邮箱
  • 微信号
  • 微信二维码
  • QQ
  • 以及一些社交媒体如 WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube 等。

您只需要在这些对应的输入框中填入您的实际信息即可。例如，在“联系电话”字段中填入您的公司电话，在“联系邮箱”中填入客服邮箱，然后上传您的微信二维码图片。

如果现有的字段无法满足您的需求，比如您想添加一个“企业客服热线”或者“在线咨询链接”，您还可以利用底部的“自定义设置参数”功能。在这里，您可以自定义“参数名”（这个名字将用于模板调用，建议使用英文或拼音，如CustomerHotline），然后填写“参数值”（也就是您希望显示的内容），并添加“备注”方便日后识别。

完成所有信息的填写和调整后，请务必点击保存，这样您的联系方式就成功存储在安企CMS中了。

第二步：在模板中调用并显示

当您的联系方式已经在后台设置妥当，接下来就是在网站模板中将它们显示出来。安企CMS提供了简洁的模板标签，让这个过程变得非常容易。

安企CMS的模板遵循类似Django模板引擎的语法，变量使用双花括号{{变量}}，标签使用单花括号和百分号{% 标签 %}。对于调用后台设置的联系方式，我们主要会用到一个非常方便的标签：contact。

contact标签的基本用法是：{% contact 变量名称 with name="字段名称" %}。其中，“变量名称”是可选的，如果您不定义，标签会直接输出字段的值；如果您定义了变量名称，就可以用这个变量在后续代码中调用。而name参数，就是您在后台设置时看到的那些字段名称（如Cellphone、Email、Wechat、Qrcode等），以及您自定义的参数名。

让我们通过几个具体的例子来了解如何使用它：

1. 显示联系电话

您可能希望在网站页脚或者“联系我们”页面显示公司的联系电话。

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

这里，href="tel:..." 是一个HTML标准，点击后可以直接在手机上拨打电话，rel="nofollow" 则是对搜索引擎友好的一种实践。

2. 显示联系邮箱

同样地，显示您的企业邮箱也很简单。

<p>联系邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name='Email' %}</a></p>

mailto:链接可以让用户点击后直接打开邮件客户端发送邮件。

3. 显示微信号

如果您的业务需要通过微信联系，可以直接显示微信号。

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

4. 显示微信二维码图片

对于微信二维码，您需要将其作为图片的src属性来显示。

<div class="wechat-qrcode">
    <img src="{% contact with name='Qrcode' %}" alt="微信二维码" />
    <p>扫码添加微信</p>
</div>

5. 显示您自定义的联系方式

如果您在后台自定义了一个名为CustomerHotline的参数，用于显示客服热线，那么在模板中调用它也一样方便：

<p>客服热线：{% contact with name='CustomerHotline' %}</p>

6. 整合显示多种联系方式

通常，我们会在网站的页脚或专门的“联系我们”页面，集中展示多种联系方式。您可以将上述调用方式组合起来，创建一个清晰的联系信息区域。

<div class="contact-info">
    <h4>联系我们</h4>
    <ul>
        <li>电话：<a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">{% contact with name='Cellphone' %}</a></li>
        <li>邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name='Email' %}</a></li>
        <li>微信：{% contact with name='Wechat' %}</li>
        {%- if contactWhatsapp = {% contact with name='WhatsApp' %} %} {# 检查WhatsApp是否存在 #}
            <li>WhatsApp：<a href="https://wa.me/{% contact with name='WhatsApp' %}" target="_blank">{% contact with name='WhatsApp' %}</a></li>
        {%- endif %}
    </ul>
    {%- if contactQrcode = {% contact with name='Qrcode' %} %} {# 检查微信二维码是否存在 #}
    <div class="wechat-qrcode-container">
        <img src="{{ contactQrcode }}" alt="微信二维码" />
        <p>扫码添加微信</p>
    </div>
    {%- endif %}
</div>

这里我们使用了{%- if ... %}进行判断，确保只有当后台设置了相应联系方式时才会在前台显示，避免出现空白或错误链接，同时也让代码更加健壮。{%- endif %}中的-符号是为了去除标签产生的多余空行，使代码渲染更整洁。

实用小贴士

  • 放置位置的选择：网站的页脚、头部导航、侧边栏或独立的“联系我们”页面都是展示联系方式的理想位置。根据您网站的设计和用户习惯，选择最容易被访问到的地方。
  • 多站点管理：如果您使用安企CMS的多站点功能管理多个网站，并且希望调用某个特定站点的联系方式，可以在contact标签中添加siteId="站点ID"参数，如 {% contact with name='Cellphone' siteId="2" %}，这样就可以精准获取不同站点的联系信息了。
  • 实时更新：安企CMS的后台设置和前端显示是紧密关联的。当您在后台修改了联系方式后，前端页面通常会立即更新，无需进行复杂的缓存清理操作，除非您启用了特殊的静态页面缓存策略。
  • 易用性与一致性：保持您的联系信息在全站范围内的一致性，这有助于建立品牌信誉。同时，确保这些信息易于用户查找和使用，是提升用户体验的关键。

通过安企CMS提供的灵活设置和强大模板标签，管理和展示您的网站联系方式变得前所未有的简单和高效。

常见问题 (FAQ)

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

这通常是以下几个原因造成的：

  • 模板标签未添加或使用错误： 请检查您的模板文件中是否已经正确添加了{% contact with name="字段名称" %}标签，并且name参数与后台设置的字段名称完全一致（包括大小写）。
  • 后台设置未保存： 确保您在后台“联系方式设置”页面修改信息后