在运营网站时,我们经常会遇到这样的情况:一篇文章的摘要过长,导致页面布局混乱;产品描述虽然详尽,但在列表页却显得冗余;抑或是一个标题太长,挤占了其他元素的空间。这些看似细微的问题,却可能影响用户体验和页面的整体美观度。幸好,安企CMS(AnQiCMS)为我们提供了非常方便且强大的模板标签,可以轻松解决这些内容截取和添加省略号的需求,让我们的网站内容展示更加得体和专业。

安企CMS的模板引擎内置了几种非常实用的内容截取过滤器,它们可以根据不同的需求(是纯文本还是包含HTML、是按字数还是按单词数截取)来工作。核心的四个过滤器分别是:truncatecharstruncatewordstruncatechars_htmltruncatewords_html

理解安企CMS的裁剪工具

在深入了解具体用法之前,我们首先要明确几个概念:

  1. 纯文本内容 vs. HTML内容:

    • 纯文本内容:指不包含任何HTML标签的文字,例如文章的标题、简短的描述等。
    • HTML内容:指包含HTML标签的文本,例如文章的正文、带有格式的产品详情等。对HTML内容进行截取时,需要特别注意不要破坏原有的标签结构,否则可能导致页面显示异常。
  2. 按字符截取 vs. 按单词截取:

    • 按字符截取:严格按照设定的字符数量进行截取,无论这些字符是中文、英文还是标点符号,都会被计入总数。
    • 按单词截取:主要针对英文内容,它会根据单词的边界进行截取,确保每个被截取的词都是完整的。对于中文内容,由于没有明确的单词概念,它通常会回退到按字符处理。

了解了这些基础,我们就可以选择合适的过滤器来处理不同的内容。

如何使用这些工具

在安企CMS的模板中,使用过滤器(Filters)的语法非常直观:{{ 变量 | 过滤器: 参数 }}。其中,| 符号表示将左侧变量的值传递给右侧的过滤器处理,而 : 符号则用于向过滤器传递参数。

1. 纯文本内容的截取

对于不含HTML标签的文本,我们主要使用 truncatecharstruncatewords

  • truncatechars:按字符截取(包含省略号) 这个过滤器会严格按照您指定的字符数量进行截取,并且在截取后自动添加“…”作为省略号。需要注意的是,这个省略号的三个字符也会被计入您设定的总长度中。

    用法示例: 假设我们有一个文章描述变量 archive.Description,我们想截取前50个字符并添加省略号。

    <p>{{ archive.Description|truncatechars:50 }}</p>
    

    效果: 如果原始描述是“这是一段非常长的文章描述,需要在这里截断显示,以保证页面的整洁性。” 截取后可能显示为:“这是一段非常长的文章描述,需要在这里截断显示,以保…”

  • truncatewords:按单词截取(包含省略号) 这个过滤器会按照单词的数量进行截取,并在末尾添加“…”作为省略号。它会尝试保持单词的完整性。同样,省略号的字符也会计入设定的总长度。

    用法示例: 假设我们有一个英文标题变量 archive.Title,我们想截取前10个单词。

    <h3>{{ archive.Title|truncatewords:10 }}</h3>
    

    效果: 如果原始标题是“AnQiCMS is a powerful and flexible content management system for enterprises.” 截取后可能显示为:“AnQiCMS is a powerful and flexible content management system…”

2. HTML内容的截取(重点)

当我们需要截取包含HTML标签的内容(例如文章正文的一部分)时,直接使用 truncatecharstruncatewords 可能会破坏HTML结构,导致页面显示错乱。安企CMS提供了专门处理HTML内容的过滤器 truncatechars_htmltruncatewords_html,它们能够智能地保留HTML标签的完整性。

特别提醒: 对HTML内容进行截取后,为了让浏览器正确解析并渲染HTML,必须在最后使用 |safe 过滤器。否则,浏览器可能会将HTML标签作为普通文本显示出来。

  • truncatechars_html:按字符截取HTML内容(保留结构,包含省略号) 这个过滤器会按字符数截取HTML内容,同时智能地关闭所有未闭合的HTML标签,以确保输出的HTML结构是有效的。省略号计入总长度。

    用法示例: 假设我们有一个包含HTML的正文内容 archive.Content,我们想截取前200个字符。

    <div class="article-summary">{{ archive.Content|truncatechars_html:200|safe }}</div>
    

    效果: 如果原始内容是 <strong>这是一段重要的内容,包含<em>粗体和斜体</em>文字。非常长...</strong> 截取后可能显示为:<strong>这是一段重要的内容,包含<em>粗体和斜体</em>文字。非常...</strong> (注意:截取过程中,<em>标签被智能闭合)

  • truncatewords_html:按单词截取HTML内容(保留结构,包含省略号)truncatechars_html 类似,但它按单词数截取HTML内容,同样会智能处理HTML标签。省略号计入总长度。

    用法示例: 假设我们想截取 archive.Content 的前40个单词。

    <div class="article-snippet">{{ archive.Content|truncatewords_html:40|safe }}</div>
    

    效果: 如果原始内容是 <ul><li>第一项</li><li>第二项</li><li>第三项,内容很长...</li></ul> 截取后可能显示为:<ul><li>第一项</li><li>第二项</li><li>第三项,内容很长...</li></ul> (截取时会保留 <ul><li> 标签的完整性)

实用场景与**实践

在实际应用中,灵活运用这些裁剪工具能显著提升网站的用户体验和页面整洁