如何在模板中截取字符串或HTML内容并添加省略号？
在运营网站时，我们经常会遇到这样的情况：一篇文章的摘要过长，导致页面布局混乱；产品描述虽然详尽，但在列表页却显得冗余；抑或是一个标题太长，挤占了其他元素的空间。这些看似细微的问题，却可能影响用户体验和页面的整体美观度。幸好，安企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>标签的完整性)
实用场景与**实践
在实际应用中，灵活运用这些裁剪工具能显著提升网站的用户体验和页面整洁