在网站内容运营中，标题和简介是吸引访问者点击和了解详情的重要元素。尤其在列表页、推荐位或首页展示中，有限的空间使得我们必须对这些内容进行精炼和裁剪。为了保持页面的整洁美观，同时又能完整传达核心信息，对过长的文章标题或简介进行截断，并以省略号“…”结尾，是一种常用的优化策略。AnQiCMS（安企CMS）为我们提供了灵活且强大的工具来实现这一需求。

为什么要对标题和简介进行截断处理？

想象一下，如果您的网站列表页上的每个标题都长短不一，甚至有的标题占据了两三行，这不仅会让页面显得杂乱无章，还会大大降低用户浏览的效率和体验。对标题和简介进行截断处理有几个核心好处：

  • 保持页面统一布局： 确保内容在不同展示区域（如文章列表、热门推荐、相关文章等）都能以规整的样式呈现，避免因内容长度不一造成的页面元素跳动或错位。
  • 提升阅读效率： 用户可以快速扫视多个标题和简介，迅速判断内容是否符合自己的兴趣，提高信息获取效率。
  • 优化移动端体验： 在屏幕尺寸较小的移动设备上，精简的标题和简介能够更好地适应有限的显示空间，提升可读性。
  • 聚焦核心信息： 促使内容创作者在标题和简介中提炼最关键的信息，让读者一眼就能抓住要点。

AnQiCMS中的截断利器：强大的过滤器

AnQiCMS的模板引擎提供了一系列内置的过滤器（Filters），它们能够帮助我们对数据进行各种处理，包括格式化、转换和截断等。要实现文章标题和简介的截断并显示省略号，我们主要会用到 truncatechars 和 truncatewords 这两个家族的过滤器。

这些过滤器都以 | 符号连接在需要处理的变量之后，后接过滤器名称和参数。

了解四种截断过滤器及其应用场景

AnQiCMS提供了四种主要的截断过滤器，以适应不同的内容类型和截断需求：

  1. truncatechars (按字符截断纯文本)

    • 作用： 这个过滤器会根据您指定的字符数量来截断文本。无论您是中文还是英文，它都会将一个字符算作一个单位进行计数，并在达到指定长度后添加省略号。
    • 应用场景： 当您需要精确控制纯文本标题或简介的显示长度时，例如在导航菜单、标签等对长度有严格限制的地方。
    • 示例： {{ article.Title|truncatechars:20 }} 表示标题如果超过20个字符，就会被截断并显示省略号。
    • 注意： 如果截断的位置恰好在中文汉字中间或英文单词中间，可能会导致显示不完整。

  2. truncatewords (按单词截断纯文本)

    • 作用： 这个过滤器会根据您指定的单词数量来截断文本，并在最后一个完整单词后添加省略号。它比 truncatechars 更“智能”，不会截断正在进行中的单词，从而保持英文内容的语义完整性。
    • 应用场景： 主要适用于英文标题或简介的截断，可以避免出现“this is a lo…”这样不美观的显示。
    • 示例： {{ article.Description|truncatewords:15 }} 表示简介如果超过15个单词，就会被截断。
    • 注意： 对中文内容无效，因为中文没有“单词”的概念。

  3. truncatechars_html (按字符截断HTML内容，保留标签结构)

    • 作用： 与 truncatechars 类似，也是按字符数量截断，但它能够智能地处理包含HTML标签的内容。它会在截断的同时，确保所有已打开的HTML标签都能被正确闭合，从而避免页面布局因不完整标签而混乱。
    • 应用场景： 当您的简介内容可能包含加粗、链接等少量HTML标签时，此过滤器能帮助您在截断后依然保持这些样式效果。
    • 示例： {{ article.Description|truncatechars_html:80|safe }} 表示包含HTML的简介，如果超过80个字符（HTML标签不计入字符数），会智能截断。
    • 注意： 使用这个过滤器处理HTML内容时，务必在过滤器链的末尾加上 |safe 过滤器。|safe 会告诉AnQiCMS模板引擎，这些内容是安全的HTML，应该直接渲染而不是转义显示。

  4. truncatewords_html (按单词截断HTML内容，保留标签结构)

    • 作用： 结合了 truncatewords 和 truncatechars_html 的优点，按单词数量截断英文HTML内容，并保留完整的HTML标签结构。
    • 应用场景： 适用于包含少量HTML标签的英文简介。
    • 示例： {{ article.Description|truncatewords_html:20|safe }}。
    • 注意： 同样需要配合 |safe 过滤器使用，且不适用于中文内容。

