如何在AnQiCMS模板中调用后台添加的自定义联系方式字段？

安企CMS模板中调用自定义联系方式字段：从后台配置到前端展现的完整指南

作为一名资深的网站运营专家，我深知一套灵活、高效的内容管理系统对企业网站的重要性。AnQiCMS 以其强大的自定义能力和对SEO的友好性，在众多CMS中脱颖而出。它不仅能帮助我们轻松管理内容，更能通过其灵活的模板机制，将后台配置的各种信息无缝对接至网站前端。今天，我们就来深入探讨一个非常实用的场景：如何在AnQiCMS模板中调用后台添加的自定义联系方式字段。

在当今瞬息万变的商业环境中，网站的联系方式不再仅仅局限于传统的电话和邮箱。随着社交媒体和即时通讯工具的普及，WhatsApp、Telegram、Line、Skype等多种联系方式成为了企业与客户沟通的重要桥梁。AnQiCMS深知这一需求，提供了极其灵活的自定义字段功能，让您可以根据实际业务和目标受众，轻松添加这些个性化的联系信息。

第一步：在AnQiCMS后台配置自定义联系方式字段

首先，我们需要在AnQiCMS的后台完成自定义联系方式的设置。这就像为您的网站沟通渠道打下坚实的基础。

  1. 登录后台，定位到联系方式设置： 打开您的AnQiCMS管理后台，在左侧导航菜单中找到 “后台设置”，然后点击进入 “联系方式设置” 页面。

  2. 默认字段与自定义区域： 在这个页面，您会看到一些AnQiCMS预设的联系方式字段，比如“联系人”、“联系电话”、“联系地址”、“联系邮箱”等。这些都是我们常用且必不可少的信息。而页面的下方，有一个非常关键的区域，名为 “自定义设置参数”。这正是我们施展魔法，添加个性化联系方式的地方。

  3. 添加您的自定义字段： 点击“添加”按钮，您会看到三个输入框：

    • 参数名： 这是至关重要的一个字段，它将作为您在模板中调用此自定义联系方式的唯一标识。强烈建议使用英文，并采用驼峰命名法（CamelCase），例如 WhatsApp、WeChatOfficial、SkypeID 等，这样能保证在模板调用时的清晰性和一致性。避免使用中文或特殊字符。
    • 参数值： 在这里填写您实际的联系信息，比如您的WhatsApp号码 +1234567890，或Telegram用户名 @YourTelegramID。
    • 备注： 这是一个可选字段，用于简单描述这个自定义参数的用途，方便您日后管理和理解。例如，您可以填写“企业WhatsApp商务号码”。

    以添加WhatsApp联系方式为例：

    • 参数名：WhatsApp
    • 参数值：+86 13812345678
    • 备注：客户服务WhatsApp热线

    完成填写后，点击保存，您的自定义联系方式字段就成功添加到后台了。

第二步：在AnQiCMS模板中调用自定义字段

