How to adapt the `linenumbers` filter for different screen sizes on mobile pages?

In AnQi CMS,linenumbersThe filter is a very practical feature that can automatically add line numbers to multi-line text content, which is especially convenient for displaying code snippets, step-by-step instructions, and other scenarios.However, when this content with line numbers is displayed on the mobile page, how to ensure its good readability and layout adaptation is a problem we need to pay attention to in content operation.

UnderstandinglinenumbersHow does the filter work?

Firstly, we need to clarifylinenumbersHow the filter generates line numbers. According to the document description, it addsN.(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 numbers are directly inserted as part of the text at the beginning of each line, rather than as separate HTML elements (such as<span>or<li>This limits us to control line numbers directly via CSS (for example, only making the line numbers smaller while the 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 size

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

1. Use responsive design (adaptive template pattern)

This is the most commonly used and recommended adaptation method. By using CSS media queries, we can adjust the styles of the line numbers included according to the screen width.

• Wrap content in a container:Whether the content you are dealing with is 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 through 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 lead to content exceeding the width of the mobile screen, thus breaking the page layout and causing a horizontal scroll bar. To solve this problem, you can useoverflow-x: auto;. So that 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, they are usually preservedwhite-space: pre;to maintain the code format, at this timeoverflow-x: auto;It is the main means to prevent overflow. For general text,white-space: pre-wrap;it is allowed to wrap the text automatically without destroying the line number logic.

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

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

• Consider whether to hide line numbers (not recommended):AlthoughlinenumbersThe filter will embed line numbers directly into the text, but if line numbers on mobile devices indeed cause serious reading difficulties, and you think the benefits of not displaying line numbers on mobile devices outweigh their informational value, you can hide the entire container containing line numbers through media queries.Please note that this means the entire content block will be hidden, rather than just hiding the line numbers.If you only need to hide the line numbers while keeping the content, you will need more complex JavaScript logic to dynamically remove the line number prefix.

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

2. Adapt for different template types

Our AnQi CMS supports different template types, which provides us with finer-grained control.

• PC+Mobile independent site mode:If your website