During the development and testing phase of a website template, we often encounter a tricky problem: how to accurately evaluate the layout, style, and visual performance under different content lengths without real content?Manually filling in dummy data is not only inefficient but also difficult to simulate the richness of real content.AnQiCMS (AnQi CMS) provides a very practical auxiliary tag for template developers -loremIt can easily generate placeholder text, greatly simplifying the work of page display testing.

loremThe purpose and value of tags

loremThe core function of the tag is to generate random text in the style of "Lorem Ipsum".This text, with its meaningless Latin structure, is widely used in the fields of design and typography to simulate the visual effects of real text without distracting the user's attention from the content itself.

For template developers of AnQiCMS,loremThe value of the label is reflected in the following aspects:

  1. Quickly fill in the content area:Whether it is an article detail page, a product list item, or a sidebar, throughloremThe label can quickly fill any length of text, avoiding layout chaos caused by missing content.
  2. Test layout stability:The length of different text can affect the relative position and size of page elements (such as paragraphs, images, buttons).loremLabels can help developers test whether the page layout remains stable and beautiful when the text content is added or deleted.
  3. Verify responsive design: It is crucial to consider how text wraps, truncates, and displays on different screen sizes. UseloremTags can simulate a large amount of text, test the responsive layout on various devices to ensure that the content does not overflow or become difficult to read on small screens.
  4. Preview the layout effect:Font size, line spacing, paragraph spacing, and other typesetting details can be intuitively felt only with sufficient text volume.loremLabels can provide a real text stream to help developers adjust these layout parameters to achieve **reading experience.
  5. Improve development efficiency:Say goodbye to the cumbersome manual copy and paste, a simple line ofloremTags can meet the needs of placeholder text, allowing developers to focus more on core functions and design optimization.

How to use AnQiCMS'sloremTag

loremThe label usage is very intuitive and flexible, allowing you to control the number and type of generated text as needed. Its basic syntax structure is:{% lorem 数量 方法 random %}.

Here is a description of the parameters:

  • 数量This is a number used to specify how much text you want to generate. It is combined with方法the parameter to determine whether to generate how many words or paragraphs.
  • 方法: This is a character parameter used to define数量unit.
    • w: Indicates generating a specified number ofwords(words).
    • p: Indicates generating a specified number ofparagraphs(paragraphs).
    • b: Indicates generating a standard-lengthblocktext (block). If the quantity and method are not specified, it defaults to generating a standard-length text block.
  • randomThis is an optional parameter. If addedrandomThe text content generated each time the page is loaded is different.This is very useful for testing the layout performance under text diversity.If not added, the generated text content will be fixed each time.

Here are some actual examples to demonstrate its usage and expected output:

  1. Generate a text block of standard length:You can use it directly when you do not need to control the text length precisely:{% lorem %}It generates a complete, standard Lorem Ipsum text.

    -----
{% lorem %}
-----

    Partial output example:

    -----
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
-----

  2. Generate a specified number of words:If you need to fill a smaller area or want to test the layout with a specific number of words, you can usewMethod.

    -----
{% lorem 10 w %}
-----

    Output example:

    -----
sit accumsan in doming sea et nulla blandit rebum. dolor
-----

    (Note:randomParameters can be added, such as{% lorem 10 w random %}These 10 words will be different each time the page is refreshed.

  3. Generate a specified number of paragraphs:For areas that need to simulate articles or long content,pthe method will be very convenient.

    -----
{% lorem 3 p %}
-----

    Partial output example:

    -----
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros...</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor...</p>
-----

    Please note when using the method,pthe method,loremThe tag will automatically wrap each paragraph<p>.

Actual application in template

toloremThe tag can be embedded into your HTML structure very simply. For example, on an article detail page, you may want to have a placeholder for the article content: 

<article>
    <h1>这是文章标题</h1>
    <div class="article-meta">
        <span>发布日期：2023-10-26</span>
        <span>阅读量：123</span>
    </div>
    <div class="article-content">
        {% lorem 5 p %} {# 生成5个段落作为文章内容 #}
    </div>
    <div class="sidebar">
        <h3>相关推荐</h3>
        <ul>
            <li>{% lorem 8 w %}</li> {# 模拟推荐文章标题 #}
            <li>{% lorem 8 w %}</li>
            <li>{% lorem 8 w %}</li>
        </ul>
    </div>
</article>

You can also useloremTags are used in conjunction with filters to perform more complex text processing and testing. For example, usingwordwrapA filter to test the automatic line break effect of long text in a fixed-width container:

<div style="width: 200px; border: 1px solid #ccc; padding: 10px;">
    <pre>{% filter wordwrap:20 %}{% lorem 100 w %}{% endfilter %}</pre>
</div>

This will be displayed in a width-limiteddivcontainer.wordwrapProcessed lorem text, helping you visually see how the text breaks according to the set length.

Conclusion

AnQiCMS'loremTags are a much-needed efficiency tool in the template development stage. They provide flexible placeholder text generation capabilities in simple syntax, helping developers to efficiently carry out page layout, styling, and responsive testing even when real content is lacking.Master and make good use of this tag, it can significantly improve your website development and testing experience.

Frequently Asked Questions (FAQ)

  1. Q:loremDoes the text generated by the tag always look the same?A: By default,loremThe label-generated text is fixed and will display the same every time the page is loaded