In AnQiCMS template development, we often need to fine-tune the control of the displayed content.Especially when dealing with user input, extracting content from rich text editors, or when adapting content to different layouts, you may encounter some HTML tags that you want to retain and others that you want to remove.removetagsThe filter is the ideal tool to meet such needs.
Reveal the core features:removetagsFilter
removetagsThe function of the filter is as the name suggests: it can selectively remove the specified HTML tags from a block of HTML content while retaining the other unspecified tags and their internal text.This is in stark contrast to some 'one-size-fits-all' filters that remove all HTML tags, providing great flexibility to the content output.
Its basic usage syntax is very intuitive:
{{ 你的HTML内容 | removetags:"要移除的标签1,要移除的标签2" | safe }}
Let us analyze this structure in detail:
你的HTML内容This is the original HTML string variable you want to process. For example, it may be the detailed content of a document.archive.ContentDescription of categoriescategory.DescriptionOr the content of a single pagepage.Contentetc.removetags:"要移除的标签1,要移除的标签2":This isremovetagsFilter itself. Inside the colon after the filter name, you need to enclose all the HTML tag names you want to remove in English double quotes, and separate the tag names with English commas,Separate. It is worth noting that here only the label name is filled in, not including<or>these angle brackets.| safe: This is usedremovetagsA very critical suffix when filtering. AnQiCMS's template engine defaults to escaping all HTML content output for security reasons, which means that like<p>such tags will be converted to<p>Thus, it is displayed in plain text format. However, when we useremovetagswe hope that the HTML tags we want to preserve can be normally parsed and rendered by the browser. Therefore,| safeThe filter informs the template engine that this content has been safely processed and can be safely output as HTML without additional escaping.
Give an example of a simple one, suppose we have some HTML content<strong><i>安企CMS</i></strong>and we only want to keep the bold tags<strong>and remove the italic tags<i>We can use it like this:
{{ "<strong><i>安企CMS</i></strong>"|removetags:"i"|safe }}
This code's output will be<strong>安企CMS</strong>. The italic tags<i>The tag has been removed, and the bold label<strong>and its text content has been retained.
If you need to remove multiple tags, such as removingdivandspantags at the same time, you can write it like this:
{{ "<div><p>欢迎使用<span>AnQiCMS</span></p></div>"|removetags:"div,span"|safe }}
The output result will be<p>欢迎使用AnQiCMS</p>.
WithstriptagsThe difference: accuracy and comprehensiveness
In AnQiCMS filters, there is also a filter namedstriptagsfilter. It can also remove HTML tags, but it has an essential difference withremovetags:striptagswill be removedallHTML tags, leaving only the plain text content.
For example:{{ "<strong><i>安企CMS</i></strong>"|striptags }}The output result is安企CMS.
Therefore, when your goal is to get a piece of pure content with no HTML structure,striptagsIt is a more convenient choice. And when you need to retain some HTML tags, only removing specific tagsremovetagsit is the more precise scalpel in your hand.
实战应用场景:让内容更纯粹、更安全
removetags过滤器的应用场景非常广泛,能够有效提升网站内容的安全性和展示规范性:
Clean up user submitted contentIn forums, comment sections, or message boards where user-generated content is present, users may input content containing malicious scripts (such as
<script>tags) or irregular styles (such as<font>/<style>标签)的HTML。使用 Englishremovetags可以安全地移除这些潜在的危险或不必要的标签,例如: English{{ user.Comment|removetags:"script,iframe,style,font"|safe }}统一内容展示样式 English:The website may not want to display the abstract of the article on the list page to contain paragraphs
<p>or titles<h1>etc. tags, only simple text and line breaks should be retained<br>.removetagsCan quickly standardize content:{{ archive.Description|removetags:"p,h1,h2,div"|safe }}Extract specific elements from rich text:Sometimes, the complete rich text content needs to be simplified for display in different layouts, such as in the mobile view, you may want to remove all tables
<table>with image<img class="full-width">, retaining only the core text information.removetagsCan help you easily achieve it.SEO content optimizationAlthough search engines usually parse HTML well, removing some redundant or non-standard tags can help provide a cleaner HTML structure, which may be helpful for the crawling and parsing efficiency of search engines.
In AnQiCMS template specific application
In AnQiCMS, you can use it on any variable that needs to handle HTML contentremovetagsfilter. For example:
Article details page (
detail.html)When you need to allow only some basic formatting in the article content and remove all custom font colors or sizes and other tags:<div>{{ archive.Content|removetags:"span,font,div"|safe }}</div>Category list page (
list.html)When you want to display classification descriptions in a list in a concise form, without complex HTML structures:<span>{{ category.Description|removetags:"p,br,strong"|safe }}</span>
Use suggestions and precautions
- Always paired with
|safeAgain, if you want the retained HTML tags to render normally,|safeThe filter is indispensable. - clearly name the tags: Make sure the tag names you provide are standard HTML tags and do not contain
<and>. - Treat with cautionWhen removing tags, please ensure you understand the important information or styles that these tags may contain to avoid accidentally deleting key content or disrupting the expected layout.
- Test first:in any production environment use
removetagsbefore, be sure to thoroughly test in the development or testing environment to ensure that the content is displayed as expected and no unexpected side effects have occurred.
By skillfully applyingremovetagsFilter, AnQiCMS users can have more control over the output HTML content of templates, whether it is to enhance security, unify visual style, or optimize content display for different devices, there are efficient and flexible solutions.
Common Questions (FAQ)
- Q:
removetagsWill the style be retained in the content after the filter removes the tags? Answer:removetagsThe filter only removes the HTML tags themselves, and the text content inside the tags will be retained. If the tags to be removed (such as<span style="color:red;">)With inline styles, these styles will disappear when the tag is removed. If the style is applied through a CSS stylesheet to other retained tags or