如何在模板中显示后台自定义的联系方式信息（如电话、地址、社交媒体）？

网站的联系方式是您与访问者之间建立沟通、信任的关键桥梁。无论是寻求服务、咨询产品，还是单纯了解更多信息，清晰准确地展示联系方式对于提升用户体验至关重要。安企CMS作为一款高效便捷的内容管理系统，提供了直观的后台管理界面和灵活的模板调用功能，让您能够轻松集中管理这些信息，并将其无缝地呈现在网站的各个角落。

本文将详细指导您如何在安企CMS中设置这些关键的联系信息，并教会您在网站模板中准确地将它们显示出来。

第一步：在后台集中管理您的联系方式

在安企CMS中，所有需要显示在网站上的联系信息都建议在后台进行统一设置。这样做的好处是，一旦信息有变动，您只需在一个地方修改，网站上所有调用该信息的地方都会自动更新，大大提高了管理效率。

  1. 访问“联系方式设置”界面 登录您的安企CMS后台管理界面。在左侧的导航菜单中，找到“后台设置”这一项，点击展开后，您会看到一个名为“联系方式设置”的子菜单。点击进入，这里就是管理您网站所有联系信息的中心。

  2. 填写默认的联系信息 进入“联系方式设置”页面后，您会看到一系列预设的字段，它们覆盖了企业网站最常用的联系方式，例如：

    • 联系人：通常是您公司的对外联络人姓名。
    • 联系电话：您的公司电话或客服热线。
    • 联系地址：您公司的详细物理地址。
    • 联系邮箱：您的公司邮箱或客服邮箱。
    • 微信号：公司的微信号码。
    • 微信二维码：上传公司的微信服务号或个人微信的二维码图片。
    • 此外，还有一些常用的社交媒体字段，如QQ、WhatsApp、Facebook、Twitter、Instagram、LinkedIn、YouTube、TikTok、Pinterest等。 您只需在对应的输入框中填入准确的信息即可。对于需要上传图片（如微信二维码）的字段，系统会提供方便的上传入口。

  3. 自定义更多联系方式 安企CMS充分考虑了不同网站可能存在的个性化需求。如果默认字段无法满足您的所有要求，例如您可能需要展示一个特定的客服链接，或者其他小众社交媒体平台的链接，您可以使用页面底部的“自定义设置参数”功能。 点击添加新的参数项，您需要填写三个关键信息：

    • 参数名：这是您在模板中调用时使用的唯一标识符。为了便于理解和维护，建议使用有意义的英文名称，例如“CustomerServiceLink”或“LineID”。
    • 参数值：填写该参数对应的实际内容，例如具体的URL链接、ID号等。
    • 备注：为该自定义参数添加简短的说明，帮助您记住其用途。 通过这种方式，您可以根据网站的实际运营需求，灵活扩展和管理所需的任何联系信息。

第二步：在网站模板中优雅地显示联系方式

在后台保存好联系信息后，接下来就是在网站前端模板中将它们展示出来。安企CMS的模板引擎语法设计得非常直观，类似于Django模板，主要通过双花括号{{变量}}来输出内容，以及单花括号加百分号{% 标签 %}来执行各种功能。

要显示联系方式，我们将使用安企CMS内置的contact标签。这个标签专门用于从后台“联系方式设置”中提取数据。其基本使用方法是{% contact 变量名称 with name="字段名称" %}。

让我们通过一些具体的例子，看看如何将这些信息呈现在您的网站上。

  1. 调用默认的联系信息（例如电话和地址） 假设您想在网站的页脚部分显示公司的联系电话和地址，您可以这样编写您的模板代码：

    <!-- 假设这是您模板文件中的某个位置，比如页脚 -->
<footer>
    <p>联系电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>
    <p>公司地址：{% contact with name="Address" %}</p>
    <p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
</footer>

    在这段代码中，contact标签通过name="Cellphone"、name="Address"和name="Email"这些参数，分别指定了要调用的后台字段。标签会自动输出这些字段在后台设置的对应值。我们将电话号码包裹在<a>标签中，并使用tel:协议，方便用户点击直接拨打。

  2. 显示社交媒体图标和链接 现代网站通常会集成社交媒体链接。您可以利用安企CMS的contact标签轻松实现：

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


    {%- contact twitterLink with name="Twitter" -%}
    {%- if twitterLink %}
        <a href="{{ twitterLink }}" target="_blank" rel="nofollow"><img src="/static/images/twitter_icon.png" alt="Twitter"></a>
    {%- endif -%}


    {%- contact instagramLink with name="Instagram" -%}
    {%- if instagramLink %}
        <a href="{{ instagramLink }}" target="_blank" rel="nofollow"><img src="/static/images/instagram_icon.png" alt="Instagram"></a>
    {%- endif -%}
</div>

    这里，我们为每个社交媒体链接都定义了一个临时变量（例如facebookLink），并通过{% if facebookLink %}判断后台是否设置了该链接，避免显示空的链接。图片图标则需您自行准备并放置在网站的静态资源目录中（如/public/static/images/），然后通过<img>标签引用。rel="nofollow"属性有助于优化SEO，指示搜索引擎不要追踪这些外部链接。

  3. 调用自定义的联系信息（例如WhatsApp） 如果您在后台自定义了一个名为“WhatsApp”的参数，那么在模板中调用它的方式也同样直观：

    {%- contact whatsappLink with name="WhatsApp" -%}
{%- if whatsappLink %}
    <p>
        <a href="{{ whatsappLink }}" target="_blank">通过WhatsApp联系我们</a>
    </p>
{%- endif -%}

    这段代码会首先尝试从后台获取名为“WhatsApp”的参数值，如果存在，则会创建一个带有WhatsApp链接的段落。

  4. 展示微信二维码图片 如果您的联系方式中包含微信二维码，可以直接在模板中引用：

    ”`twig 

    <h4>扫码关注我们</h4>
{%- contact qrcodeImg with name="Qrcode" -%}
{%- if q