在安企CMS中，linenumbers过滤器是一个非常实用的功能，它能为多行文本内容自动添加行号，这对于展示代码片段、分步骤说明等场景尤为方便。然而，当这些带有行号的内容在移动端页面上显示时，如何确保其良好的可读性和布局适配，是我们在内容运营中需要关注的问题。

理解linenumbers过滤器的工作方式

首先，我们需要明确linenumbers过滤器是如何生成行号的。根据文档描述，它会给每一行文本内容前面加上N.（其中N是行号），例如：

1. This is a simple text.
2. This too, as a paragraph.

这意味着行号是作为文本内容的一部分直接插入到每一行开头的，而不是独立的HTML元素（如<span>或<li>），这限制了我们直接通过CSS来单独控制行号样式（比如只把行号变小而正文不变）。因此，我们的适配策略将主要围绕如何整体管理这些带有行号的文本块。

针对移动端屏幕尺寸的适配策略

安企CMS在模板设计上提供了“自适应”、“代码适配”和“PC+手机独立站点”等多种模式，这为我们适配移动端提供了灵活的空间。

1. 采用响应式设计（自适应模板模式）

这是最常用也是最推荐的适配方式。通过CSS媒体查询（Media Queries），我们可以根据屏幕宽度调整包含行号内容的样式。

  • 将内容包裹在容器中： 无论您的内容是代码块还是普通文本，建议首先将其包裹在一个具有特定语义的HTML容器中，例如一个<div>或者<pre>标签，并为其指定一个类名，方便后续通过CSS进行控制。

    <div class="line-numbered-content">
    {{ archiveContent|linenumbers|safe }}
</div>

  • 处理水平溢出（特别是代码块）： 对于包含代码或长文本的行，即使加上行号，也可能导致内容超出移动端屏幕宽度，从而破坏页面布局，出现横向滚动条。为了解决这个问题，可以在容器上使用overflow-x: auto;。这样，如果内容过宽，用户可以水平滚动查看，而不会影响整体页面布局。

    /* 在小屏幕设备上应用 */
@media screen and (max-width: 767px) { /* 示例断点，可根据实际情况调整 */
    .line-numbered-content {
        overflow-x: auto; /* 允许内容水平滚动 */
        white-space: pre-wrap; /* 允许文本在单词间换行，但保留原始空格 */
        /* 也可以考虑其他更适合代码的换行方式，如 white-space: pre; 配合 overflow-x: auto; */
    }
}

    对于代码块，通常会保留white-space: pre;以保持代码格式，此时overflow-x: auto;是防止溢出的主要手段。对于普通文本，white-space: pre-wrap;可以在不破坏行号逻辑的前提下，允许文本内容自动换行。

  • 调整字体大小和行高： 在小屏幕设备上，默认的字体大小和行号所占用的空间可能会使内容显得过于拥挤，影响阅读体验。通过媒体查询，我们可以适当地减小字体大小，并调整行高，以增加内容的呼吸感。

    @media screen and (max-width: 767px) {
    .line-numbered-content {
        font-size: 0.85em; /* 减小字体大小 */
        line-height: 1.6; /* 调整行高 */
        padding: 10px; /* 增加内边距，避免内容紧贴屏幕边缘 */
    }
}

  • 考虑是否需要隐藏行号（较不推荐）： 虽然linenumbers过滤器会将行号直接嵌入文本，但如果行号在移动端确实造成了严重的阅读障碍，并且您认为在移动端不显示行号的收益大于其信息价值，可以通过媒体查询将整个包含行号的容器隐藏。但请注意，这意味着整个内容块都会被隐藏，而不是仅仅隐藏行号。如果您只需要隐藏行号而保留内容，则需要更复杂的JavaScript逻辑来动态移除行号前缀。

    /* 如果确实需要完全隐藏行号及内容 */
@media screen and (max-width: 480px) {
    .line-numbered-content {
        display: none; /* 隐藏整个内容块 */
    }
}

2. 针对不同模板类型进行适配

安企CMS支持不同模板类型，这为我们提供了更细粒度的控制。

  • PC+手机独立站点模式： 如果您的网站