在AnQiCMS模板中实践：以文章列表为例

在AnQiCMS中，您可以在文章列表（通常使用 archiveList 标签）或文章详情页（使用 archiveDetail 标签）的模板中应用这些过滤器。下面我们以一个文章列表的例子来展示如何在实际模板中应用这些截断过滤器：

假设您有一个文章列表的模板，需要显示文章标题和简介：

{# 使用 archiveList 标签获取文章列表 #}
{% archiveList articles with type="list" limit="10" %}
    {% for article in articles %}
    <div class="article-item">
        <a href="{{ article.Link }}" class="article-link">
            {# 文章标题：按字符截断，最多显示30个字符 #}
            <h3 class="article-title">
                {{ article.Title|truncatechars:30 }}
            </h3>
            {# 文章简介：按字符截断HTML内容，最多显示80个字符，并确保HTML标签正常显示 #}
            <p class="article-description">
                {{ article.Description|truncatechars_html:80|safe }}
            </p>
        </a>
        {# 文章发布时间，使用 stampToDate 过滤器格式化 #}
        <span class="article-date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
    </div>
    {% else %}
    <p class="no-articles">抱歉，目前没有找到任何文章。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中：

  • {{ article.Title|truncatechars:30 }} 会将文章标题 article.Title 截断为最多30个字符。
  • {{ article.Description|truncatechars_html:80|safe }} 会将文章简介 article.Description 截断为最多80个字符。由于简介可能包含HTML（例如加粗文字），我们使用了 truncatechars_html 来智能处理标签，并用 |safe 确保HTML代码被浏览器正确解析显示。

通过这种方式，即使您的文章标题或简介内容很长，在页面上也能以统一、整洁且易于阅读的形式展现。

使用这些截断过滤器时的注意事项

  1. 中文内容的选择： 对于中文标题和简介，建议优先使用 truncatechars 或 truncatechars_html。因为中文没有英文的“单词”概念，truncatewords 系列过滤器无法有效工作。
  2. HTML内容的渲染： 当处理可能包含HTML标签的内容（如富文本编辑器生成的简介）时，使用 truncatechars_html 或 truncatewords_html 是正确的选择。但切记，在这些过滤器的末尾必须加上 |safe。否则，浏览器会将截断后的HTML标签作为纯文本显示出来，而不是渲染其效果。
  3. 截断长度的测试： 合适的截断长度取决于您的网站设计和具体布局。建议在实际模板中进行多次测试，观察不同长度的效果，选择最能兼顾美观和信息传递的数值。
  4. 省略号是自动的： AnQiCMS的截断过滤器会自动在截断内容后添加“…”省略号，您无需手动添加。

总结

在AnQiCMS中，通过灵活运用 truncatechars、truncatewords 及其HTML版本过滤器，我们可以轻松地实现文章标题和简介的优雅截断和省略显示。这不仅能够极大提升网站界面的美观度和一致性，更能优化用户的阅读体验，帮助您的内容在众多信息中脱颖而出。熟练掌握这些过滤器，将使您的网站运营工作更加高效和专业。

常见问题 (FAQ)

  1. 问：截断后显示的省略号可以自定义样式或内容吗？

    • 答：AnQiCMS内置的截断过滤器会自动添加“…”作为省略号。目前模板引擎层面暂不支持直接自定义这个省略号的样式或内容。如果您的设计要求很高，可能需要考虑在前端通过JavaScript对截断后的文本进行二次处理来实现。

  2. 问：如果我的文章标题或简介本身就比较短，没有达到设定的截断长度，还会显示省略号吗？

    • 答：不会。AnQiCMS的这些截断过滤器非常智能。它们只会在内容的实际长度超过您设定的截断长度时，才会执行截断操作并添加省略号。如果内容本身就符合长度要求，则会完整显示，不会有多余的省略号