In the Anqi CMS,linenumbersA filter is a very practical feature that can automatically add line numbers to multiline text content, which is especially convenient for displaying code snippets, step-by-step instructions, and similar scenarios.However, when these contents with line numbers are displayed on mobile pages, how to ensure their good readability and layout adaptation is a problem we need to pay attention to in content operation.

UnderstandinglinenumbersHow the filter works

Firstly, we need to be clearlinenumbersHow the filter generates line numbers. According to the documentation, it adds a line number before each line of text content.N.(where N is the line number), for example:

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

This means that the line number is directly inserted as part of the text content at the beginning of each line, rather than as a separate HTML element (such as<span>or<li>This limits us to control the line number style directly through CSS separately (such as making the line numbers smaller while the main text remains unchanged).Therefore, our adaptation strategy will mainly focus on how to manage these text blocks with line numbers as a whole.

Adaptation strategy for mobile screen sizes

The AnQi CMS provides various modes such as 'adaptive', 'code adaptation', and 'PC+mobile independent sites' in template design, which provides us with flexible space for mobile adaptation.

1. Adopt responsive design (Adaptive template pattern)

This is the most commonly used and recommended adaptation method.We can adjust the style of line number content based on screen width through CSS media queries (Media Queries).

  • Wrap content in a container:[en]No matter what content you have, whether it's a code block or plain text, it is recommended to wrap it in an HTML container with specific semantics, such as a<div>or<pre>Label, and specify a class name for it, which is convenient for subsequent control via CSS.

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

  • Handle horizontal overflow (especially for code blocks):For lines containing code or long text, even with line numbers, it may still cause the content to exceed the width of the mobile screen, thereby breaking the page layout and causing horizontal scrollbars. To solve this problem, you can useoverflow-x: auto;Thus, if the content is too wide, the user can scroll horizontally to view it without affecting the overall page layout.

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

    For code blocks, it is usually preservedwhite-space: pre;to maintain the code format, at this timeoverflow-x: auto;Is the main means to prevent overflow. For ordinary text,white-space: pre-wrap;Allow text content to wrap automatically without breaking the line number logic.

  • Adjust font size and line height:On small screen devices, the default font size and line spacing may take up too much space, making the content appear too crowded and affecting the reading experience.By using media queries, we can appropriately reduce the font size and adjust the line height to enhance the breathing of the content.

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

  • Consider whether you need to hide line numbers (not recommended):Althoughlinenumbers

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

2. Adapt for different template types

【en】The Anqi CMS supports different template types, which provides us with more fine-grained control.

  • 【en】PC+Mobile Independent Site Mode:【en】If your website