In daily website operations, we often need to handle various types of text content.Sometimes, to maintain the neatness of the page layout and reading experience, we may want long texts to automatically wrap at specific lengths, especially in areas such as article lists and product descriptions.Further more, different content modules, such as the main text in the article detail page and the description in the product list, often have different requirements for line break lengths.AutoCMS (AutoCMS) provides a flexible way to meet this requirement, allowing us to configure personalized text line break length for different modules.
In AnQi CMS, the automatic line break of text mainly depends on its powerful template filter function, especiallywordwrapFilter.This filter helps us automatically wrap the long text content according to the specified number of characters.It works by distinguishing words based on spaces in the text and wrapping at the specified length.wordwrapFilter may not break lines in the middle of words, but keep continuous Chinese segments intact.
Configure different modules (such as articles and products) differentlywordwrapLength, we cannot rely solely on a global setting becausewordwrapis a filter applied in the template.This means that we need to control at the level of the template for content display.The most flexible approach is to combine the security CMS content model custom field feature.
Step 1: Add custom fields to the content model
Firstly, we need to enter the backend management interface of AnQi CMS, find the 'Content Model' option under 'Content Management'.The "Article Model" and "Product Model" are provided by the AnQi CMS by default.wordwrapcustom fields for length.
For example, using the "article modelwordwrap_lenThis field can choose the type “number” and can set a default value, such as80This means that if the article is published without any special specification, the default line length is 80 characters. Similarly, we can also add a similar field for "product modelproduct_wordwrap_len),and set a suitable default value for the product description,40.
Through this method, we have created configurable line break options for different content modules in the background. Content editors can adjust this value according to their actual needs when publishing or editing articles/products.
第二步:在模板中应用wordwrapFilter
接下来,关键一步是在前端模板中应用这些自定义设置。安企CMS的模板文件通常存放在/templateThe directory contains detailed page templates for different modules, such as article details may be inarchive/detail.html, product details may be inproduct/detail.html.
Assuming we want to display an abstract of the article content in a certain area of the article detail page, and apply a custom line break length. We can do it like this:archive/detail.htmlTemplate operation:
{# 首先,获取当前文章的自定义换行长度字段值 #}
{% 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>
Here are thearchiveWordwrapLenThe variable will store the "line break length" value that we configure for the article model in the background. When it is appliedarticleDescriptionto the (article abstract), the abstract will be automatically wrapped at the specified length.|safeThe filter is very important here, it ensures that if the text contains HTML tags, these tags are correctly parsed by the browser instead of being displayed as plain text.
Similarly, for the product module, suppose we want to display the brief description of the product on the product list page and apply the 'Product Introduction Line Break Length' configured in the product model.product/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 go througharchiveParamsThe label retrieves each product's custom field and then converts it to an integer and applies it toitem.Description. Thus, each product description can be wrapped at different lengths according to the module settings.
Summary
Through adding custom fields to the content model in the Anqi CMS and utilizing the template layer,wordwrapFiltering these field values allows us to easily achieve the goal of configuring personalized line breaks 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.
Common Questions (FAQ)
1.wordwrapIs the filter applicable 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, etc.If you want to apply automatic line breaks to a string based on character length, you can use this filter.{{ category.Description|wordwrap:50 }}The category description will be wrapped at 50 characters.
2. If I set a custom for some modulewordwrapwhat will happen if the field length is set but the value is not filled in?
if a custom field (such aswordwrap_lenIf no value is filled in, when attempting to retrieve it in the template, it may return an empty value or0In this case,wordwrapThe filter may not work as expected, or may not produce a newline effect.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. If the field value is empty, use a preset backup 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>
3. Why doesn't my Chinese text automatically wrap at the specified length, but remains a long continuous string?
wordwrapThe filter determines the line break points by identifying spaces in the text. Since Chinese writing habits do not use spaces to separate words, therefore when faced with continuous Chinese text, wordwrapThe filter will treat 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 to a new line. If you need Chinese text to wrap at a specified length even in the middle of a word,wordwrapThe filter may not be**selected, or you may need to combine other frontend JavaScript libraries to achieve more refined Chinese segmentation and line breaking.