How to format phone numbers in AnQiCMS templates, for example, adding country codes or separators?

In website operation, a clear, professional and easily recognizable phone number often leaves a deep impression on users and directly affects the conversion rate.For enterprises and content creators who rely on Anqi CMS to build websites, how to elegantly display contact information in templates, making it conform to local customs, adding country codes, or visual separators, is a key factor in improving user experience.AnQi CMS with its flexible Django template engine syntax and rich built-in filters provides us with powerful tools and methods to achieve this goal.

Obtaining and displaying phone numbers

In Anqi CMS, contact information such as phone numbers, which is a global contact, is usually managed through the 'Contact Information Settings' on the backend. Once set up in the backend, we can use the built-incontactLabel easily obtain this information. For example, to get the contact number configured in the background, we can call it like this:

{% set raw_phone = contact with name="Cellphone" %}
{{ raw_phone }}

This will directly output the original phone number you entered in the background, for example13800138000or010-88888888However, the original number often needs further processing to meet specific display requirements.

Formatting strategy one: add country code

At times, especially for websites aimed at international users, we need to add country codes to phone numbers to help users identify and dial them more clearly. Assuming our website mainly serves Chinese users, the area code is+86We can cleverly utilizeaddThe filter to concatenate strings.

addThe filter can concatenate two strings or numbers. To make its application more flexible, we usually assign the original phone number to a variable first, and then combine it with the area code prefix:

{% set raw_phone = contact with name="Cellphone" %}
{{ "+86 " | add: raw_phone }}

By this line of code, regardless of the background'sCellphonefield content is, for example13800138000, the front end will display as+86 13800138000. You can adjust it according to your actual needs, to+86Replace with any country code you need, and note the space or hyphen between the area code and the number.

Formatting strategy two: add separators to enhance readability.

Phone numbers often need to use separators to improve readability, for example, to separate13800138000Formatted as138-0013-8000This usually involves two steps: first, cleaning up any non-numeric characters that may be present in the number, and then inserting new separators according to specific rules.

1. Clean non-numeric charactersBefore formatting a phone number, it is a good practice to remove all possible non-numeric characters, such as spaces, parentheses, hyphens, etc., to ensure that we are working with a pure numeric string.replaceThe filter is the ideal tool for this task. You can chain it to remove multiple characters:

{% set raw_phone_input = contact with name="Cellphone" %}
{% set cleaned_phone = raw_phone_input | replace:"-","" | replace:" ","" | replace:"(","" | replace:")","" %}

Now, `cleaned