在网站内容运营中,如何让信息既简洁明了又专业美观?这往往是许多运营者面临的挑战。无论是新闻摘要、产品描述,还是价格数据、统计数字,如果展示得杂乱无章,不仅会影响用户体验,甚至可能导致信息传递的偏差。安企CMS(AnQiCMS)深知这一痛点,其强大的模板引擎内置了一系列实用的过滤器,能够帮助我们轻松优化文本和数字的显示格式,让您的网站内容焕然一新。

精炼文本,提升可读性

我们网站上的文章、产品描述等内容,在不同展示场景下(如列表页、详情页、侧边栏),可能需要以不同的长度呈现。过长的文本会占据过多空间,影响布局;过短的文本又可能信息不足。AnQiCMS的文本过滤器正是解决这些问题的利器。

智能截断文本:truncatecharstruncatewords

假设您有一段冗长的文章摘要,希望在列表页只显示开头一部分,并自动添加省略号。这时,truncatechars过滤器就能派上用场了。它会按照您指定的字符数量截断文本,并在末尾加上...

例如,如果有一篇文章的描述是article.Description,您想让它只显示前80个字符: {{ article.Description|truncatechars:80 }}

如果希望按照单词而非字符来截断,truncatewords则更为合适,它会尝试在完整的单词边界处截断,避免将一个单词截断一半,这在英文内容中尤为有用。

例如,将文章标题截断为前15个单词: {{ article.Title|truncatewords:15 }}

处理HTML内容的截断:truncatechars_htmltruncatewords_html

当您处理的是包含HTML标签的内容(比如富文本编辑器输出的文章正文摘要)时,直接使用truncatecharstruncatewords可能会破坏HTML结构,导致页面显示异常。此时,AnQiCMS提供了专门的truncatechars_htmltruncatewords_html过滤器。它们能够智能地截取HTML内容,同时确保标签的正确闭合,避免页面错乱。在使用这些带_html后缀的过滤器时,通常还需要配合|safe过滤器,告诉模板引擎这段输出是安全的HTML,无需再次转义,以免浏览器将其作为纯文本显示。

例如,截取包含HTML的文章内容的前100个字符,并保留HTML结构: {{ article.FullContent|truncatechars_html:100|safe }}

同样,按单词截断HTML内容: {{ article.FullContent|truncatewords_html:20|safe }}

更多文本美化:大小写与换行

除了截断,AnQiCMS还提供了一些方便的文本处理过滤器:

  • upper:将文本全部转换为大写。
  • lower:将文本全部转换为小写。
  • title:将文本中每个单词的首字母转换为大写。
  • capfirst:只将文本的第一个字母转换为大写。

这些过滤器可以帮助您根据设计需求,统一文本的显示风格。

对于处理多行文本,linebreaksbr过滤器可以将文本中的换行符\n直接转换为HTML的<br/>标签,让多行内容在网页上也能正确分行显示。

{{ comment.Content|linebreaksbr|safe }}

精准数字,清晰传达信息

在展示价格、评分或任何带小数点的数字时,保持一致且清晰的格式至关重要。AnQiCMS的数字过滤器正是为此而生。

格式化浮点数:floatformat

floatformat过滤器能够帮助我们精确控制浮点数的显示格式,避免冗余的小数位或不必要的零。

默认情况下,floatformat会智能地处理数字。例如,{{ product.Price|floatformat }}会将像34.00000这样的数字显示为34,而34.23234显示为34.2,它会自动处理末尾的零并保留一位小数(如果非零)。

如果您需要更精确的控制,可以指定小数位数,例如{{ product.DiscountPrice|floatformat:2 }}会始终保留两位小数,即使是34.00000也会显示为34.00。这对于商品价格等需要统一显示两位小数的场景非常实用。

您甚至可以指定负数作为小数位数,例如{{ product.Weight|floatformat:"-3" }},它会从小数点后第三位开始四舍五入。

更通用的格式化:stringformat

除了floatformatstringformat过滤器则提供了更灵活的数字及文本格式化能力,它类似于Go语言中的fmt.Sprintf()函数。您可以使用各种格式化动词(如%.2f表示浮点数保留两位小数,%d表示整数,%s表示字符串)来精确控制输出格式。

例如,您希望将产品评分显示为“评分:4.5分”: {{ product.Rating|stringformat:"评分:%.1f分" }}

或者将一个整数嵌入到一段文字中: {{ item.Views|stringformat:"已有%d人阅读" }}

辅助数字操作:add与类型转换

对于简单的数字加法,add过滤器也能直接在模板中完成,例如您想在购物车中显示商品数量加一的提示: {{ item.Quantity|add:1 }}

在某些情况下,您可能需要确保变量是正确的数字类型才能进行格式化或计算。integerfloat过滤器可以将字符串转换为整数或浮点数,这在处理从非严格数据源获取的数字时非常有用。

常用场景与实践建议

通过灵活运用这些过滤器,您可以将原始数据转化为易于阅读和理解的信息,大大提升网站的专业度和用户体验。例如:

  • 新闻列表中的文章标题和摘要可以使用truncatewords_html来保持格式完整。
  • 产品详情页的价格可以统一使用floatformat:2
  • 评论内容可以通过linebreaksbr保持排版,并通过truncatechars在预览时进行截断。
  • 统计数据可以根据需求,利用stringformat添加单位或前缀。

一些实践建议:

  1. **始终进行