如何在AnQiCMS模板中调用并显示网站的联系方式信息？

在AnQiCMS模板中轻松调用和显示网站联系方式

AnQiCMS作为一款高效、灵活的内容管理系统，致力于帮助企业和内容运营团队轻松管理网站内容。其强大的模板引擎支持，让网站开发者能够以直观的方式，将后台配置的数据展现在前端页面上。今天，我们就来深入了解如何在AnQiCMS模板中，便捷地调用并显示网站的各项联系方式信息，让您的访客能第一时间与您取得联系。

一、后端配置：设置网站联系方式

在AnQiCMS中，网站的联系方式信息都统一在后台进行管理。这大大简化了内容维护的流程，无需修改代码就能更新联系信息。

您可以在后台导航菜单中找到“后台设置”，然后点击“联系方式设置”。

这里提供了网站主要的联系方式字段，例如：

• 联系人
• 联系电话
• 联系地址
• 联系邮箱
• 微信号
• 微信二维码

您可以根据实际情况，逐一填写这些信息。AnQiCMS还非常贴心地支持更多社交媒体联系方式，例如QQ、WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube等。

如果您有额外的需求，比如您的网站需要展示一个Telegram联系方式，而默认列表中没有，AnQiCMS允许您自定义设置参数。您只需点击“自定义设置参数”区域的“添加”按钮，输入一个“参数名”（例如Telegram），并填入对应的“参数值”（例如您的Telegram账号或链接），再添加一个简短的备注说明其用途即可。AnQiCMS的模板系统会自动将您输入的参数名转换为驼峰命名法（即每个单词首字母大写，中间无空格），方便在模板中调用。

完成所有联系方式的填写和自定义设置后，别忘了点击保存，确保您的更改生效。

二、前端模板：灵活调用联系方式信息

配置好后台信息后，接下来我们就可以在网站模板中轻松调用这些数据了。AnQiCMS使用类似Django的模板引擎语法，通过特定的标签就能获取到您在后台设置的联系方式。

核心的模板标签是 contact。它的基本使用方式是 {% contact 变量名称 with name="字段名称" %}。其中，“变量名称”是一个可选的参数，如果您设置了，就可以通过这个变量名来引用获取到的数据；如果不设置，标签会直接输出字段的值。name 参数则是您想调用的具体联系方式字段。

接下来，我们通过具体的例子来看看如何调用：

1. 调用基础联系信息

假设您想在网站页脚显示联系电话、邮箱和地址，您可以这样编写：

<div class="contact-info">
    <p>联系电话：{% contact with name="Cellphone" %}</p>
    <p>电子邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
    <p>公司地址：{% contact with name="Address" %}</p>
</div>

在这个例子中，{% contact with name="Cellphone" %} 会直接输出您在后台填写的联系电话。对于邮箱，我们还额外用 <a href="mailto:..."> 标签包裹起来，让访客可以直接点击发送邮件，提升用户体验。

2. 调用社交媒体链接

AnQiCMS内置了多种社交媒体的字段。如果您在后台填写了Facebook主页链接，在模板中可以这样调用：

<div class="social-links">
    {% contact facebookLink with name="Facebook" %}
    {% if facebookLink %}
        <a href="{{ facebookLink }}" target="_blank" rel="nofollow">
            <img src="/public/static/images/facebook-icon.png" alt="Facebook">
        </a>
    {% endif %}

    {# 类似的，如果需要调用Twitter #}
    {% contact twitterLink with name="Twitter" %}
    {% if twitterLink %}
        <a href="{{ twitterLink }}" target="_blank" rel="nofollow">
            <img src="/public/static/images/twitter-icon.png" alt="Twitter">
        </a>
    {% endif %}
</div>

这里我们使用了 {% contact 变量名称 with name="字段名称" %} 这种带变量名称的写法，并结合 {% if ... %} 逻辑判断，只有当后台设置了相应的链接时，才会显示社交媒体图标和链接，避免了空链接的出现。rel="nofollow" 属性也通常用于社交媒体链接，对SEO更加友好。

3. 调用自定义联系方式

还记得我们之前在后台添加的“Telegram”自定义参数吗？在模板中调用它同样简单直观：

<div class="custom-contact">
    {% contact telegramInfo with name="Telegram" %}
    {% if telegramInfo %}
        <p>Telegram：<a href="{{ telegramInfo }}" target="_blank">点击添加Telegram</a></p>
    {% endif %}
</div>

请注意，name 参数的值与您在后台“自定义设置参数”中填写的“参数名”是对应的，并且会自动转换为驼峰命名。例如，您在后台参数名填写 Telegram，模板中就使用 name="Telegram" 来调用。

4. 调用微信二维码

如果您的网站需要展示微信二维码，让访客扫码添加，可以这样调用：

<div class="wechat-qrcode">
    {% contact qrcodeImage with name="Qrcode" %}
    {% if qrcodeImage %}
        <p>微信扫码添加：</p>
        <img src="{{ qrcodeImage }}" alt="微信二维码" style="width: 120px; height: 120px;">
    {% endif %}
</div>

三、优化显示效果与用户体验

仅仅是调用并显示信息可能还不够，我们可以进一步优化，让这些联系方式更实用：

• 电话号码可点击： 使用 <a href="tel:号码"> 标签，让移动设备用户可以直接点击拨打电话。
• 邮箱可发送： 使用 <a href="mailto:邮箱地址"> 标签，方便用户直接通过邮件客户端联系。
• 图标与文字结合： 对于社交媒体，结合小图标和文字描述，既美观又清晰。
• 统一布局： 考虑将所有联系信息集中放置在页脚（footer）、侧边栏（sidebar）或独立的“联系我们”页面，保持网站整体的整洁和专业。

通过AnQiCMS灵活的模板标签和后台设置，您可以轻松地管理和展示网站的各项联系方式。无论是内置字段还是自定义参数，都能在几行简单的模板代码中实现，大大提高了网站内容的管理效率和可维护性。希望这份指南能帮助您更好地利用AnQiCMS，构建出更加完善和用户友好的网站。

常见问题 (FAQ)

1. 为什么我按照步骤操作了，但前台没有显示联系方式？

这通常有几个原因。首先，请确保您在AnQiCMS后台的“联系方式设置”中，对应字段已填写并点击了“保存”。其次，检查您的模板代码中contact标签的name参数是否与您要调用的字段名称（包括大小写）完全匹配。最后，AnQiCMS系统有缓存机制，有时您可能需要刷新一下浏览器缓存，或者在后台点击“更新缓存”来确保最新的更改被加载。

2. 我除了默认的联系方式，还想添加其他联系方式，比如Telegram，应该怎么操作？

AnQiCMS支持自定义联系方式。您可以在“联系方式设置”页面的底部找到“自定义设置参数”区域。点击“添加”按钮，在“参数名”中输入Telegram（或您想要的任何英文名称），在“参数值”中填入您的Telegram账号或链接，并添加备注。保存后，在模板中您就可以使用 {% contact with name="Telegram" %} 来调用这个自定义的Telegram信息了。

3. 我的网站是多站点模式，能否调用其他站点的联系方式？

可以的。AnQiCMS的contact标签支持siteId参数。如果您在多站点管理中创建了多个站点，每个站点都有一个唯一的ID。您可以在contact标签中指定siteId来调用特定站点的联系方式，例如：`{% contact