在网站运营中,一个清晰、专业且易于识别的联系电话,往往能给用户留下深刻印象,并直接影响转化率。对于依赖安企CMS构建网站的企业和内容创作者来说,如何在模板中优雅地展示联系电话,使其符合地域习惯、添加国家区号或视觉分隔符,是提升用户体验的关键一环。安企CMS以其灵活的Django模板引擎语法和丰富的内置过滤器,为我们提供了强大的工具和方法来实现这一目标。

电话号码的获取与基本显示

在安企CMS中,联系电话这类全局性的联系信息通常通过后台的“联系方式设置”进行统一管理。一旦在后台设置完成,我们便可以在模板中利用内置的contact标签轻松获取这些信息。例如,要获取在后台配置的联系电话,我们可以这样调用它:

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

这会直接输出您在后台填写的原始电话号码,例如 13800138000010-88888888。然而,原始的号码往往需要进一步处理,以满足特定的显示要求。

格式化策略一:添加国家区号

很多时候,尤其是面向国际用户的网站,我们需要在电话号码前加上国家区号,以便用户更清晰地识别和拨打。假设我们的网站主要服务于中国用户,区号为+86。我们可以巧妙地利用add过滤器来拼接字符串。

add过滤器能够将两个字符串或数字连接起来。为了使其应用更加灵活,我们通常会将原始电话号码先赋值给一个变量,再与区号前缀进行组合:

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

通过这行代码,无论后台的Cellphone字段内容是什么,例如13800138000,前端都会显示为+86 13800138000。您可以根据实际需求,将+86替换为任何您需要的国家区号,并注意区号与号码之间的空格或连字符。

格式化策略二:添加分隔符以提高可读性

电话号码中常常需要用分隔符来提高可读性,例如将13800138000格式化为138-0013-8000。这通常涉及到两个步骤:首先清理号码中可能存在的非数字字符,然后按照特定的规则插入新的分隔符。

1. 清理非数字字符 在对电话号码进行格式化之前,一个良好的习惯是先移除所有可能存在的非数字字符,例如空格、括号、连字符等,确保我们操作的是纯粹的数字串。replace过滤器是完成此任务的理想工具。您可以链式使用它来移除多种字符:

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

现在,`cleaned