如何在安企CMS模板中显示网站的联系方式和社交媒体链接？

在网站运营中，清晰有效地展示联系方式和社交媒体链接对于建立客户信任、促进互动至关重要。安企CMS（AnQiCMS）提供了便捷且灵活的方式，帮助我们轻松地在网站模板中集成这些关键信息。

一、准备工作：在安企CMS后台配置联系方式与社交媒体信息

在将联系方式和社交媒体信息展示到网站前端之前，我们需要在安企CMS的后台进行相应的配置。这就像为我们的网站准备好一份完整的名片。

  1. 进入联系方式设置 首先，登录安企CMS后台管理界面，在左侧导航栏中找到“后台设置”，然后点击“联系方式设置”。这里就是集中管理所有联系信息的区域。

  2. 填写默认联系信息 在“联系方式设置”页面，你会看到一系列预设的字段，例如：

    • 联系人：通常是你的客服代表或公司对外联系的姓名。
    • 联系电话：网站的主要联系电话。
    • 联系地址：公司的物理地址。
    • 联系邮箱：客户可以通过邮件联系你的邮箱地址。
    • 微信号、微信二维码：用于展示微信联系方式。
    • QQ：如果你使用QQ作为客服渠道，也可以在这里填写。
    • WhatsApp、Facebook、Twitter、Tiktok、Pinterest、Linkedin、Instagram、Youtube：安企CMS已经内置了这些主流社交媒体平台的链接字段，直接填入对应的账号或主页链接即可。

  3. 自定义社交媒体或特殊联系方式 如果你的网站需要展示其他未列出的社交媒体平台，或者有其他特殊的联系方式（例如：Telegram链接、特定地区的客服电话），安企CMS也提供了强大的“自定义设置参数”功能。

    • 点击“自定义设置参数”区域的“添加”按钮。
    • 在“参数名”中输入一个简洁且具有辨识度的英文名称（例如：TelegramLink），这个名称将用于模板中的调用。
    • 在“参数值”中填写对应的链接或信息。
    • 在“备注”中简单说明该参数的用途，方便日后管理。

完成所有信息的填写后，记得点击“保存”按钮，确保你的配置生效。

二、在模板中使用联系方式标签 contact

安企CMS通过contact标签，让在模板中调用这些联系信息变得非常直接。这个标签允许我们根据“字段名称”精确地获取所需的信息。

contact标签的基本使用语法是：{% contact 变量名称 with name="字段名称" %}。其中，“变量名称”是可选的，如果你想将获取到的数据存储起来以便后续处理或多次使用，可以指定一个变量名；如果只是简单地输出一次，则可以直接省略变量名。

下面我们通过一些实例来看看如何使用它：

  1. 显示基本的联系信息 假设我们想在网站页脚显示联系电话和公司地址，可以在模板（如footer.html或bash.html）中这样编写：

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

    这样，安企CMS就会自动从后台配置中获取并显示相应的电话号码、地址和邮箱。

  2. 使用变量进行条件判断 有些联系信息可能不是每个网站都必需，或者只有在用户提供了数据时才显示。这时，我们可以将contact标签获取的值存储到变量中，并结合if条件判断标签来灵活控制显示。

    例如，我们希望只有当“微信号”存在时才显示它：

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

    通过这种方式，如果后台没有填写微信号，这段代码就不会在前端显示，保持页面的整洁。

三、展示社交媒体链接与图标

社交媒体链接的展示通常会结合图标，这能让页面看起来更专业和美观。安企CMS内置了对多种社交平台的直接支持。

  1. 调用内置社交媒体链接 对于Facebook、Twitter等平台，我们只需使用对应的name参数即可：

    {% contact facebookLink with name="Facebook" %}
{% contact twitterLink with name="Twitter" %}
{% contact linkedinLink with name="Linkedin" %}


<div class="social-icons">
    {% if facebookLink %}
        <a href="{{ facebookLink }}" target="_blank" rel="nofollow" title="Facebook">
            <img src="{% system with name="TemplateUrl" %}/images/icons/facebook.svg" alt="Facebook">
        </a>
    {% endif %}
    {% if twitterLink %}
        <a href="{{ twitterLink }}" target="_blank" rel="nofollow" title="Twitter">
            <img src="{% system with name="TemplateUrl" %}/images/icons/twitter.svg" alt="Twitter">
        </a>
    {% endif %}
    {% if linkedinLink %}
        <a href="{{ linkedinLink }}" target="_blank" rel="nofollow" title="LinkedIn">
            <img src="{% system with name="TemplateUrl" %}/images/icons/linkedin.svg" alt="LinkedIn">
        </a>
    {% endif %}
</div>

    在这里，{% system with name="TemplateUrl" %}标签用于获取当前模板的静态资源（如CSS、JS、图片）路径，确保图标能够正确加载。rel="nofollow"属性则是一个SEO的**实践，告诉搜索引擎不要追踪这些外部链接。

  2. 显示微信二维码 如果后台配置了微信二维码图片，我们可以直接通过Qrcode字段获取图片链接，并通过|safe过滤器安全地输出HTML：

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

    |safe过滤器在这里非常重要，因为它指示模板引擎将输出的HTML内容视为安全，避免被自动转义，从而确保二维码图片能够正常显示。

  3. 调用自定义社交媒体链接 如果之前在后台添加了名为TelegramLink的自定义参数，我们也可以用相同的方式在模板中调用它：

    ”`twig {% contact telegramLink with name=“TelegramLink” %} {% if telegramLink %}

    <a href="{{ telegramLink }}" target="_blank" rel="nofollow" title="Telegram">
    <img src="{% system with name="TemplateUrl" %}/images/icons/telegram.svg" alt="Telegram">
</a>

    {%