后台配置完成后，接下来就是将这些信息呈现在网站前端，让您的客户能够看到并使用。AnQiCMS的模板引擎提供了简洁而强大的contact标签来实现这一目标。

  1. 认识 contact 标签： 在AnQiCMS的模板体系中，contact 标签是专门用来调用联系方式信息的。它的基本使用格式是 {% contact 变量名称 with name="字段名称" %}。其中，字段名称就是您在后台“联系方式设置”中填写的“参数名”。

  2. 直接输出自定义字段： 如果您只是想直接在模板的某个位置显示自定义联系方式的值，可以直接使用 contact 标签并指定 name 参数。

    例如，要显示您刚才在后台添加的WhatsApp号码：

    <p>我们的WhatsApp热线：{% contact with name="WhatsApp" %}</p>

  3. 将自定义字段赋值给变量再使用： 在某些复杂的场景下，您可能希望先将联系方式的值存储到一个变量中，然后再进行判断、拼接或循环操作。这时，您可以在 contact 标签中定义一个变量名。

    例如，将WhatsApp号码赋值给 whatsappNumber 变量：

    {%- contact whatsappNumber with name="WhatsApp" %}
{%- if whatsappNumber %} {# 判断变量是否存在且有值 #}
    <p>立即通过WhatsApp联系我们: <a href="https://wa.me/{{ whatsappNumber }}">{{ whatsappNumber }}</a></p>
{%- else %}
    <p>暂无WhatsApp联系方式</p>
{%- endif %}

    这里我们使用了 {%- ... %} 来移除标签周围的空白符，让代码更整洁。同时，通过 if 语句判断变量 whatsappNumber 是否有值，这是一种良好的编程习惯，可以避免在没有配置该字段时出现空白内容。

  4. 多站点环境下的调用： 如果您管理着多个AnQiCMS站点，并且需要调用特定站点的联系信息，可以使用 siteId 参数。

    {# 调用站点ID为2的WhatsApp号码 #}
<p>分站2的WhatsApp热线：{% contact with name="WhatsApp" siteId="2" %}</p>

    通常情况下，如果您只在一个站点内工作，或者希望调用当前站点的联系方式，则无需指定 siteId。

实用案例：网站页脚联系信息展示

让我们把这些知识点融会贯通，构建一个网站页脚的联系信息展示区域。这个区域既包含默认字段，也包含我们自定义的WhatsApp。

<footer class="site-footer">
    <div class="container">
        <div class="contact-info">
            <h3>联系我们</h3>
            <p>联系人：{% contact with name="UserName" %}</p>
            <p>电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>
            <p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
            <p>地址：{% contact with name="Address" %}</p>

            {# 调用自定义WhatsApp字段 #}
            {%- contact whatsappNumber with name="WhatsApp" %}
            {%- if whatsappNumber %}
            <p>
                <img src="/static/images/whatsapp-icon.png" alt="WhatsApp" style="width:24px; height:24px; vertical-align: middle; margin-right: 5px;">
                WhatsApp: <a href="https://wa.me/{{ whatsappNumber }}" target="_blank">{{ whatsappNumber }}</a>
            </p>
            {%- endif %}

            {# 您也可以在此处添加其他自定义字段，例如WeChatOfficial #}
            {%- contact wechatOfficial with name="WeChatOfficial" %}
            {%- if wechatOfficial %}
            <p>微信公众号: {{ wechatOfficial }}</p>
            {%- endif %}
        </div>
        <div class="copyright-info">
            <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
            <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
        </div>
    </div>
</footer>

在这个例子中，我们不仅调用了预设的联系方式，还优雅地将后台自定义的 WhatsApp 和 WeChatOfficial 字段展示出来。当这些自定义字段在后台有值时，它们就会在前台显示；如果后台未配置，则这部分内容不会渲染，确保了页面的整洁性。

小结与**实践

通过AnQiCMS灵活的后台配置和强大的模板标签功能，您可以轻松管理和展示个性化的联系方式，无论是国内的微信、QQ，还是国际的WhatsApp、Telegram，都能做到无缝对接。这种高度的可定制性，无疑为网站运营带来了极大的便利和扩展空间。

为了更好地利用这一功能，这里有几点建议：

  • 清晰的参数命名： 为“参数名”选择清晰、有意义的英文名称，避免歧义，便于后期维护和团队协作。
  • 内容测试： 在修改模板后，务必在不同浏览器和设备上进行测试，确保所有联系方式都能正确显示和点击。
  • 多语言考量： 对于多语言站点，您可能需要结合AnQiCMS的多语言功能，为不同语言的网站配置对应的联系方式，或者在自定义字段的值中包含多语言文本，并通过模板逻辑进行切换。

AnQiCMS不仅是一个内容发布的工具，更是您内容营销和全球化布局的得力助手。掌握这些调用技巧，将让您的网站更具表现力，更能贴近用户需求。

常见问题 (FAQ)

  1. Q: 我在后台设置了自定义联系方式字段，但在模板中调用后没有显示任何内容，是什么原因？ A: 请检查以下几点：
    • 参数名拼写是否正确： 在 `{% contact with name=“字段