如何在前台页面展示AnqiCMS后台设置的联系方式信息，并支持自定义参数显示？
一个网站能够有效地传达信息，其中一个核心就是让访客能够轻松地找到联系方式。无论是在网站的页脚、专门的“联系我们”页面，还是在文章内容中，清晰明了的联系信息都是提升用户体验和建立信任的关键。安企CMS（AnqiCMS）以其灵活可定制的特性，让您能够非常便捷地在后台管理这些信息，并以前台页面展示，甚至支持自定义参数，满足各种业务需求。
接下来，我们就一起看看如何在您的AnqiCMS网站前台页面，巧妙地展示这些联系方式信息，并支持自定义参数的灵活显示。
为前台展示做好准备：后台联系方式设置
在着手前台页面的布局之前，我们需要先在AnqiCMS的后台管理系统中配置好所需的联系信息。
登录AnqiCMS后台，在左侧菜单找到“后台设置”，点击“联系方式设置”。这里您会看到一些常用的联系方式字段，比如联系人、联系电话、联系地址、联系邮箱、微信号和微信二维码。这些都是系统默认提供的，足以应对大多数网站的需求。
如果默认的选项不能满足您的需求，比如您希望添加一个WhatsApp号码、Telegram ID，或者是客服工作时间等非标准联系信息，安企CMS提供了非常灵活的“自定义设置参数”功能。您只需点击“自定义设置参数”下方的“添加”按钮，即可创建新的字段：
- 参数名： 这是供前台模板调用的唯一标识，建议使用英文或拼音，例如
WhatsApp、CustomerServiceTime。系统会自动将其转换为驼峰命名（每个单词首字母大写）。 - 参数值： 填写该参数的具体内容，比如您的WhatsApp号码
+1234567890，或工作时间周一至周五 9:00-18:00。 - 备注： 这是一个可选字段，用于解释该参数的用途，方便您日后管理。
完成这些设置后，记得点击保存，让您的联系方式在后台准备就绪。
在前台页面展示联系方式：灵活的标签调用
在AnqiCMS中，将后台设置的联系方式展示到前台页面，主要依靠强大的contact模板标签。这个标签允许您通过指定“参数名”来获取对应的联系信息。
通常，您会在模板文件（例如partial/footer.html、partial/header.html或者一个专门的contact.html页面）中使用这些标签。
1. 调用默认联系方式字段
要调用后台预设的联系信息非常直观。只需使用contact标签，并将其name属性设置为您想要调用的字段名称。
例如，要在前台显示网站的联系电话和邮箱：
<p>电话：{% contact with name="Cellphone" %}</p>
<p>邮箱：{% contact with name="Email" %}</p>
<p>地址：{% contact with name="Address" %}</p>
这段代码会直接输出您在后台“联系方式设置”中填写的电话、邮箱和地址信息。
2. 调用自定义联系方式参数
对于您在后台“自定义设置参数”中添加的字段，调用方式也完全一致。只要确保name属性与您在后台设置的“参数名”完全匹配即可。
假设您在后台自定义了一个名为WhatsApp的参数，其值为您的WhatsApp号码，那么在前台页面，您可以这样调用：
<p>WhatsApp：{% contact with name="WhatsApp" %}</p>
如果还自定义了CustomerServiceTime来显示客服工作时间：
<p>客服在线时间：{% contact with name="CustomerServiceTime" %}</p>
这样，您的自定义信息就能像内置字段一样，被灵活地展示出来。
3. 让显示更智能：结合变量和条件判断
为了让您的模板代码更整洁、更具可读性，您可以将contact标签的输出赋值给一个变量，然后再使用这个变量。这样不仅方便多次引用，也能在需要时进行条件判断。
例如，您可以将电话号码赋值给一个变量phoneNumber：
{% contact phoneNumber with name="Cellphone" %}
<p>联系电话：<a href="tel:{{ phoneNumber }}" rel="nofollow">{{ phoneNumber }}</a></p>
这里我们还额外地将电话号码加上了tel:协议，让访客在手机上可以直接点击拨号，这是一个很棒的用户体验细节。
有时，某些联系方式（比如微信二维码）可能并非总是存在，或者您只希望在特定情况下显示。这时，结合使用AnqiCMS的if逻辑判断标签会非常有用。
假设您上传了微信二维码，并希望只有在二维码图片存在时才显示：
{% contact weChatQrcode with name="Qrcode" %}
{% if weChatQrcode %}
<div class="wechat-contact">
<p>微信扫码联系我们：</p>
<img src="{{ weChatQrcode }}" alt="微信二维码" style="width: 120px; height: 120px;">
</div>
{% endif %}
通过这样的判断，可以避免当二维码未设置时，页面上出现空白的图片占位符。
一些实用的建议
- 多站点调用： 如果您管理着多个AnqiCMS站点，并且希望在某个模板中调用特定站点的联系方式，
contact标签还支持siteId参数。例如{% contact with name="Cellphone" siteId="2" %}，这将调用ID为2的站点的联系电话。 - 语义化HTML： 在展示联系方式时，尽量使用语义化的HTML标签，如
<p>、<a>，并结合CSS进行美化，确保信息易读且美观。例如，将电话号码包裹在<a href="tel:..." rel="nofollow">中，邮箱地址包裹在<a href="mailto:...">中，这样用户可以直接点击进行拨打或发送邮件。
安企CMS的contact标签和自定义参数功能，为您提供了极大的灵活性，让您能够根据实际需求，将各种联系方式信息以结构化、可控的方式，在前台页面完美呈现，从而提升网站的专业度和用户互动性。
常见问题 (FAQ)
1. 我在后台自定义参数时，参数名可以用中文吗？
是的，您可以将参数名设置为中文。例如，“客服工作时间”。AnqiCMS会自动将其转换为模板可识别的格式。不过，为了保持模板代码的整洁和通用性，我们通常建议使用英文或拼音作为参数名，如CustomerServiceTime，这在团队协作和国际化模板制作时会更有优势。
2. 为什么我设置了联系方式，前台页面却没有显示？
有几个可能的原因：
- 缓存问题： 请尝试清除AnqiCMS的系统缓存。在后台顶部菜单找到“更新缓存”并点击，或者检查是否配置了CDN缓存，并刷新CDN缓存。
- 模板未更新： 您可能修改了模板文件，但文件没有正确上传到服务器或没有被AnqiCMS重新加载。
- 字段名不匹配： 检查您在模板中使用的
name属性是否与后台“联系方式设置”中的字段名或自定义参数名完全一致，包括大小写。例如，后台是WhatsApp，模板中也必须是WhatsApp，而不能是whatsapp。 - 条件判断限制： 如果您使用了
if标签进行条件判断，请检查条件是否正确