In the process of developing website projects, we often face a common challenge: how to effectively build and test the layout and style of the website in the absence of actual content?From design prototypes to front-end development, filling in real content is time-consuming and impractical, and simple placeholder text is also difficult to simulate the visual effect of real content.

AnQiCMS provides a very practical and concise solution - the random text generation function, that isloremLabel. This feature allows developers to quickly insert dummy text of a certain structure and length into templates (usually Latin text)Lorem ipsum)，Thus, even without real content, it can accurately test and adjust the visual elements such as layout, font, line height, etc. of the website.

What is the random text generation feature?

AnQiCMS'loremThe tag is a powerful auxiliary tool that can generate one or more random, article-like text segments in the template according to your specified quantity and method.This type of dummy text is commonly used in printing and web design. Its advantage lies in its ability to mimic the natural flow of real text while not distracting the user's attention from the design itself.

loremThe basic syntax of the tag is:

{% lorem 数量 方法 random %}

It includes several key parameters that allow you to flexibly control the generated content:

  • QuantityThis parameter determines how much content you want to generate. The units can be words, paragraphs, or text blocks, depending on方法the parameter settings.
  • MethodThis is a single-letter parameter used to specify the unit of content generation:
    • wGenerate a specified number ofwords.
    • pGenerate a specified number ofparagraphs. When using this method,loremTags generated text automatically includes HTML of<p>Tags to make it more in line with the actual paragraph structure.
    • bGenerate a specified number ofText block. This is the default method when you do not specify方法When a parameter is specified, the system will generate a standardLorem ipsumtext block.
  • random: This is an optional parameter used to control the randomness of the generated text. If you addrandomThe system will generate random text each time, which may be different; if not added, a set of fixed placeholder templates will be used to ensure that the generated text content is consistent.

How to useloremTag

Understood the parameters, let's see how to actually use these tags in a template:

If you want to quickly generate a standardLorem ipsumText used to fill in the default content of a certain area, it can be used directly like this:

{# 生成一段标准的Lorem ipsum文本块 #}
<div>
    {% lorem %}
</div>

If your design requires text that is precise to the word count, such as a list item summary, you can specify it like this:

{# 生成10个随机单词 #}
<p>
    {% lorem 10 w %}
</p>

When you need to simulate multi-paragraph article content,pThe method is very useful. It will automatically add HTML tags to each paragraph.<p>to better reflect the structure of the real article:

{# 生成3个段落的文本 #}
<div class="article-body">
    {% lorem 3 p %}
</div>

To ensure that the placeholder content generated each time the page is refreshed is different, you can addrandomparameters. This is very effective for testing dynamic layout or content refresh effects:

{# 生成100个随机单词，每次刷新都不同 #}
<p class="random-summary">
    {% lorem 100 w random %}
</p>

In which scenarios should this feature be used?

This feature can play a huge role in the development of AnQiCMS templates at multiple stages and in various scenarios:

  1. Article detail page or product descriptionIn building an article detail page or a product detail page,Contentthe area is often the largest text block. UsingloremLabel, you can quickly fill in content, test the sidebar, image insertion, comment section, and other layouts related to the main content.

    {# detail.html 模板中，填充文章内容 #}
<article>
    <h1>{% tdk with name="Title" %}</h1>
    <div class="article-content">
        {% lorem 5 p %} {# 填充5段随机文本作为文章内容 #}
    </div>
    {# 其他相关元素，如图片、评论区等 #}
</article>

  2. Summary or category description on the list page.In the article list page, product list page, or category page, it is necessary to display the summary or brief description of each item or category. UseloremLabels can quickly fill these areas, checking the impact of text length on layout.

    {# category/list.html 模板中，用于分类描述 #}
<h2 class="category-title">{% categoryDetail with name="Title" %}</h2>
<p class="category-description">
    {% lorem 2 p %} {# 填充2段随机文本作为分类描述 #}
</p>
{# ... 接下来是文章列表 #}

    For list item summaries, you can combine the use ofwmethods to control the number of words:

    {# 列表项摘要 #}
<div class="item-summary">
    {% lorem 30 w %} {# 填充30个随机单词作为摘要 #}
</div>

  3. Sidebar, recommended positions, and other dynamic areas: The sidebar, bottom recommended positions, ad positions, and other areas of the website often need to display some text content.loremThe feature can help you quickly simulate this content, test the impact of different lengths of titles and descriptions on the overall layout.

    {# 侧边栏推荐文章列表项 #}
<div class="sidebar-item">
    <h3>{% lorem 5 w %}</h3> {# 填充5个单词作为标题 #}
    <p>{% lorem 20 w %}</p> {# 填充20个单词作为简介 #}
</div>

  4. Test of custom fields.: If you have customized text fields in your content model (such as "product features", "author biography", etc.),loremThe label can be used directly in the template to fill and test the display effect of these fields, without manually entering a large amount of dummy data in the background.

**Practice and Precautions

  • Only for development testingPlease rememberloremThe text generated by the label is just placeholder content.Before the website goes live, it is essential to replace it with real, high-quality content that is valuable to users, otherwise it will seriously affect the website's SEO and user experience.
  • Combine|safeFilterWhen you use{% lorem 数量 p %}Generate HTML containing<p>When labeling paragraphs, be sure to use these HTML tags to ensure that they are parsed correctly by the browser and not displayed as plain text.|safeFilter. For example: `twig
    {{ lorem_content