In Anqi CMS template development, sometimes we hope to add some dynamics and surprises to the website content, so that visitors can see different elements every time they refresh the page. At this time,randomThe filter is a very practical tool.It can help us randomly select one from a set of predefined data for display, whether it is to randomly select characters from a string or to randomly select a value from an array (or list), it can be easily achieved.

randomFilter's core function analysis

randomThe filter, as the name implies, plays a core role in "extracting" a random element from the given data set.This dataset can be a simple string or an array containing multiple values (also known as a slice).|Perfectly combined, output after the variable is processed randomly

In simple terms, when you pass a string torandomThe filter will randomly select a character from all the characters of this string and return it.If an array is passed, it will return a value randomly selected from all elements of the array.This ability provides the possibility for us to build websites with more interactivity and fun.

How to use it in Anqi CMS templaterandomFilter

UserandomThe filter is very direct, its basic syntax is{{ 你的变量 | random }}. We will understand its usage through several specific scenarios.

  1. Randomly return a character from a string.

    If you have a string variable and want to randomly select a character from it, you can directly applyrandomFilter. For example, would you like to randomly display a letter from the alphabet "ABCDE":

    {% set characters = "ABCDE" %}
<p>随机字符：{{ characters | random }}</p>

    At each page rendering, you may see one of 'A', 'B', 'C', 'D', or 'E.'

  2. Return a value randomly from the array.

    When you have an array containing multiple elements,randomThe filter can randomly select one element. Suppose you have a color list and you want the background color or the color of some element to change randomly every time the page is loaded (of course, this requires combining CSS or JS to implement):

    {% set colors = ['Red', 'Green', 'Blue', 'Yellow', 'Purple'] %}
<p>随机颜色：{{ colors | random }}</p>

    This will randomly display one of the color names from the array.

  3. CombinesplitThe filter processes comma-separated strings.

    In content operations, we often store some related content (such as tags, keywords, slogans, etc.) in the form of a comma-separated string. If you want to randomly select a value from such a string,randomThe filter needs an 'assistant'——splitfilter.splitThe filter can split a string into an array according to the specified delimiter.

    For example, you have a collection of website promotion Slogan, which are stored in a string variable separated by commas:

    {% set slogan_pool = "极致体验,安全稳定,高效管理,灵活定制" %}
{% set random_slogan = slogan_pool | split:"," | random %}
<p>今日推荐 Slogan：{{ random_slogan }}</p>

    here,slogan_pool | split:","It will first convert the string"极致体验,安全稳定,高效管理,灵活定制"To an array['极致体验', '安全稳定', '高效管理', '灵活定制'], thenrandomThe filter randomly selects a Slogan from this array for display. This israndomOne of the most common and practical combinations of the filter in the Anqi CMS template.

Application scenarios and precautions

randomThe filter is simple, but it can bring a lot of vitality to the website:

  • Dynamically display slogans or promotional phrases:Make the slogans on the homepage of the website different each time, adding a sense of freshness.
  • Display a random background image or icon:If you have a series of background images or icon URLs with a similar style, you canrandomload one randomly through the filter to enhance visual diversity.
  • Content recommendation:Although AnQi CMS provides more advanced related document tags, in some simple scenarios, if it were possible to organize the article title or link list into an array,randomCan also be used for random recommendations.
  • Interactive fun:Randomly display some tips, easter eggs, etc., to increase user stay time.

While usingrandomThere are a few things to note when using the filter:

  • Data type: randomThe filter is most suitable for processing string and array (slices) data types. If a single number is passed in, it may return the number itself directly.
  • Null value handling:When the input is an empty string or an empty array,randomThe filter usually does not return any content or returns an empty value. Therefore, it is best to combineifA statement or default value filter is used for judgment and processing.
  • Page rendering time: randomThe random selection of the filter occurs during the server-side rendering of the template.This means that a random selection is made every time the user visits or refreshes the page.If you want to achieve a random effect without refreshing the page, you need to combine it with front-end JavaScript.

By cleverly usingrandomFilter, you can make your Anqi CMS website free from the monotonous display method, bringing users a richer and dynamic browsing experience.

Frequently Asked Questions (FAQ)

  1. randomCan the filter randomly generate an integer within a range of numbers? randomThe filter itself is used to select a random value from an existing set (string or array), it does not have the function to generate numbers within a specified range.If you need to generate a random integer like 1 to 100, you usually need to use programming logic (such as processing at the controller layer and passing the result to the template) or combine it with front-end JavaScript to implement.

  2. If my array contains complex data objects (such as article objects),randomCan the filter randomly select an object?Yes,randomThe filter also applies to arrays containing complex data objects. If your template variable is an array consisting of multiple article objects, applyrandomAfter the filter, it will randomly return one of the complete article objects. You can access its properties like a regular object by using dot notation (for example{{ random_article.Title }})

  3. randomIs the random result produced by the filter permanent or does it change every time the page is refreshed? randomThe filter is executed on the Anqi CMS server-side when rendering pages. Therefore, each time a user visits your website page or manually refreshes the page,randomThe filter will recalculate and return a new random result. This means that the random effect is not persistent, but it is updated every time the page is loaded, bringing a fresh feeling to the user.