When using AnQiCMS for website content management, we often encounter situations where we need to make some minor adjustments to the displayed content, such as when a title of an article is too long and we want it to be displayed only partially with an ellipsis at the end;Or some text is desired to be displayed in uppercase or lowercase. The powerful template filter function of AnQiCMS can easily help us meet these needs without modifying any backend code, and it can be completed directly at the template level.

The template filter is a practical tool in AnQiCMS template language, which allows us to transform, format, or process the value of template variables before outputting them to the page. Its usage is very intuitive, usually by adding a vertical bar after the variable.|Follow the filter name, and if the filter requires parameters, use a colon after the filter name (:Pass). For example,{{ 变量名 | 过滤器名称 : 参数 }}.

Content truncation processing

In many scenarios, we may need to truncate long text content to maintain the page layout or provide a brief introduction.AnQiCMS provides several convenient filters for truncating strings and HTML content.

If we are dealing with plain text, we can usetruncatecharsortruncatewordsfilter.truncatecharsIt will truncate the string according to the number of characters and add an ellipsis at the end. For example, you have an article title{{ item.Title }}，Hope it shows no more than 15 characters, you can write it like this: {{ item.Title | truncatechars:15 }}This will truncate the title to a maximum of 15 characters (including an ellipsis), and if the original title is fewer than 15 characters, it will not change.

AndtruncatewordsIt is truncated by word count. If you want the title to display a maximum of 5 words, you can do it like this:{{ item.Title | truncatewords:5 }}This filter ensures that truncation occurs at word boundaries and an ellipsis is added at the end.

If our content contains HTML tags and we want to truncate without destroying the HTML structure, AnQiCMS also provides the corresponding HTML safe truncation filter:truncatechars_htmlandtruncatewords_html. They are similar to plain text truncation filters, but they intelligently handle HTML tags to ensure that the truncated HTML code is still valid.For example, for an article summary that includes HTML:{{ item.Description | truncatechars_html:50 | safe }}HeresafeThe filter is very important, it tells the template engine that this output is safe HTML, which does not need to be escaped, so that the browser can correctly parse the truncated HTML.

Convert string case

The display format of unified content is crucial for improving user experience and website professionalism. AnQiCMS' filter can help us easily achieve case conversion.

The most direct case conversion isupperandlower.upperIt will convert all English letters in the string to uppercase:{{ item.Title | upper }}AndlowerIt will convert all letters to lowercase:{{ item.Title | lower }}

Sometimes we only need to capitalize the first letter of a string, and for this we can usecapfirst. It will only capitalize the first letter of the string, leaving the rest unchanged:{{ "hello world" | capfirst }}It will be displayed asHello world.

If you want the first letter of each word in a string to be uppercase and the rest lowercase, thentitleThe filter will be your good helper:{{ "anqicms is a great cms" | title }}It will be displayed asAnqicms Is A Great Cms. This is very useful for formatting article titles or names.

Other common string processing techniques

In addition to truncation and case conversion, AnQiCMS also provides a series of practical string processing filters to meet our diverse content operation needs.

  • Remove characters (cut): If you want to remove a specific character or substring from a string,cutthe filter can do that. For example, to removeAnQiCMSfromiyou can write{{ "AnQiCMS" | cut:"i" }}The result isAnQCMS.
  • Replace characters (replace): When you need to replace a part of a string with another part,replacethe filter comes into play. The syntax is{{ obj | replace:"旧内容,新内容" }}For example,{{ "Hello World" | replace:"World,AnQiCMS" }}It will output.Hello AnQiCMS.
  • Remove spaces (trim,trimLeft,trimRight)These filters are used to remove spaces or specified characters from both ends, the left side, or the right side of a string.{{ " AnQiCMS " | trim }}Will becomeAnQiCMS.
  • Concatenation and Splitting (join,split):splitYou can split a string into an array by delimiter, andjoinYou can concatenate an array into a string with a separator. This is very convenient when dealing with list data such as tags, keywords, etc. For example,{% set tags = "tag1,tag2,tag3" | split:"," %}You can convert a string into an array, then{% for tag in tags %}{{ tag }}{% endfor %}output in a loop.
  • Get the length (length): When you need to know how many elements a string, array, or object has,lengthThe filter can quickly give you the answer.{{ item.Title | length }}It will return the number of characters in the title.

These filters can be used individually, or chained, which means applying multiple filters to a variable in sequence, from left to right. For example:{{ item.Description | truncatechars:100 | lower | safe }}This will first truncate the description, then convert the truncated text to lowercase, and finally output it as safe HTML.

Mastering these filters allows us to have greater flexibility and fine control in AnQiCMS template design and content display, thereby better presenting website content and enhancing user experience.

Frequently Asked Questions (FAQ)

  1. Ask: Can the filter be used for all types of variables?Answer: Filters are mainly used to process data types such as strings, numbers, arrays (or Go language slices), and mappings (or Go language maps).But each filter has its specific application scenarios and expected input types. For example,upperThe filter is only valid for strings, andlengthFilters can be used for strings, arrays, or mappings. In actual use, if the input type does not meet the requirements of the filter, it may cause the filter to fail to function normally or to output null values.
  2. Ask: If I need to truncate content containing HTML without losing its style or structure, which filter should I use?Answer: In this case, you should usetruncatechars_htmlortruncatewords_htmlFilter. These two filters will intelligently handle HTML tags, ensuring that the truncated HTML structure remains valid and that styles are not lost.At the same time, please be sure to add after truncation|safeA filter that tells the template engine that this is a safe HTML fragment, to avoid the content being escaped again and causing HTML tags to be displayed directly.
  3. Ask: Can I apply multiple filters at the same time? What is the execution order?Answer: Yes, you can apply multiple filters to a variable, which is called 'chaining'.The execution order of the filters is from left to right. This means that the first filter will process the value of the original variable, then the second filter will process the output of the first filter, and so on. For example,{{ "HELLO WORLD" | lower | truncatechars:5 }}Will first convert the string to lowercase ("hello world"), then truncate it to 5 characters ("hello…").