在网站运营中,清晰有效地展示联系方式对于用户体验和业务转化至关重要。安企CMS(AnQiCMS)为我们提供了灵活且强大的功能,能够轻松在模板中获取并显示这些关键信息。
后端配置:联系方式的信息源头
在安企CMS中,所有网站的联系方式都集中在后台进行统一管理。这意味着无论您需要修改联系电话、邮箱,还是新增社交媒体链接,都无需触碰任何代码,只需在后台简单操作即可。
首先,请登录您的安企CMS后台。在左侧的导航菜单中,找到并点击“后台设置”,然后选择“联系方式设置”。
进入这个页面,您会看到一系列默认的联系信息字段,例如“联系人”、“联系电话”、“联系地址”、“联系邮箱”以及“微信号”和“微信二维码”等。这些是日常网站运营中最常用到的联系方式。您只需在对应的输入框中填入您的信息即可。
安企CMS的强大之处在于其高度的可定制性。如果您觉得默认的字段不足以满足您的需求,比如您想额外展示公司的QQ号码、WhatsApp链接,甚至是TikTok账号,您可以通过页面的“自定义设置参数”功能来轻松添加。
点击“自定义设置参数”旁边的添加按钮,您需要填写三个关键信息:
- 参数名:这是供模板调用的唯一标识符。建议使用英文,因为这在模板代码中会更规范。例如,如果您要添加WhatsApp,参数名可以设置为
WhatsApp。系统会自动将其转换为驼峰命名法(即每个单词首字母大写,例如contactWechat),但在调用时,您只需使用您设置的名称。 - 参数值:这是该联系方式的具体内容,比如您的WhatsApp账号或链接。
- 备注:这仅仅是帮助您在后台识别这个参数的用途,不会在前台显示。
完成自定义参数的添加后,记得点击保存,这样所有的联系信息就都配置好了,成为了我们模板调用的信息源。
前端模板:灵活调取与展示联系信息
配置好后台数据后,接下来就是在前端模板中将这些联系方式展示给用户了。安企CMS提供了一个专门的标签——contact,让这个过程变得非常简单。
contact标签的基本使用方法是 {% contact 变量名称 with name="字段名称" %}。这里的 name 参数就是您在后台“联系方式设置”中配置的字段名称(包括默认字段和自定义字段)。
让我们通过一些具体的例子来看看如何使用:
显示联系电话: 假设您想在网站的页脚或者“联系我们”页面显示公司的联系电话。您可以在模板中这样写:
<div> 联系电话:{% contact with name="Cellphone" %} </div>如果您想把电话号码存储到一个临时变量中以便多次使用或进行其他处理,可以这样做:
{% contact phoneNum with name="Cellphone" %} <p>我们的客服热线:{{ phoneNum }}</p> <p>欢迎来电咨询:<a href="tel:{{ phoneNum }}">{{ phoneNum }}</a></p>显示公司地址: 同样,显示公司地址也非常直接:
<p>公司地址:{% contact with name="Address" %}</p>展示邮箱地址: 显示邮箱并为其添加邮件链接:
{% contact emailAddr with name="Email" %} <p>商务合作请联系:<a href="mailto:{{ emailAddr }}">{{ emailAddr }}</a></p>调取微信二维码: 如果后台上传了微信二维码图片,您可以使用
Qrcode字段来显示它:<div class="wechat-qrcode"> <img src="{% contact with name="Qrcode" %}" alt="微信二维码" /> <p>扫码添加微信</p> </div>调用自定义联系方式: 如果您在后台自定义了一个名为
WhatsApp的字段,并在其中填写了WhatsApp账号。在模板中,您可以这样调用:<p>WhatsApp联系:{% contact with name="WhatsApp" %}</p>请确保
name参数的值与您在后台“联系方式设置”中“自定义设置参数”里填写的“参数名”保持一致。
多站点环境下的联系方式调用:
如果您在安企CMS中管理着多个站点,并且希望在当前站点的模板中调用其他站点的联系方式,contact标签还支持一个 siteId 参数。您可以通过指定其他站点的ID来获取其联系信息。例如,要获取站点ID为2的联系电话:
{% contact otherSitePhone with name="Cellphone" siteId="2" %}}
<p>兄弟站点电话:{{ otherSitePhone }}</p>
不过在多数情况下,如果您只是在当前站点的模板中展示自己的联系方式,这个参数通常不需要填写。
将这些调用方式组合起来,您就可以轻松地构建一个完整的联系信息区域,例如在网站的页脚:
<footer>
<div class="contact-info">
<h3>联系我们</h3>
<p>地址:{% contact with name="Address" %}</p>
<p>电话:{% contact with name="Cellphone" %}</p>
<p>邮箱:{% contact with name="Email" %}</p>
{% contact whatsappAccount with name="WhatsApp" %}
{% if whatsappAccount %}
<p>WhatsApp: {{ whatsappAccount }}</p>
{% endif %}
{% contact wechatQrCode with name="Qrcode" %}
{% if wechatQrCode %}
<div class="wechat-qr">
<img src="{{ wechatQrCode }}" alt="微信二维码" />
<p>微信扫一扫</p>
</div>
{% endif %}
</div>
</footer>
通过这种方式,您网站的联系信息既统一管理又易于更新,极大地提升了网站的维护效率。
常见问题(FAQ)
Q1: 我已经在后台设置了联系方式,但前台模板中却没有显示,这是怎么回事? A1: 如果您在后台设置了联系方式,但前台没有显示,请检查以下几个方面:
- 模板代码是否正确:确认您是否已经在对应的模板文件中使用了
{% contact ... %}标签,并且name参数指定的字段名称与后台设置完全一致(注意大小写)。 - 模板文件是否被应用:检查您的网站是否正在使用包含这些联系方式调用代码的模板文件。有时可能更换了模板,但新模板没有对应代码。
- 缓存问题:在某些情况下,浏览器缓存或AnQiCMS本身的缓存可能导致信息未及时更新。尝试清除浏览器缓存,并在AnQiCMS后台点击“更新缓存”功能。
- 信息是否已保存:确保您在后台“联系方式设置”中填写信息后,点击了页面底部的“保存”按钮。
Q2: 我想在网站上显示一些非常规的联系方式,比如特定部门的电话或海外社交媒体账号,但后台默认字段没有,该如何添加?
A2: 安企CMS提供了灵活的“自定义设置参数”功能来解决这个问题。在“后台设置”->“联系方式设置”页面,找到“自定义设置参数”区域,点击添加按钮。在这里,您可以为您的特定需求创建新的联系方式字段。例如,您可以添加一个“参数名”为 SalesPhone(销售电话)或 FacebookPage(Facebook页面),并填入对应的“参数值”。保存后,就可以在模板中使用 {% contact with name="SalesPhone" %} 或 {% contact with name="FacebookPage" %} 来调用了。
Q3: 如果我在AnQiCMS中管理着多个站点,如何确保每个站点都能显示自己独立的联系方式,而不是混淆在一起?
A3: 安企CMS的多站点功能在联系方式的管理上是独立的。当您在每个站点的后台“联系方式设置”中配置信息时,这些信息是该站点特有的。在当前站点的模板中,默认情况下 contact 标签会自动获取当前站点的联系方式。如果您确实需要在某个站点的模板中调用*另一个指定站点*的联系方式(这种情况较少见),您可以使用 siteId 参数,例如 {% contact with name="Cellphone" siteId="其他站点ID" %}。通常,您无需为每个站点额外指定 siteId,系统会智能地根据当前访问的站点来显示相应的联系信息。