How to combine `wordwrap` and conditional judgment in AnQiCMS template to achieve flexible line breaks?

In AnQiCMS templates, flexibly controlling text wrapping is a key factor in optimizing content display and user experience.When encountering long text content, if not handled properly, it may cause layout disorder or reading difficulties.Luckyly, AnQiCMS has provided us with powerfulwordwrapFilters and flexible conditional judgment statements allow us to easily implement an intelligent text wrapping strategy.

Get to knowwordwrapFilter: Intelligent manager for long text.

wordwrapThe filter is a very practical feature in the AnQiCMS template engine, which is mainly used to automatically add line breaks to long text according to the specified length.This is like setting a width limit for text, once the text length reaches this limit, it will automatically start a new line.

UsewordwrapVery direct, just apply it to the text variable that needs to be processed and provide a number as the line break length parameter. For example:

{{ article.Content|wordwrap:30 }}

This line of code willarticle.ContentThe text, try to wrap after about 30 characters. It is worth noting that,wordwrapThe filter will prefer to break lines between words. This means that if your text is a continuous non-English content (such as a paragraph without punctuation marks in Chinese),wordwrapIt may not force line breaks between Chinese characters because it cannot find spaces between 'words'. Therefore, when processing continuous text such as Chinese, special attention must be paid to its line break effect.

If you want to bewordwrapThe processed text can be displayed as multi-line on the page, it usually also needs to be combined with CSS styles or another related filter in the AnQiCMS template.linebreaksbr.linebreaksbrConverts newline characters to HTML's<br />tags so that the browser can render the line breaks correctly. For example:

<p>{{ article.Description|wordwrap:50|linebreaksbr|safe }}</p>

Here we also usedsafefilter to ensure that bylinebreaksbrGenerated<br />Tags can be parsed by the browser instead of being displayed as plain text.

Flexible use of conditional judgments: making text display more intelligent

