During the development of website templates, we often encounter such situations: the interface layout has been completed, but the actual content data is not ready.At this time, in order to ensure that the layout and visual effects of the front-end page can be accurately presented, we need some placeholder text to fill the page, simulating the existence of real content.AnQi CMS fully considers this requirement and provides a very practical template tag -loremIt can help us easily generate a specified number of random texts.

loremTag: A good helper for template development.

loremThe design intention of the label is to solve the problem of template content filling.It can quickly generate standard "Lorem Ipsum" placeholder text, which has no real meaning but has a similar structure to natural language, making it very suitable for testing the font, line height, paragraph spacing, and other visual elements of a webpage, and avoids layout bias caused by lack of content.

UseloremLabel, you can quickly insert placeholders in article detail pages, product descriptions, sidebar introductions, or any place where text content is needed, thus focusing more on the template's style and interaction logic without worrying about the page being empty.

loremThe usage of the tag explained

loremThe syntax of the tag is very concise, but it is also very flexible, meeting the needs of different scenarios.

1. Generate the default Lorem Ipsum text

If you just need a standard placeholder text without concerning about the specific length or format, you can directly use it without any parametersloremTags:

{% lorem %}

Execute this code, the template will output a long, standard Lorem Ipsum paragraph text.This is very convenient for quickly previewing the overall effect of a text block.

2. Specify the number and unit of the generated text

loremLabels allow you to precisely control the number of generated text. You can specify the number through the second parameter, and define the unit of this number through the third parameter (method):

  • Generate by word count (w)When you want to generate a specific number of words, you can usewas a method parameter. For example, to generate 10 words:

    {% lorem 10 w %}

    This will output a text consisting of 10 Lorem Ipsum words in the template.

  • Generate by paragraph count (p)If your placeholder needs to simulate multiple paragraphs, you can usepas a method parameter. For example, to generate 3 paragraphs:

    {% lorem 3 p %}

    the generated text will contain<p>Label, simulating a real HTML paragraph structure, which is particularly useful for testing paragraph spacing and style.

3. Increase the randomness of text.

By default,loremThe content generated by the label is always the same. If you want to see different placeholder text each time the page is refreshed to fully test the responsiveness and layout compatibility of the page, you can addrandomparameters:

{% lorem 10 w random %}

Or:

{% lorem 3 p random %}

addrandomAfter the parameter, each time the page is accessed,loremthe tag will generate a new, randomly combined Lorem Ipsum text, making your test scenario more diverse.

Actual application example

Assuming you are developing a template for an article detail page that includes the title, abstract, and body of the article. In the absence of actual article data, you can use this to fill:loremtags to fill:

<article>
    <h1>这是文章标题占位符</h1>
    <p class="summary">
        {% lorem 30 w %} <!-- 模拟文章简介，生成30个单词 -->
    </p>
    <div class="content">
        {% lorem 5 p random %} <!-- 模拟文章正文，生成5个随机段落 -->
    </div>
</article>

By this method, you can clearly see the general layout of the page before the actual content is ready, and adjust the style in time.

loremThe tag is a low-key but efficient member of the Anqi CMS template development toolkit, which greatly facilitates front-end development and template debugging, allowing you to focus more on user experience and page aesthetics.

Frequently Asked Questions (FAQ)

  1. loremDoes the text generated by the tag always look the same?By default,loremThe text generated by the label is the standard Lorem Ipsum content. If you want to generate different random text each time the page is refreshed, you can add it in the labelrandomparameters, for example{% lorem 10 w random %}.

  2. loremCan the tag generate placeholder text in Chinese or other languages? loremThe label is used to generate standard "Lorem Ipsum" Latin sample text, and therefore currently it does not support generating placeholder text in Chinese or other natural languages.If you need placeholders in a specific language, you may need to copy and paste manually or write custom text snippets.

  3. If I need a more complex HTML structure as a placeholder,loremCan tags be implemented? loremThe tag is mainly used to generate plain text or contain<p>The paragraph text of the label. If you need to simulate a more complex HTML structure, such as containing images, links, lists, etc., you need toloremThe tag is embedded into the HTML structure you write manually.loremThe tag itself does not automatically generate complex HTML elements.