How to generate random text in AnQiCMS template as placeholder content for development testing display?

During the development of AnQiCMS templates, we often need to fill in placeholder text on the page before the real content is in place, so that we can better observe the layout, test the styles and functions.Manually entering "test content" or "placeholder text" is time-consuming and lacks authenticity.Fortunately, AnQiCMS provides a very convenient built-in tag that can elegantly solve this problem--that islorem.

A random text generator in AnQiCMS:loremTag

loremThe label is inspired by the commonly used "Lorem ipsum" text in printing layout, which can generate pseudo-Latin text according to your needs, perfectly solving the problem of layout preview when content is missing. Whether you need a short sentence with a few words or a long text with several paragraphs, loremTags can easily handle it.

loremBasic usage of tags

The simplest usage is to directly write in any position of the AnQiCMS template{% lorem %}. When the page is rendered, it will generate a default-length pseudo-Latin text at this position.This text is of moderate length, enough to fill most common text areas, giving you an initial perception of the overall visual effect of the content.

Control the number and type of text

To control the length and structure of the generated content more accurately,loremThe label provides two key parameters:QuantityandMethod.

  1. Number parameter: Used to specify how many words, paragraphs, or bytes you want to generate.
  2. Method parameterIt determines the interpretation of 'quantity', which has three optional values:
    • w(words): It indicates generating by word count.
    • p(paragraphs): Indicate the generation by the number of paragraphs.
    • b(bytes): Indicate the generation by the number of bytes.

By combining these parameters, you can flexibly generate various forms of placeholder content. For example:

  • Generate a short sentence of 10 words:{% lorem 10 w %}
  • Generate 3 paragraphs of text:{% lorem 3 p %}
  • Generate 50-byte text:{% lorem 50 b %}

This precise control capability enablesloremTags are particularly efficient in tests of text regions with different lengths.

Add randomness

By default,loremThe text generated by the label is fixed, and the text generated each time the page is refreshed is the same.But in some test scenarios, you may want to see different placeholder content each time you refresh, to simulate the randomness of real website content, or to check the stability of the layout under different text lengths.

At this point, it is possible to introducerandomparameters. Simply inloremAdd at the end of the labelrandomThat's it, for example:

  • Generate 15 random words:{% lorem 15 w random %}
  • Generate 2 random paragraphs:{% lorem 2 p random %}

addrandomAfter the parameter, every time the page loads,loremLabels are randomly selected from the built-in pseudo-Latin text library, ensuring that each time you see it, it is a unique placeholder text.

Actual application scenarios: convenience in development and testing

loremLabels play an important role in the multiple stages of development and testing of the AnQiCMS website:

  1. Template layout design: When you are designing the template of AnQiCMS website, you often encounter the situation where the real content is not in place. UseloremLabel, you can quickly fill in the text area and intuitively see the actual effect of text in different layouts and font sizes, ensuring that the design can be perfectly converted to the actual page.
  2. Content Filling Effect PreviewFor example, a list page of articles may need to display article titles and summaries. Use{% lorem 8 w %}as the title,{% lorem 60 w %}As an introduction, it can effectively preview the visual balance of list items, avoiding layout disorder due to uneven text length after the real content goes online.
  3. Responsive layout test：When testing responsive layouts for different screen sizes, irregularly long real content can cause layout jumps.loremLabels can generate text of different lengths to help you check the robustness and adaptability of the layout with various amounts of text.
  4. Performance testing and layout proofreadingFor pages that need to load a large amount of text content, you can generate hundreds of words or multiple paragraphs to simulate real load, and evaluate the page loading speed and rendering performance.At the same time, it also allows designers and editors to better proofread the text flow and reading experience during the layout stage.

Usage examples and tips

Let's look at some specific examples and experienceloremFlexible use of tags:

Fill content in the ordinary page block:

<div class="hero-section">
    <h1>{% lorem 6 w %}</h1>
    <p>{% lorem 30 w %}</p>
    <a href="#" class="button">{% lorem 2 w %}</a>
</div>

<div class="about-us">
    <h2>{% lorem 4 w random %}</h2>
    <p>{% lorem 2 p random %}</p>
</div>

Display as default content in the article list loopIn AnQiCMS, when you retrieve data from the database and display it in a loop, if a field (such as the article title or summary) may be empty, you can combinedefaultFilters andloremLabel, provide elegant placeholder content for these empty fields.

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <div class="article-preview">
        <h3><a href="{{ item.Link }}">{{ item.Title|default:{% lorem 8 w random %} }}</a></h3>
        <p>{{ item.Description|default:{% lorem 50 w random %} }}</p>
        <small>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02")|default:{% lorem 3 w %} }}</small>
        {% if not item.Thumb %}
            <img src="https://via.placeholder.com/150/EEEEEE/999999?text={% lorem 2 w %}" alt="{% lorem 3 w %}">
        {% endif %}
    </div>
    {% else %}
    <p>暂时没有文章内容可供显示。</p>
    {% endfor %}
{% endarchiveList %}

This example shows how toarchiveListusedefaultFilter, when the realitem.Titleoritem.Descriptiondoes not exist, automatically fill in randomly generated ones.loremText. We used an external placeholder image service for thumbnails and dynamically generated the images on top of them.loremText to simulate more diverse placeholder content.

By flexible applicationloremLabel, AnQiCMS users can greatly improve the efficiency and comprehensiveness of template development and testing. Whether it is simple text filling or complex content structure simulation,loremCan provide powerful