Conditional judgment statements in AnQiCMS templates (if/elif/elseProvided with powerful logical control capabilities, allowing us to decide the display of content based on different conditions. This is very similar to conditional branches in programming languages, and the syntax is also very intuitive:

{% if condition1 %}
    <!-- 当condition1为真时显示的内容 -->
{% elif condition2 %}
    <!-- 当condition1为假，condition2为真时显示的内容 -->
{% else %}
    <!-- 以上条件都为假时显示的内容 -->
{% endif %}

By these conditions, we can check the length of text, whether a variable exists or meets a specific value, etc., thereby realizing more refined template logic. For example, we can use{{ some_variable|length }}To get the text length, as the basis for conditional judgment.

wordwrapJoint with conditional judgment: to achieve dynamic line breaks.

towordwrapFiltering combined with conditional judgment allows us to implement various complex text wrapping requirements, making web content more dynamic and intelligent.

Scene one: Break lines as needed, avoid excessive formatting

Not all text needs to be强制换行，often only when the text is too long, do we need to break it up.wordwrapHandle. We can easily achieve this through conditional judgment.

Assuming we want to wrap a summary text when it exceeds 100 characters, otherwise keep it as is:

{% if article.Description|length > 100 %}
    <p>{{ article.Description|wordwrap:50|linebreaksbr|safe }}</p>
{% else %}
    <p>{{ article.Description|safe }}</p>
{% endif %}

This code first checksarticle.DescriptionThe length. If it exceeds 100, then applywordwrapThe filter will break the text every 50 characters and convert it to HTML<br />tags; otherwise, display the original text directly.

Scenario two: Different line break strategies under different situations

In different areas of the website or for different types of devices, we may need different line break lengths.For example, on the article list page, to save space, text wrapping may need to be denser;And on the detail page, for a better reading experience, line breaks can be set more loosely.

Here, you can combine the characteristics of the text content or the page context to decide:

{% if page_type == "list" %}
    {# 在列表页，文本长度更短，换行也更密集 #}
    <p>{{ article.Title|wordwrap:20|linebreaksbr|safe }}</p>
{% elif page_type == "detail" %}
    {# 在详情页，允许更长的单行文本 #}
    <p>{{ article.Description|wordwrap:60|linebreaksbr|safe }}</p>
{% else %}
    {# 默认情况 #}
    <p>{{ article.Description|safe }}</p>
{% endif %}

Herepage_typeIs a hypothetical template variable, you can define it according to the actual template context or through URL parameters and other ways.

Scenario three: special handling for specific content types

Taking into accountwordwrapThe characteristics of non-English continuous text, if your website contains content in multiple languages, or if you have special requirements for line breaks in Chinese content, you can use conditional judgments to avoid unnecessary processing.

For example, if you can judge that the current content is Chinese and do not wantwordwrapTo break the continuity of Chinese, you can design it like this:

{% if current_language == "en" and long_text|length > 80 %}
    {# 仅对英文长文本进行wordwrap处理 #}
    <p>{{ long_text|wordwrap:40|linebreaksbr|safe }}</p>
{% else %}
    {# 其他语言或短文本，保持原样 #}
    <p>{{ long_text|safe }}</p>
{% endif %}

Herecurrent_languageThis is a hypothetical language identifier variable. If such a variable does not exist, it is possible to judge a specific content model or field.

Practical suggestions and precautions

• Test firstIn practical application:wordwrapCombine with conditional judgment, be sure to perform thorough testing on different browsers and devices to ensure the display effect meets expectations.
• Balancing readability.: A short line break can lead to text fragmentation, affecting reading experience; a long line break may not achieve the layout purpose. Choosing the appropriate line break length is crucial.
• Combined with CSS: For more fine-grained text layout control, such as word breaking (word-break) and overflow wrapping (overflow-wrap）etc., can be combined with CSS stylesheets, the template is only responsible for the initial data processing.
• Performance considerationAlthough template engines are very efficient, attention should still be paid to avoid overly complex nesting logic when processing a large amount of long text and complex conditions to ensure page loading speed.

By reasonably utilizing the AnQiCMS providedwordwrapFilters and condition judgments can provide website visitors with a cleaner, more readable text display, effectively improving the overall user experience.

Frequently Asked Questions (FAQ)

1. wordwrapHow does the filter handle line breaks in continuous non-English text like Chinese? wordwrapThe filter mainly identifies words based on spaces and performs line breaks.For Chinese text that is continuous without spaces, it usually does not automatically insert line breaks between the characters.If you need to perform word-level line breaks in Chinese, you may need to combine CSS'sword-breakOr JavaScript and other front-end technologies, or through other custom methods in the AnQiCMS template.

2. How towordwrapDoes the processed text truly implement line breaks? wordwrapThe filter will insert line breaks within the text (\n），But HTML browsers do not render these newline characters visually by default. To display them as multiple lines, you usually need to wrap the processed text content in<pre>Within a tag, or a more common and flexible approach is to,wordwrapthe filter meetslinebreaksbrChain the filter, for example,{{ text|wordwrap:50|linebreaksbr|safe }}.linebreaksbrWill\nto HTML<br />Tag to achieve line break effect.

3. Besides text length, what conditions can I use to determine whether to applywordwrapor adjust its parameters?In addition to text length, you can use any variables or expressions available in the AnQiCMS template for conditional judgment. For example, you can base it on:

   • Page Type: such as{% if page_type == 'sidebar' %}In the sidebar, a shorter line break is displayed.
   • Content model: such as{% if archive.ModuleId == 1 %}Different line break rules are applied to the article model and product model.
   • Custom field value: If your content model has custom fields (such asarchive.DisplayModeYou can adjust the line break strategy according to its value.
   • User permissions or language settings: Although these variables are not directly mentioned in the document, they can also be used as a basis for judgment if the template context provides this information.

Hope this information helps you better implement flexible text wrapping in AnQiCMS.