As an experienced AnQiCMS website operator, I am well aware of the importance of content in attracting and retaining users.High-quality content not only needs to be carefully crafted, but also needs to be presented in a proper format and optimized to enhance user experience and readability.The AnQi CMS takes advantage of the flexible Django template engine syntax, providing us with powerful built-in filter functions, making it easy to process and convert the data format of template variables.
Next, I will introduce how to use the built-in filter of Anqi CMS, especiallytruncatecharsandupperto optimize the display of your website content.
Understanding the Anqi CMS template filter
The AnQi CMS template engine supports filter syntax similar to Django.The filter is a simple function used to convert the output of template variables.They are commonly used to format data, truncate text, change case, or perform other simple processing operations without making complex changes to the back-end business logic.This separation makes the template more focused on content display, improving development efficiency and template maintainability.
The general syntax format of the filter is:{{ 变量名|过滤器名称:参数 }}. Among them,变量名is the data you want to process,过滤器名称is the filter you have selected (for example),truncatecharsorupper），while参数is optional, used to provide additional instructions for the filter.
UsetruncatecharsFilter truncates text
In website operation, we often need to display a concise version of the content on list pages, cards, or summaries.For example, the title or description of an article may be too long to be displayed directly, which would destroy the page layout. At this point,truncatecharsThe filter can be used.
truncatecharsThe filter's role is to truncate a string to a specified number of characters and add an ellipsis ("...") at the end.This is crucial for creating a unified content preview, maintaining a clean interface, or ensuring that text does not exceed the preset area.
Example of Use Case:
Assuming we have a list of articles, we need to display the introduction of each article, but we hope the length of the introduction does not exceed 50 characters. We can use it like thistruncatecharsFilter:
<p>{{ item.Description|truncatechars:50 }}</p>
In this code block,item.DescriptionThis is the content of the article introduction.|truncatechars:50Instruct the template engine to truncate this description to 50 characters. If the original description exceeds 50 characters, it will display the first 47 characters followed by “…”.
Consideration for practical application:
- Maintain layout consistencyWhen you design a news list, product display card, or any module that needs to display a text abstract,
truncatecharsIt can help you maintain uniformity in text length, ensuring that the page layout is beautiful and easy to browse. - Enhancing user experience: Long text can distract users' attention, while a concise summary can help users quickly understand the key points of the content and decide whether to click to view the details.
- Compared with other truncation methods: AnQi CMS also provides
truncatewordsand word truncationtruncatechars_html/truncatewords_html(Process strings containing HTML tags to avoid destroying the HTML structure) filters.In practice, you can choose the most appropriate truncation method based on the characteristics and specific requirements of the content.
UseupperFilter converts to uppercase
Sometimes, to highlight certain text or follow specific design standards, we need to convert the text to uppercase.upperThe filter provides this simple and effective conversion feature.
upperThe filter's role is to convert all the letters in the string to uppercase.This is very useful for emphasizing phrases, displaying specific tags, or uniformly displaying certain page elements (such as "View More", "Buy Now")
Example of Use Case:
Assuming you want all menu item text to be displayed in uppercase in the website's navigation bar to enhance visual impact, you can use it like this.upperFilter:
<a href="{{ item.Link }}">{{ item.Title|upper }}</a>
Here, item.TitleIs the original title of the navigation item.|upperThe filter will convert it to uppercase. For example, ifitem.Titleis 'About Us', it will be displayed as 'About Us'.
Consideration for practical application:
- Visual emphasis：Uppercase text can attract user attention, suitable for action buttons (CTA), important announcements, or concise titles.
- Brand style is unifiedSome brands may prefer to use uppercase text on specific elements,
upperThe filter can help you easily achieve this style. - Compare with other case conversion filters: Anqi CMS also provides
lowerand (convert to lowercase) andcapfirst(capitalize the first letter of the sentence) and other filters. You can choose flexibly according to your specific needs.
Filter chaining call
The Anqi CMS template engine's filter function is not limited to single use, you can also chain multiple filters together to process variables in a series. The syntax for chaining calls is to use a vertical line|Connect them together, the output of the previous filter will be the input of the next filter.
Chaining example:
Assuming you need a scenario where the description is first truncated, then converted to uppercase, and finally, if it is empty, a default value is displayed:
<span class="preview-text">{{ item.Description|truncatechars:50|upper|default:"暂无描述" }}</span>
In this example:
item.DescriptionFirst it istruncatechars:50truncated.- Passing the truncated result to
upperFilter, convert to uppercase. - If the final result is empty (for example,
item.DescriptionIt is an empty string itself, truncated it is still empty), thendefault:"暂无描述"It will be replaced with 'No description available'.
This chained call greatly enhances the flexibility and expressiveness of template processing, allowing you to achieve complex data formatting with the least amount of code.
Strategies and precautions in practice
Remember these points when using the Anqi CMS template filter to achieve **practice:**
- Focus on the readability of the content: Although the filter function is powerful, excessive or improper use may actually reduce the readability of the content. For example, excessive use of uppercase text may make people feel like 'shouting,' and caution should be exercised.
- Keep the template conciseThe filter is mainly used for data formatting at the presentation layer. Complex business logic or data calculations should be placed on the backend as much as possible to maintain the cleanliness and readability of the template.
- Make good use of
safeFilterWhen you need to output content containing HTML tags (such asarchiveDetailTags retrieved from comments.Content) to avoid HTML entity escaping (to prevent XSS attacks), you must use|safeThe filter. This tells the template engine that the content is safe and does not need to be escaped. - Refer to the official documentation: The template document of AnQi CMS is your valuable resource. When you are unsure how to use a filter or need to learn more about the filters, please refer to
tag-filters.mdThe file, which includes detailed descriptions and usage examples of all built-in filters.
By proficiently mastering the built-in filters of Anqi CMS, especiallytruncatecharsandupperYou will be able to manage and optimize the display of website content more effectively, providing users with a more professional and friendly browsing experience.
Frequently Asked Questions (FAQ)
1. Does AnQi CMS support custom template filters?
According to the Anqi CMS documentation, its template engine supports Django template engine syntax and provides a series of built-in filters for users to use.The document does not mention the opening of a custom filter interface or mechanism.Therefore, at present, you should mainly rely on the built-in filters provided by the system to complete data processing and format conversion.If there is a specific functional requirement that cannot be met through the existing filter, it is recommended to consider data preprocessing at the backend business logic layer.
2. TotruncatecharsWhat will happen when applying it to a numeric variable?
Filters are typically designed for specific data types, such astruncatecharsandupper主要用于字符串。If you try totruncatecharsThe filter is applied to a non-string variable (such as a number), and the template engine usually tries to convert it to a string before processing.If the conversion fails or does not meet the expected input of the filter, it may cause the filter not to work, output the original value, or in some cases, may cause template rendering errors.To avoid potential problems, it is recommended to ensure that the variable is of string type or can be safely converted to a string before using such a filter.
3. Will using many filters affect the website performance?
For the vast majority of common website scenarios, the impact of using built-in filters on the overall performance of the website can be ignored.AnQi CMS is a content management system developed based on the Go language, and its backend processing efficiency is very high.Filter operations are typically lightweight string or data transformations.Only in extreme cases, such as when executing tens of complex filter chain calls on tens of thousands of entries in a large loop, might there be a tiny, noticeable impact on performance.In daily content display and page rendering, you can safely use filters to optimize the user experience without worrying too much about performance issues.