The long content of AnQiCMS article detail page, how to use `wordwrap` to enhance reading experience?

Optimize the long content reading experience on AnQiCMS article detail page:wordwrapThe efficient application of filters

In website operation, we often need to publish long articles containing a large amount of text, such as in-depth reports, tutorials, or detailed product introductions.This content is rich in information and is crucial for attracting and retaining readers. However, if the layout is not properly arranged, especially in a multi-device environment, excessively wide line widths can easily cause readers to feel tired while reading, and even lead them to abandon reading halfway through.wordwrapFilter, to significantly improve the comfort and user experience of reading long content on the article detail page.

Why do long contents needwordwrap?

The reading experience of long text on a web page is often limited by the actual width of the screen.When a line of text is too long, the reader's eyes need more time and effort to locate the beginning of the next line, which not only slows down reading speed but also easily causes skipped lines or misaligned lines, seriously affecting the continuity of reading.This visual discomfort is one of the main reasons for user churn.

wordwrapThe core function of the filter is to automatically wrap the overly long text content and ensure that the number of characters per line is maintained within a reasonable range.This can effectively reduce the horizontal eye movement burden for readers, making the text appear clearer and more easily traceable visually.By controlling the number of characters per line, the text can visually have more breath, no longer a dense whole block, thereby greatly improving the comfort of reading.

It is worth noting that,wordwrapThe filter intelligently breaks lines by identifying whitespace characters in the text. This means that if the content of the article is in English or a mix of English and Chinese,wordwrapCan insert line breaks between words well, avoiding excessively long lines. However, for text without any spaces,pure Chinese text, as there are no natural spaces between Chinese words,wordwrapThe filter willWill not automatically break lines in the middle of Chinese wordsIf your article is mainly continuous Chinese text and needs to implement strict character length control for line breaks, you may need to combine front-end CSSword-break: break-all;Properties, or manually segment the content more finely during content editing to achieve **effects.

How to apply in AnQiCMSwordwrap?

Apply in AnQiCMSwordwrapThe filter is very intuitive. First, we need to find the template file that controls the display of the article detail page. According to the AnQiCMS template conventions (refer todesign-director.mdDocument), the template of the article detail page is usually locatedtemplate/你的模板目录/模型table/detail.htmlortemplate/你的模板目录/archive_detail.html(The specific filename may vary depending on your model type and template design).

Open this template file and locate the tag responsible for outputting the main content of the article. Typically, this will be something similar to{% archiveDetail articleContent with name="Content" %}this structure, wherearticleContentIt is the variable we use to receive the article content (you may have used a different variable name), andname="Content"specifies the field of the article content to be retrieved.

Then, thewordwrapApply the filter to this variable and specify an appropriate limit on the number of characters per line. Additionally, since the content of the article (especially the content entered through a rich text editor) often contains HTML tags, we also need to ensure that these tags are parsed correctly by the browser rather than being escaped as plain text.safeFilter used together.

The example code is as follows:

{# 假设 archiveContent 变量包含了从后端获取到的文章 HTML 内容 #}
<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{ articleContent|wordwrap:80|safe }}
</div>

In the above example,80Represents that we want to display a maximum of about 80 characters (including spaces) per line. This number can be flexibly adjusted according to your website design, font size, and the reading habits of the target user group.