AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides rich template tags and filters to help users achieve diverse content display. Among them,wordwrapThe filter is a practical tool for automatically wrapping long text. Dynamically adjusting its line break parameters is particularly important for enhancing the reading experience of website content, especially in responsive design.

UnderstandingwordwrapFilter

In the template design of AnQi CMS,wordwrapThe filter can automatically wrap a long text content according to the character length you specify.Its main function is to optimize the visual presentation of text, avoiding the impact of excessively long single-line text on reading continuity.

wordwrapThe basic usage of the filter is very intuitive, you can apply it to any variable containing text content. For example:

{{ article.Content | wordwrap:20 }}

This willarticle.ContentTry to wrap text every 20 characters.

It is worth noting that,wordwrapThe filter determines the boundary of words based on spaces when performing line breaks.This means that if continuous Chinese text or long words without spaces are encountered, it will not break the line in the middle of the word.This is an important feature to consider when in use, especially for Chinese websites. Moreover,wordwrapThe filter is set to operate on plain text by default. If your content contains HTML tags, using it directly may destroy the tag structure, causing the page to display abnormally.Therefore, caution is usually needed when using content that contains HTML, or it should be considered before processing.

Method of dynamically adjusting line break parameters

To achievewordwrapDynamically adjust the line break parameter of the filter, we can introduce variable values in the template in many ways instead of hard-coded numbers.This greatly increases the flexibility and adaptability of the template and content.

1. Through internal template variables pass parameters

The most direct way is to define a variable within the template file to store the line break length, and then pass this variable towordwrapFilter. This method is suitable for scenarios where line break parameters need to be unified in a specific template or block.

You can use{% set %}Tag to define a local variable:

{% set wrap_length = 25 %}
<p>{{ article.Description | wordwrap:wrap_length }}</p>

In this case, it is only necessary to modifywrap_lengthThe value, can globally adjust all variables used in this templatewordwrapThe newline parameter of the filter.

2. Use system configuration or content field to pass parameters

A more advanced dynamic adjustment method is to let the line break parameter be obtained from the Anqi CMS backend management system.In this way, website administrators can flexibly configure line break parameters through the backend interface without modifying the template code.

  • Get from the system global settings:You can add custom parameters in the 'Global Function Settings' or 'Content Settings' of the AnQi CMS backend. For example, add a parameter namedGlobalWrapLengththe parameter and set its value to30. Then, you can get this value through thesystemtag in the template:

    {% system global_wrap_length with name="GlobalWrapLength" %}
<p>{{ article.Content | wordwrap:global_wrap_length }}</p>

    In this way, the entire website'swordwrapdefault parameters can be managed centrally in the background.

  • Obtain from the custom field of the document or category:If different content types (such as articles, products) or different categories need unique line breaks, you can add custom fields to the content model or category. For example, add a named field for the "article model".CustomWrapLengthThe numeric type field. When editing specific articles, fill in the line break length required for the article. In the template of the article detail page, you can call it like this: 

    {% archiveDetail article_wrap_length with name="CustomWrapLength" %}
{% if article_wrap_length > 0 %}
    <p>{{ article.Content | wordwrap:article_wrap_length }}</p>
{% else %}
    {# 如果自定义字段未设置，则使用一个默认值或全局设置 #}
    {% system default_wrap_length with name="GlobalWrapLength" %}
    <p>{{ article.Content | wordwrap:default_wrap_length|default:20 }}</p>
{% endif %}

    This way provides extremely high flexibility, allowing different line break behaviors to be defined for each article, product, and even category.

3. Implement dynamic line breaks with conditional judgments.

In some cases, you may want to apply different line break parameters based on different conditions.For example, use a shorter line break length on mobile devices to fit small screens, and use a longer length on desktop devices.This can be judged by the condition in the template (ifTag) to implement:

{% set current_wrap_length = 20 %} {# 默认值 #}

{# 假设您有一个变量 `is_mobile` 来判断当前设备类型 #}
{% if is_mobile %}
    {% set current_wrap_length = 15 %}
{% else %}
    {% set current_wrap_length = 30 %}
{% endif %}

<div class="content-block">
    {{ article.Content | wordwrap:current_wrap_length }}
</div>

By this means,wordwrapThe filter can intelligently adjust its behavior according to the runtime environment or specific logic.

Points to note

  • Chinese text processing:Emphasize again,wordwrapThe filter mainly identifies line breaks through spaces. For continuous Chinese text, it will not break at the middle of a character even if it exceeds the specified length.If you need to truncate Chinese characters precisely or wrap lines, you may need to find other custom filters or JavaScript solutions.
  • Compatibility of HTML content:If you wishwordwrapThe content may contain HTML tags, using the filter directly may cause the tags to be incorrectly truncated. It is recommended that you apply the filter to text containing HTML.wordwrapBefore, remove HTML tags first, or use this filter only on plain text.
  • safeUsing the filter:WhenwordwrapThe processed text needs to be rendered as HTML content when (for example, if the original content includes<b>or<em>Label, and you want these labels to remain effective after line breaks), please be sure to add them in the final output|safeFilter to prevent HTML entities from being escaped.

Summary

Of Security CMSwordwrapThe filter combines template variables and backend configurations to dynamically adjust flexible line parameters.This not only helps us better control the layout of text and improve the readability of content, but also allows for quick response to changes in design and content strategy without modifying the code.Fully utilizing these features will make your website more attractive and professional in content display.

Frequently Asked Questions (FAQ)

1.wordwrapCan the filter identify and correctly handle HTML tags in text?Generally speaking,wordwrapThe filter is based on plain text logic for line breaks, it does not recognize HTML tags. If you use text containing HTML tagswordwrapA filter may cause the label structure to be unexpectedly truncated or destroyed, which may affect the display of the page. It is recommended to use it when dealing with content that includes HTML.wordwrapBefore, consider removing the HTML tags, or ensure that this filter is only applied to the plain text content section.

2. Why did I setwordwrap:20But the continuous Chinese text did not break line at the 20th character? wordwrapThe filter mainly identifies