在网站运营中，如何高效地展示内容，同时确保页面整洁美观，是每个运营者都需要面对的挑战。尤其当文章标题、简介或评论等文本内容过长时，如果不加以处理，很容易就会打破页面布局，影响用户体验。幸运的是，AnQiCMS 提供了强大且灵活的模板过滤器功能，其中 truncatechars 等截取过滤器，能帮助我们优雅地解决这个问题。

优化内容展示：为何需要截取文本？

想象一下，您的网站列表页有许多文章，如果每篇文章的标题或简介都长短不一，甚至有的特别长，整个页面看起来就会显得凌乱。用户一眼扫过去，很难找到重点，也可能因为视觉疲劳而选择离开。通过截取过长的文本，并在末尾加上省略号，我们能够实现：

  1. 保持布局一致性：无论原始内容多长，最终显示在页面上的长度是固定的，确保了卡片、列表等元素的对齐。
  2. 提升阅读效率：用户可以快速浏览关键信息，再决定是否点击查看详情，减少了信息过载。
  3. 美化页面视觉：整齐划一的文本块让页面看起来更专业、更具吸引力。
  4. 节省空间：在移动设备或狭窄的模块中，合理截取文本能有效利用有限的显示空间。

AnQiCMS 的模板系统借鉴了 Django 模板引擎的语法，这使得内容运营人员能够非常方便地在模板中对数据进行处理和格式化。过滤器就是其中一个非常实用的工具，它通过管道符 | 来对变量进行处理，语法通常是 {{ 变量 | 过滤器名称 : 参数 }}。

truncatechars：纯文本截取的利器

当我们需要截取纯文本内容，比如文章标题、短语标签或者不包含任何 HTML 标签的简介时，truncatechars 过滤器是您的首选。它会按照您指定的字符数进行截取，并在文本末尾自动添加省略号（“…”），而且这个省略号的长度会计算在您设定的总字符数之内。

例如，您希望文章列表中的标题最长不超过 20 个字符，可以这样在模板中使用：

<a href="{{ item.Link }}">{{ item.Title|truncatechars:20 }}</a>

如果 item.Title 的原始内容是“AnQiCMS：基于Go语言构建的高性能企业级内容管理系统”，经过 truncatechars:20 处理后，它可能会显示为“AnQiCMS：基于Go语言构建的高性能企业级内容管理系统…”或者“AnQiCMS：基于Go语言构建的高性能企业级内容管理…” (根据实际Go语言UTF-8字符处理，中文一个字算一个字符，但截取位置可能略有差异)。这样，无论原始标题多长，最终展示在页面上的视觉长度都会得到很好的控制。

truncatechars_html：带 HTML 内容的智能截取

实际运营中，很多内容例如文章摘要或评论，可能包含加粗、斜体、链接等 HTML 标签。如果直接使用 truncatechars，这些标签可能会被截断，导致页面 HTML 结构混乱，甚至显示异常。

这时，truncatechars_html 过滤器就派上用场了。它不仅能截取文本，更智能的是，它会识别并保留 HTML 标签的完整性，确保截取后的内容仍然是一个有效的 HTML 片段。使用时，您需要特别注意在过滤器链的末尾加上 |safe，以告诉 AnQiCMS 模板引擎这是一个安全的 HTML 片段，无需进行额外的转义处理。

例如，您想在列表页显示文章摘要，并且摘要中可能含有加粗的关键词：

<p>{{ item.Description|truncatechars_html:100|safe }}</p>

这段代码会确保 item.Description 在被截取到 100 个字符（包含省略号）后，所有未被截断的 HTML 标签都能正确闭合，不会破坏页面的结构。

进阶选择：truncatewords 和 truncatewords_html

除了按字符数截取，AnQiCMS 也提供了按单词数截取的功能，即 truncatewords 和 truncatewords_html 过滤器。它们的工作原理与 truncatechars 类似，但主要区别在于它们将“单词”作为截取单位。这对于英文网站来说非常实用，可以避免单词被从中间截断，使得阅读体验更自然。

  • truncatewords:数量：用于纯文本，按单词数截取。
  • truncatewords_html:数量|safe：用于包含 HTML 的文本，按单词数截取并保留 HTML 结构。

例如：

<p>{{ item.EnglishTitle|truncatewords:10 }}</p>
<div class="summary">{{ item.HtmlSummary|truncatewords_html:20|safe }}</div>

实用场景与技巧

  1. 列表页摘要：在文章列表、产品列表或新闻模块中，truncatechars_html 可以很好地控制描述文本的长度，保持整齐。

    {% for archive in archives %}
<div class="item-card">
    <h3><a href="{{ archive.Link }}">{{ archive.Title|truncatechars:30 }}</a></h3>
    <p>{{ archive.Description|truncatechars_html:80|safe }}</p>
    <a href="{{ archive.Link }}" class="read-more">阅读更多</a>
</div>
{% endfor %}

  2. 评论预览：在需要显示评论摘要的地方，如用户管理后台或某个模块的最新评论展示，可以灵活使用。

    {% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
        <span>{{ item.UserName|truncatechars:6 }}</span>
        <p>{{ item.Content|truncatechars_html:50|safe }}</p>
    </div>
    {% endfor %}
{% endcommentList %}

  3. 结合条件判断，实现“查看更多”：为了提供更好的用户体验，我们通常只在内容实际被截取时才显示“…”或“查看更多”的链接。您可以将原始文本的长度与设定的截取长度进行比较。

    {% set original_title = item.Title %}
{% set truncated_title = original_title|truncatechars:30 %}
<h3>
    {% if original_title|length > 30 %}
        {{ truncated_title }} <a href="{{ item.Link }}">查看更多</a>
    {% else %}
        {{ original_title }}
    {% endif %}
</h3>

    这段代码首先获取原始标题，然后判断其长度是否超过 30 个字符。如果超过，就显示截取后的标题并附带“查看更多”链接；否则，直接显示原始标题，避免多余的省略号和链接。

总结

在 AnQiCMS 中，利用 truncatechars、truncatechars_html 等文本截取过滤器，是优化网站内容展示和提升用户体验的有效手段。它们帮助您在有限的页面空间内，以整洁、统一的方式呈现信息，同时确保了内容的清晰可读性和 HTML 结构的完整性。掌握这些实用的过滤器，将使您的网站内容管理更加得心应手，让网站在视觉和功能上都更上一层楼。

常见问题 (FAQ)

1. 为什么我使用了 truncatechars_html 之后，页面显示还是混乱，或者有标签未闭合？ 出现这种情况，很可能是您忘记在过滤器链的末尾加上 |safe。truncatechars_html 过滤器虽然会智能地处理 HTML 标签，但 AnQiCMS 模板引擎默认会对所有输出进行安全转义，以防止 XSS 攻击。如果您不加 |safe，truncatechars_html 生成的有效 HTML 标签（如 <p>、<a>）也会被转义成 &lt;p&gt;、&lt;a&gt; 等，导致浏览器无法识别并正确渲染。务必确保 {{ 变量 | truncatechars_html:长度 | safe }} 的写法。

2. truncatechars 和 truncatewords 有什么本质区别？我应该如何选择？ 核心区别在于它们计算和截取的单位不同：

  • truncatechars：按 字符 数截取（包括中文），并在末尾添加省略号。它可能会在单词中间截断。
  • truncatewords：按 单词 数截取，并在末尾添加省略