How to combine the `lorem` tag in AnQiCMS templates to test the text truncation feature?

As an experienced website operations expert, I know the importance of the way content is presented in a content management system for user experience and the overall beauty of the website.AnQiCMS as an enterprise-level content management system based on the Go programming language, provides strong technical support for content operations with its high efficiency, customizable, and easy to expand features.During the process of website design and content deployment, we often need to test how different lengths of text are presented in templates, at this time, AnQiCMS providesloremLabels with powerful text truncation features can be very useful.

Today, let's delve into how to cleverly combine in AnQiCMS templates.loremTo test the text truncation feature, ensuring the visual consistency and user-friendliness of content display.

AnQiCMS Template Basics: Flexible Content Presentation Skeleton

In AnQiCMS, templates are the core of website content presentation.It adopts a syntax similar to the Django template engine, allowing developers to build pages in a straightforward manner.We passed.htmlThe template file with suffix is located in/templateDefine the page structure under the directory and render data through double curly braces{{变量}}By single curly braces and percentage signs{% 标签 %}To control the logic flow, such as conditional judgments and loops. This mechanism endows AnQiCMS with great flexibility, allowing content operators to easily implement personalized content display according to business needs.

loremTag: A quick way to fill in test content

In the template development or UI design phase, we often face a challenge: without real text content to fill the layout, it is impossible to intuitively evaluate the design effect. AnQiCMS'sloremThe tag is designed to solve this pain point. It can quickly generate random Latin text of a specified length as placeholder content, greatly improving development efficiency.

loremThe use of labels is very simple:

• Generate text paragraphs of default length: {% lorem %}This will generate a standard length of Lorem Ipsum text.
• Generate text with a specified number of words: {% lorem 10 w %}This will generate a random text of 10 words （wrepresenting words）.
• Generate text with a specified number of paragraphs: {% lorem 3 p %}This will generate 3 random paragraphs （pRepresent paragraphs).
• Add randomness: {% lorem 5 w random %}By addingrandomThe parameter is generated differently each time the page is refreshed, which is very helpful for testing the variation of text length in extreme cases.

ByloremTags, we don't need to manually write a lot of text to quickly simulate real content in templates, especially suitable for scenarios where text length needs to be repeatedly adjusted to fit the layout.

Text truncation filter: fine-grained control of content length

It is crucial to control the length of text on article list pages, product overviews, or any place where content summaries are needed to keep the page tidy and focused on information.AnQiCMS provides a series of powerful text truncation filters to help us accurately control the display length of content.These filters are intag-filters.mdDetailed in the document, they are usually followed by a pipe|Combined with variables.

Several commonly used text truncation filters include:

• truncatechars:长度:Truncate text by character count. For example,{{ item.Title|truncatechars:20 }}Truncate the title to 20 characters, and use "..." to replace the excess.
• truncatewords:长度:Truncate text by word count. For example,{{ item.Description|truncatewords:15 }}The description will be truncated to 15 words.
• truncatechars_html:长度:Truncate HTML text by character count while intelligently preserving HTML tag structure to avoid rendering errors due to truncation. This is particularly useful when handling content containing HTML tags (such as article summaries) but needs to be配合|safeThe filter is used to ensure that HTML is parsed correctly.
• truncatewords_html:长度:Truncates HTML text by word count, while also retaining the HTML tag structure and using|safefilter.

These filters are all dedicated to ensuring the readability of the content and the integrity of the page layout while truncating.

Practical exercise:loremCombined with the truncation feature.

Now, let's insertloremThe tag and text truncation filter combined to simulate a common website scenario: article list page, where each article only displays the title and a limited-length introduction.

Suppose we are editing a template file for an article list, for examplearchive/list.htmlor the home page'sindex.htmlsome content area. We hope to display the article introduction with a limited number of words.

First, we can introduceloremtags to generate simulated long text, then usefiltertags to apply the truncation filter to this long text block.filterThe tag can apply the filter to the entire content block inside the tag, rather than just a variable.

Here is a specific code example demonstrating how to combineloremTags andtruncatechars_htmla filter to test text truncation:

<div class="article-list-item">
    <h3>AnQiCMS内容截断测试文章标题</h3>
    <div class="article-summary">
        {# 使用filter标签包裹lorem生成的大段HTML文本，并应用truncatechars_html截断 #}
        {%- filter truncatechars_html:150 %}
            {# 生成5个段落的HTML文本，模拟真实文章内容 #}
            {% lorem 5 p %}
            <p><strong>安企CMS</strong>是一个基于Go语言开发的企业级内容管理系统，致力于提供高效、可定制、易扩展的内容管理解决方案。</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
                <li>列表项3</li>
            </ul>
        {%- endfilter -%}
    </div>
    <a href="#">阅读更多</a>
</div>

In this example:

1. We use{%- filter truncatechars_html:150 %}and{%- endfilter -%}toloremto wrap the generated content.filterLabels allow us to apply filters (here istruncatechars_html) to the entire code block inside. The dashes on both sides.-Is the removal logic label feature of AnQiCMS template, which can remove extra blank lines to make the generated HTML cleaner.
2. {% lorem 5 p %}Generated a long text containing HTML tags (because it generates paragraphs).
3. truncatechars_html:150Will intelligently truncate these HTML texts to about 150 characters and ensure<strong>/<p>/<ul>/<li>HTML tags are correctly closed, which will not destroy the page structure.

By previewing this template in the browser, you will see an article list item that includes a title, truncated mock summary (ending with an ellipsis), and a "Read More" link. You can modifytruncatechars_htmlthe following numbers, such as50/200Quickly test the change in page layout at different truncation lengths, verify whether the design is robust, and avoid interface jumps or layout confusion caused by content that is too long or too short.

From Simulation to Practice: Optimizing Real Content Truncation

Once we pass throughloremThe tag completed the template layout and truncation