How to configure different `wordwrap` lengths for different modules (such as articles, products) in AnQiCMS?

In daily website operations, we often need to handle various types of text content.Sometimes, to maintain the neatness of the page layout and the reading experience, we may want long text to wrap automatically at specific lengths, especially in areas such as article lists, product descriptions, and other display areas.Further, different content modules, such as the main text on the article detail page and the description in the product list, often have different requirements for line break length.AnQiCMS (AnQiCMS) provides a flexible way to meet this requirement, allowing us to configure personalized line break lengths for different modules.

In Anqi CMS, implementing automatic line breaks relies mainly on its powerful template filter function, especiallywordwrapFilter. This filter can help us automatically wrap long text content to the specified number of characters.It works by distinguishing words based on spaces in the text and wrapping to a new line when a specified length is reached.It is worth noting that when dealing with continuous Chinese text, as Chinese does not have a natural space delimiter,wordwrapThe filter may not wrap at the middle of words, but keep continuous Chinese segments uninterrupted.

Different modules (such as articles and products) should be configured differently.wordwrapLength, we cannot rely solely on a global setting becausewordwrapIt is a filter applied in the template. This means we need to control the display level of the content on the template level.The most flexible method is to combine the custom field function of Anqin CMS content model.

Step 1: Add custom fields to the content model

First, we need to enter the Anqi CMS admin interface, find the "Content Management" option under "Content Model".The AnQi CMS provides the 'article model' and 'product model' by default.We can add a dedicated one for storing for these or any other custom modelswordwrapCustom fields of length.

For example, with the "Article Model", we can click edit and then add a new field, such as named "Line Break Length" (the field name can bewordwrap_lenThis field's type can be selected as 'number' and can have a default value, such as80This means that if the article is published without a specific specification, the default line length is 80 characters. Similarly, we can also add a similar field for the "product model", such as "product description line length" (the field name can be called...product_wordwrap_lenPlease specify a default value suitable for product description40.

In this way, we have created configurable line break length options for different content modules in the background, content editors can adjust this value according to actual needs when publishing or editing articles/products.

Step two: Apply in the templatewordwrapFilter

The critical step is to apply these custom settings in the front-end template. The template files of AnQi CMS are usually stored in/templateIn the directory, different modules will have corresponding detail page templates, for example, the article detail may bearchive/detail.html, the product detail may beproduct/detail.html.

Assuming we want to display a summary of the article content in a certain area of the article detail page, and apply a custom line break length. We can do this inarchive/detail.htmlthe template like this:

{# 首先，获取当前文章的自定义换行长度字段值 #}
{% archiveDetail archiveWordwrapLen with name="wordwrap_len" %}

{# 接下来，将文章内容（或其摘要）应用wordwrap过滤器，并使用获取到的长度值 #}
<div>
    {# 假设这里是文章的简介，需要进行换行处理，并确保HTML内容安全输出 #}
    {% archiveDetail articleDescription with name="Description" %}
    <p>{{ articleDescription|wordwrap:archiveWordwrapLen|safe }}</p>

    {# 如果是文章正文的部分截取，也可以类似操作 #}
    {# ... {{ archive.Content|wordwrap:archiveWordwrapLen|safe }} ... #}
</div>

HerearchiveWordwrapLenThe variable stores the 'line break length' value we configure for the article model in the background. When it is applied toarticleDescription(article summary), the summary will automatically wrap to the specified length.|safeThe filter is very important here, it ensures that if the text contains HTML tags, these tags can be parsed correctly by the browser instead of being displayed as plain text.

Similarly, for the product module, suppose we want to display a brief description of the product on the product list page and apply the 'product description line break length' configured in the product model. Inproduct/list.htmlorproduct/detail.htmlIn the template, we can also use a similar method:

{% archiveList products with type="page" moduleId="2" limit="10" %}
    {% for item in products %}
    <div>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        {# 获取产品模型中定义的换行长度 #}
        {% archiveParams productParams with id=item.Id sorted=false %}
        {% set productWordwrapLen = productParams.product_wordwrap_len.Value|integer %}

        {# 应用wordwrap过滤器到产品描述 #}
        <p>{{ item.Description|wordwrap:productWordwrapLen|safe }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

In this example of the product list, we usearchiveParamsThe tag retrieved the custom fields of each product, then converted them to integers and applied them toitem.Description. Each product description can be wrapped at different lengths according to its module settings.

Summary

By adding custom fields to the content model in AnQi CMS and using them in the template layer,wordwrapThe filter reads these field values, allowing us to easily customize the line break length for different content modules (such as articles, products).This flexible configuration method brings great convenience and higher customization to the presentation of our content, allowing the website content to maintain beauty while also adapting better to various display scenarios.

Frequently Asked Questions (FAQ)

1.wordwrapCan the filter be applied to any text field, not just the content description of articles or products?

Yes,wordwrapThe filter can be applied to any string variable output in the template, including article titles, category descriptions, single-page content, and so on.If you wish to apply automatic line breaks to a string based on character length, you can use this filter. For example,{{ category.Description|wordwrap:50 }}The category description will be wrapped at 50 character length.

2. If I set a customwordwraplength for a module, but the field is not filled in, what will happen?

If a custom field (such aswordwrap_len) No value has been filled in, so when trying to access it in the template, it may return an empty value or0In this case,wordwrapThe filter may not work as expected or may cause no line break effect.In order to avoid this situation, you can set a default value for this custom field in the background, or add a conditional judgment in the template. For example, if the field value is empty, use a preset alternative length.

{% archiveDetail archiveWordwrapLen with name="wordwrap_len" %}
{% set currentWordwrapLen = archiveWordwrapLen|integer %} {# 转换为整数，如果为空会是0 #}
{% if currentWordwrapLen == 0 %}{% set currentWordwrapLen = 80 %}{% endif %} {# 如果是0，设为默认80 #}
<p>{{ articleDescription|wordwrap:currentWordwrapLen|safe }}</p>

Why doesn't my Chinese text automatically wrap at the specified length but remains a long continuous string?

wordwrapThe filter mainly determines the line break point by identifying spaces in the text. Since the Chinese writing habit does not use spaces to separate words, therefore when faced with continuous Chinese text, wordwrapThe filter treats it as an indivisible whole until it encounters an English word, punctuation, or reaches the end of a paragraph, at which point it may wrap. If you need Chinese text to wrap at a specified length, even in the middle of a word, wordwrapThe filter may not be the **choice, or you may need to combine it with other front-end JavaScript libraries to achieve more refined Chinese tokenization and line breaking processing.