It is crucial to clearly and effectively display contact information when operating your website.AnQiCMS (AnQiCMS) with its flexible template engine and powerful tag system, allows you to easily implement various complex display requirements.Today, let's talk about a common but somewhat tricky requirement: how to use the area code and phone number throughaddFilter concatenation display, making your contact phone number clear at a glance.

Why do you need to concatenate the area code and phone number?

Imagine if the contact phone number on the website were the two separate numbers "010" and "12345678", visitors might need to combine themself to understand that this is a complete number.Concatenating it into "010-12345678" or "(010) 12345678" not only allows visitors to see the complete contact number at a glance, avoiding confusion, but also provides a better visual effect in some designs and lays the foundation for creating clickable dialing links in the future.

Anqi CMS contact information label (contact) Basic application

In Anqi CMS, all contact information is processed throughcontactLabel management and calling. You can find the default contact phone field in the background settings -> Contact Settings.Cellphone)，can also be used to customize new fields, such as a field specifically for area codes (for example, namedAreaCode) and a field for local phone numbers (for example, namedLocalNumber)

Assuming you have already set up the following two custom contact information fields in the background:

  • Parameter name: AreaCode(Parameter value:)010)
  • Parameter name: LocalNumber(Parameter value:)12345678)

In the template, you can get their values respectively in this way:

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

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

This code will output '010' and '12345678' separately.

Core Tips: UseaddFilter concatenation

The AnQi CMS template engine supports various filters to process variables. To concatenate the area code and phone number obtained above,addThe filter is your helpful assistant. This filter is not only used for adding numbers, but is also good at concatenating strings with a very intuitive effect.

Now, we try to concatenate the area code and the phone number with a hyphen-as a separator:

{% 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 %}

In the code above:

  1. We first pass through{% set ... %}DeclaredareaCodeandlocalNumbertwo variables, and fromcontactRetrieve their values from the tags. The purpose of doing this is to facilitate subsequent logical judgments and repeated use.
  2. areaCode|add:"-"Will add the area code (for example010) with a delimiter-to010-.
  3. Immediately thereafter,|add:localNumberWill add the result of the previous step010-Concatenate with local phone numbers (for example12345678) to form the final010-12345678.
  4. We also demonstrated how to use multipleaddfilters to convert static strings (such as