During the development of AnQiCMS templates, we often need to fill in placeholder text for pages before the real content is available, in order to better observe the layout, test styles and functions.Manually entering "test content" or "placeholder text" is time-consuming and lacks authenticity.loremLabel.
AnQiCMS 中的随机文本生成利器：Englishloremtags
loremThe inspiration for the label comes from the commonly used 'Lorem ipsum' text in printing layout, which can generate a specified number and form of 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 handle them easily.
loremBasic usage of the tag
The simplest way is to write directly at any location in the AnQiCMS template.{% lorem %}.When the page is rendered, it will generate a default-length pseudo-Latin text at this position.This text has a 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 more precisely control the length and structure of generated content,loremTags provide two key parameters:QuantityandMethod.
- Number parameter: Used to specify how many words, paragraphs, or bytes you want to generate.
- Method parametersDetermines the interpretation of 'quantity', it has three optional values:
w(words): Indicates generating by word count.p(paragraphs)：表示按段落数量生成。b(bytes)：表示按字节数量生成。
By combining these parameters, you can flexibly generate various forms of placeholder content. For example:
- Generate a short sentence with 10 words:
{% lorem 10 w %} - Generate text with 3 paragraphs:
{% lorem 3 p %} - Generate 50-byte text:
{% lorem 50 b %}
This precise control capability,loremlabels are particularly efficient in testing over different length text areas.
Add randomness
By default,loremThe text generated by the label is fixed, and the generated text is exactly the same every time the page is refreshed.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,randomparameters can be introduced. Simply inloremAdd to 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 will be randomly selected from the built-in pseudo-Latin text library to ensure that each time you see it, it is unique placeholder text.
Actual application scenarios: convenience in development and testing
loremLabels play an important role in multiple stages of website development and testing on the AnQiCMS site:
- Template layout designWhen designing the template of AnQiCMS website, you often encounter the situation where the real content is not in place. Use
loremLabels, you can quickly fill the text area and intuitively see the actual effect of the text in different layouts and font sizes, ensuring that the design draft can be perfectly converted to the actual page. - Content preview effectFor 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 live. - Responsive layout testIn testing responsive layouts under different screen sizes, irregularly long real content may cause layout jumps.
loremLabels can generate text of different lengths to help you check the robustness and adaptability of the layout under various text volumes. - Performance Testing and Layout ProofreadingFor pages that require loading 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.
Examples and Tips
Let's look at some specific examples, experienceloremFlexible use of tags:
Fill content in the common 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 loop：
In AnQiCMS, when you retrieve data from the database and display it in a loop, if a field (such as the article title or introduction) 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 toarchiveListuse in adefaultfilterer, when the realitem.Titleoritem.Descriptiondoes not exist, automatically fill with randomly generatedloremText. For thumbnails, we use an external placeholder image service and dynamically generateloremtext to simulate more diverse placeholder content.
By using flexibilityloremLabels, AnQiCMS users can greatly improve the efficiency and comprehensiveness of template development and testing. Whether it is simple text filling or simulating complex content structures,loremCan provide powerful