在网站运营中,清晰地展示企业的联系方式对于建立客户信任、促进沟通至关重要。无论是联系人姓名、电话号码、办公地址,还是社交媒体账号,这些信息都需要在网站的显眼位置方便用户查找。安企CMS为此提供了便捷的解决方案,让您无需编写复杂的代码,就能灵活地管理和展示这些关键信息。
在后台配置您的联系方式
安企CMS的后台设计旨在让您轻松管理网站内容,这其中也包括您的联系方式。要配置这些信息,您可以登录到后台管理界面,找到“后台设置”菜单下的“联系方式设置”选项。在这里,您会看到一系列预设的字段,例如“联系人”、“联系电话”、“联系地址”、“联系邮箱”以及“微信号”和“微信二维码”。您只需在对应的输入框中填入您的信息即可。
值得一提的是,如果预设的字段无法满足您的业务需求,安企CMS还提供了“自定义设置参数”功能。您可以根据自己的需要,增加诸如WhatsApp账号、Facebook主页链接等自定义字段。这些自定义字段的名称可以自由设定,并且系统会自动将字母转换为驼峰命名法,方便您在前端模板中调用。填写好“参数名”和“参数值”,并添加“备注”以便日后识别,您的自定义联系信息就配置完成了。
在模板中获取并显示联系信息
配置好联系信息后,接下来就是在网站前台显示它们。安企CMS提供了一个专门用于获取联系方式信息的模板标签——contact。这个标签非常直观易用。
基本用法是这样的:
{% contact 变量名称 with name="字段名称" %}
其中,“字段名称”就是您在后台“联系方式设置”中填写的各项名称(如 UserName、Cellphone、Address 等)。如果您不指定“变量名称”,标签会直接输出该字段的值。如果指定了“变量名称”,例如 {% contact myPhone with name="Cellphone" %},那么您就可以在后续代码中使用 {{myPhone}} 来引用这个值。
这里列举几个常用字段的获取方式:
- 联系人姓名:
<span>联系人:{% contact with name="UserName" %}</span> - 联系电话:
<span>联系电话:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></span> - 联系地址:
<span>联系地址:{% contact with name="Address" %}</span> - 联系邮箱:
<span>联系邮箱:<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span> - 微信账号:
<span>微信号:{% contact with name="Wechat" %}</span> - 微信二维码:
<span><img src="{% contact with name="Qrcode" %}" alt="微信二维码" /></span>请注意,当获取图片URL时,如微信二维码,通常会将其嵌入<img>标签的src属性中。
对于您在后台添加的自定义联系方式,例如您创建了一个名为“WhatsApp”的自定义参数,您同样可以通过 contact 标签来获取它的值:
<span>WhatsApp:{% contact contactWhatsApp with name="WhatsApp" %}{{contactWhatsApp}}</span>
在上面的例子中,我们先将 contact 标签获取到的值赋给 contactWhatsApp 变量,然后再输出。如果某个自定义字段可能没有内容,您也可以配合条件判断 {% if contactWhatsApp %} 来避免显示空内容。
灵活应用于网站各个角落
在网站中,联系信息通常会出现在网站的页脚、“联系我们”页面或侧边栏等位置。为了避免在每个页面重复编写相同的代码,您可以充分利用安企CMS模板的 include 功能。
您可以创建一个名为 partial/footer.html 的文件,将所有联系信息相关的模板代码放入其中。例如:
<div class="contact-info-block">
<p>联系人:{% contact with name="UserName" %}</p>
<p>电话:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% 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>
<p>微信:{% contact with name="Wechat" %}</p>
{% set qrcodeUrl = "" %}
{% contact qrcodeUrl with name="Qrcode" %}
{% if qrcodeUrl %}
<div>
<img src="{{qrcodeUrl}}" alt="微信二维码" />
</div>
{% endif %}
{% set whatsapp = "" %}
{% contact whatsapp with name="WhatsApp" %}
{% if whatsapp %}
<p>WhatsApp:{{whatsapp}}</p>
{% endif %}
</div>
然后在您的主模板文件(如 base.html 或 index.html)中,只需简单地引入这个部分:
{% include "partial/footer.html" %}
这样,当您需要更新联系信息时,只需在后台修改,前端页面就会自动更新,而无需改动任何模板代码,大大提高了运营效率。
对于有多站点需求的用户