在运营您的网站时，清晰、有效地展示联系方式至关重要。安企CMS（AnQiCMS）凭借其灵活的模板引擎和强大的标签系统，让您可以轻松实现各种复杂的显示需求。今天，我们就来聊聊一个很常见但又有些技巧性的需求：如何在联系方式中，将区号和电话号码通过 add 过滤器拼接显示，让您的联系电话一目了然。

为什么需要拼接区号和电话号码？

想象一下，如果网站上的联系电话是“010”和“12345678”两个独立的数字，访客可能需要自行组合才能理解这是一个完整的号码。而将其拼接为“010-12345678”或“(010) 12345678”，不仅能让访客一眼看清完整的联系号码，避免混淆，还能在某些设计中提供更好的视觉效果，并为后续制作可点击的拨号链接打下基础。

安企CMS联系方式标签 (contact) 的基础运用

在安企CMS中，所有的联系方式信息都通过 contact 标签进行管理和调用。您可以在后台的【后台设置】->【联系方式设置】中，找到默认的联系电话字段（Cellphone），也可以根据需要自定义新的字段，比如一个专门用于区号的字段（例如命名为AreaCode）和一个用于本地电话号码的字段（例如命名为LocalNumber）。

假设您已经在后台设置好了以下两个自定义联系方式字段：

  • 参数名： AreaCode （参数值：010）
  • 参数名： LocalNumber （参数值：12345678）

在模板中，您可以这样分别获取它们的值：

{# 获取区号 #}
{% contact getAreaCode with name="AreaCode" %}
{# 获取本地电话号码 #}
{% contact getLocalNumber with name="LocalNumber" %}

<p>区号：{{ getAreaCode }}</p>
<p>电话号码：{{ getLocalNumber }}</p>

这段代码会分别输出“010”和“12345678”。

核心技巧：使用 add 过滤器进行拼接

安企CMS的模板引擎支持多种过滤器来处理变量。要将上面分别获取的区号和电话号码拼接起来，add 过滤器是您的得力助手。这个过滤器不仅能用于数字相加，更擅长将字符串连接起来，效果非常直观。

现在，我们尝试将区号和电话号码拼接在一起，并用一个短横线 - 作为分隔符：

{% set areaCode = "" %}
{% set localNumber = "" %}

{# 从后台获取区号和电话号码，假设您已在后台联系方式中设置了这两个自定义字段 #}
{% contact fetchedAreaCode with name="AreaCode" %}
{% if fetchedAreaCode %}{% set areaCode = fetchedAreaCode %}{% endif %}

{% contact fetchedLocalNumber with name="LocalNumber" %}
{% if fetchedLocalNumber %}{% set localNumber = fetchedLocalNumber %}{% endif %}

{# 拼接区号和电话号码 #}
{% if areaCode and localNumber %}
    <p>联系电话：{{ areaCode|add:"-"|add:localNumber }}</p>
    {# 另一种可能的需求，带括号并有空格分隔 #}
    <p>联系电话：{{ "(" | add:areaCode | add:") " | add:localNumber }}</p>
{% elif localNumber %}
    {# 如果只有本地电话，则只显示本地电话 #}
    <p>联系电话：{{ localNumber }}</p>
{% endif %}

在上面的代码中：

  1. 我们首先通过 {% set ... %} 声明了 areaCode 和 localNumber 两个变量，并从 contact 标签中获取它们的值。这样做的目的是为了方便后续的逻辑判断和多次使用。
  2. areaCode|add:"-" 会将区号（例如 010）与分隔符 - 拼接成 010-。
  3. 紧接着，|add:localNumber 会将上一步的结果 010- 与本地电话号码（例如 12345678）拼接成最终的 010-12345678。
  4. 我们还展示了如何通过多次 add 过滤器，将静态字符串（如