As an experienced website operation expert, I know the importance of content presentation in a content management system for user experience and the overall aesthetics of the website.AnQiCMS as an enterprise-level content management system developed based on the Go language, with its high efficiency, customizable and easy-to-expand features, provides strong technical support for content operations.loremLabels and powerful text truncation can be very useful.

Today, let's delve into how to cleverly combine in AnQiCMS templates.loremLabels for testing text truncation functionality, ensuring visual consistency and user-friendliness of content display.

AnQiCMS Template Basics: Flexible Content Presentation Skeleton

In AnQiCMS, the template is the core of website content presentation.It adopts syntax similar to Django template engine, allowing developers to build pages in a straightforward manner..htmlThe template file with suffixes in/templateThe directory defines the page structure, and uses double curly braces{{变量}}to render data, using single curly braces and percentage signs{% 标签 %}Control the logic flow, such as conditional judgments and loops.This mechanism endows AnQiCMS with great flexibility, allowing content operators to easily achieve personalized content display according to business needs.

loremTags: a quick tool for filling in test content

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

loremThe usage 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 10 random words of text (wrepresenting words).
  • Generate text of a specified number of paragraphs: {% lorem 3 p %}This will generate 3 random paragraphs (prepresent paragraphs).
  • Add randomness: {% lorem 5 w random %}By addingrandomParameter, the text generated each time the page is refreshed will be different, which is very helpful for testing the text length variation under extreme conditions.

PassloremLabels, we do not need to manually write a large amount of text, and we can quickly simulate real content in the template, especially suitable for scenarios where text length adjustment is required to adapt to the layout.

Text Truncation Filter: Fine-grained control of content length

When we control the length of text on article list pages, product overviews, or any place that requires content summaries, it is crucial to maintain page neatness and information focus.AnQiCMS provides a series of powerful text truncation filters to help us accurately control the display length of content.tag-filters.mdDetailedly listed in the document, they are usually followed by a pipe symbol|Combined with variables.

Several commonly used text truncation filters include:

  • truncatechars:长度:Truncate pure text by character count. For example,{{ item.Title|truncatechars:20 }}Truncate the title to 20 characters, and the part beyond will be replaced with “…”.
  • truncatewords:长度:Truncate pure 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 structures to avoid rendering errors due to truncation. This is especially useful when handling content containing HTML tags (such as article summaries), but it needs to be used in conjunction with|safeFilter used to ensure HTML is parsed correctly.
  • truncatewords_html:长度:Truncates HTML text by word count, while also preserving the HTML tag structure and using|safeFilter.

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

Practice Session:loremCombined with the truncation feature

Now, let's goloremTags and text truncation filters combined to simulate a common website scenario: article list page, each article only displaying the title and a limited-length summary.

Suppose we are editing a template file for an article list, for examplearchive/list.htmlor the homepage'sindex.htmlsome content area. We want to display a limited number of characters for the article summary.

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

The following is a specific code example, demonstrating how to combine in AnQiCMS template.loremTags andtruncatechars_htmlFilter 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 -%}toloremWrap the generated content.filterLabel allows us to apply filters (here it istruncatechars_html) to the entire code block inside. The hyphens on both sides.-This is the remove logic label line usage function of AnQiCMS template, it can remove extra blank lines to make the generated HTML neater.
  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 should be properly closed, which will not destroy the page structure.

Preview this template in the browser, and you will see an article list item that includes a title, truncated simulated summary (ending with an ellipsis), and a 'Read more' link. You can modifytruncatechars_htmlThe following numbers, such as50/200等，quickly test the changes in page layout at different truncation lengths, verify whether the design is robust, and avoid interface jumping or layout confusion caused by content that is too long or too short.

From simulation to practice: Optimize real content truncation

Once we have passed throughloremTags have completed template layout and truncation