在安企CMS的模板制作过程中，内容展示的灵活性至关重要。当我们需要在有限的空间内展示较长的文本，例如文章摘要、产品描述或简短介绍时，对这些字符串进行截断并以省略号结尾是一种常见的优化手段，它能有效保持页面布局的整洁，并引导用户点击查看完整内容。安企CMS基于Go语言开发，其模板引擎语法类似Django，提供了强大的过滤器（filters）功能，可以轻松实现这一需求。

巧妙运用过滤器，优雅截断字符串

在AnqiCMS的模板中，处理字符串截断的核心工具是“过滤器”。过滤器可以对变量进行各种转换和格式化，语法简洁，通常以竖线（|）连接在变量名之后，并可带参数。针对长字符串的截断，AnqiCMS提供了多种实用的过滤器，它们可以根据字符数或单词数进行截断，并智能地添加省略号。

1. 针对纯文本内容的截断：truncatechars 和 truncatewords

当您需要处理不包含任何HTML标签的纯文本内容时，可以使用truncatechars和truncatewords过滤器。

  • truncatechars (按字符数截断)： 这个过滤器会根据您指定的字符数量来截断字符串。值得注意的是，截断长度包含了最终添加的省略号（...）。例如，如果您指定截断为50个字符，那么实际内容将占用47个字符，然后跟上3个省略号。

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

    这段代码会将item.Description中的文本截断至多50个字符（包含省略号），确保无论原始描述多长，显示都不会超出预期，保持布局统一。

  • truncatewords (按单词数截断)： 如果您希望截断时能保持单词的完整性，而不是在单词中间断开，那么truncatewords是更好的选择。它会统计并保留指定数量的完整单词，然后添加省略号。

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

    这会确保item.Title最多显示10个单词，并在末尾加上省略号，避免了阅读上的生硬感。

2. 针对富文本内容的截断：truncatechars_html 和 truncatewords_html

在网站运营中，很多内容，如文章详情的摘要，可能包含加粗、链接、图片等HTML标签。如果直接使用truncatechars或truncatewords，可能会破坏HTML结构，导致页面显示异常，例如标签未闭合。为了解决这个问题，AnqiCMS提供了专门处理HTML内容的截断过滤器。

  • truncatechars_html (按字符数截断HTML并保持结构)： 此过滤器功能与truncatechars类似，但它会智能地识别并维护HTML标签的完整性。即使截断发生在标签内部，它也会确保所有已打开的HTML标签被正确关闭，从而生成有效的HTML片段。

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

    当您从archive.Content这样的富文本字段中提取摘要时，使用这个过滤器可以确保截断后的HTML代码是有效的，并且不会破坏页面样式。请注意，为了让HTML内容正确渲染而不是被转义为纯文本，务必在其后加上|safe过滤器。

  • truncatewords_html (按单词数截断HTML并保持结构)： 与truncatewords类似，但适用于HTML内容。它会按单词数截断，并同样维护HTML标签的完整性。

    <div class="excerpt">{{ archive.Content|truncatewords_html:30|safe }}</div>

    这个过滤器非常适合从富文本内容中生成一个包含少量单词的精简摘要，同时保证其HTML结构的完好。同样，别忘了使用|safe。

实践应用与**实践

在实际应用中，选择哪种截断过滤器取决于您的具体需求和内容类型：

  • 纯文本描述：对于文章或产品的Description字段，通常推荐使用truncatechars，因为它能精确控制显示的字符长度，非常适合固定宽度的布局。
  • 短标题或标签：truncatewords在需要保持词语完整性，但又担心标题过长时可以使用，虽然实际使用场景相对较少，因为标题通常会进行长度限制。
  • 富文本摘要：当从文章Content字段中提取部分内容作为摘要时，truncatechars_html或truncatewords_html是不可或缺的。它们能够完美地兼顾内容长度与HTML结构的完整性。

几点提示：

  • 合理设置截断长度：过短的截断可能导致信息量不足，过长的截断则失去美观优势。建议根据您的设计稿和页面布局多方测试，找到最合适的长度。
  • 搭配“查看更多”链接：截断的目的是为了预览，通常会搭配一个指向完整内容的“查看更多”或“阅读全文”链接，以提供完整的用户体验。
  • 始终使用 |safe：当您通过_html过滤器处理并输出可能包含HTML标签的内容时，请务必在字符串后面加上|safe，以避免模板引擎默认的HTML实体转义行为，确保HTML代码能够被浏览器正确解析。

通过灵活运用这些截断过滤器，您可以在AnqiCMS模板中轻松管理长字符串的显示，提升网站页面的整体美观度和用户体验。

常见问题 (FAQ)

Q1: 截断长度包含省略号吗？ A1: 是的，当您使用truncatechars或truncatechars_html时，您指定的字符数（例如truncatechars:50）会包含最终添加的省略号（...）所占用的字符。这意味着实际显示的内容字符数会比您指定的值少。

Q2: 如果我的字符串本身就很短，没有超过截断长度，还会显示省略号吗？ A2: 不会。AnqiCMS的这些截断过滤器只有在实际发生截断时才会添加省略号。如果原始字符串的长度或单词数未超过您指定的截断值，它会完整显示字符串，而不会额外添加省略号。

Q3: |safe 过滤器有什么作用，什么时候需要使用它？ A3: |safe 过滤器告诉AnqiCMS的模板引擎，它所处理的字符串是“安全的”HTML代码，不需要进行默认的HTML实体转义。当您显示从数据库获取的富文本内容（可能包含加粗、链接等HTML标签），或使用truncatechars_html、truncatewords_html等过滤器处理HTML内容时，为了确保HTML标签能被浏览器正确渲染而不是作为纯文本显示，一定要在输出的变量后加上|safe。