在运营网站时,我们经常会遇到这样的情况:一篇文章的摘要过长,导致页面布局混乱;产品描述虽然详尽,但在列表页却显得冗余;抑或是一个标题太长,挤占了其他元素的空间。这些看似细微的问题,却可能影响用户体验和页面的整体美观度。幸好,安企CMS(AnQiCMS)为我们提供了非常方便且强大的模板标签,可以轻松解决这些内容截取和添加省略号的需求,让我们的网站内容展示更加得体和专业。
安企CMS的模板引擎内置了几种非常实用的内容截取过滤器,它们可以根据不同的需求(是纯文本还是包含HTML、是按字数还是按单词数截取)来工作。核心的四个过滤器分别是:truncatechars、truncatewords、truncatechars_html 和 truncatewords_html。
理解安企CMS的裁剪工具
在深入了解具体用法之前,我们首先要明确几个概念:
纯文本内容 vs. HTML内容:
- 纯文本内容:指不包含任何HTML标签的文字,例如文章的标题、简短的描述等。
- HTML内容:指包含HTML标签的文本,例如文章的正文、带有格式的产品详情等。对HTML内容进行截取时,需要特别注意不要破坏原有的标签结构,否则可能导致页面显示异常。
按字符截取 vs. 按单词截取:
- 按字符截取:严格按照设定的字符数量进行截取,无论这些字符是中文、英文还是标点符号,都会被计入总数。
- 按单词截取:主要针对英文内容,它会根据单词的边界进行截取,确保每个被截取的词都是完整的。对于中文内容,由于没有明确的单词概念,它通常会回退到按字符处理。
了解了这些基础,我们就可以选择合适的过滤器来处理不同的内容。
如何使用这些工具
在安企CMS的模板中,使用过滤器(Filters)的语法非常直观:{{ 变量 | 过滤器: 参数 }}。其中,| 符号表示将左侧变量的值传递给右侧的过滤器处理,而 : 符号则用于向过滤器传递参数。
1. 纯文本内容的截取
对于不含HTML标签的文本,我们主要使用 truncatechars 和 truncatewords。
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标签的内容(例如文章正文的一部分)时,直接使用 truncatechars 或 truncatewords 可能会破坏HTML结构,导致页面显示错乱。安企CMS提供了专门处理HTML内容的过滤器 truncatechars_html 和 truncatewords_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>标签的完整性)
实用场景与**实践
在实际应用中,灵活运用这些裁剪工具能显著提升网站的用户体验和页面整洁