In AnQiCMS, when managing content, we often take advantage of the convenience of Markdown to quickly edit and format articles.However, in certain specific content display scenarios, we may need to exercise more detailed control over the HTML content rendered from Markdown, such as removing unnecessary specific HTML tags.AnQiCMS provides a powerful template engine and rich built-in filters, allowing us to easily achieve this goal.
Understanding AnQiCMS's Markdown processing mechanism
AnQiCMS has built-in Markdown editor, which greatly improves the efficiency of content creation.When we publish Markdown format content through the backend, the system will render the Markdown syntax into corresponding HTML structure in real-time according to the settings of the template tags.
For example, when we usearchiveDetail/categoryDetailorpageDetailWhen calling document content with tags such asname="Content"andrender=trueconfiguration.render=trueThe parameter is crucial, it indicates that the system will convert the stored Markdown text to HTML. If therendersetfalseIf so, the system will not perform Markdown rendering, and you will directly receive the original Markdown text, not HTML.
After understanding this, we can clearly see that the operation to remove specific HTML tags should be performed after the Markdown content has been rendered into HTML.It is fortunate that AnQiCMS's template engine provides powerful filters to meet our needs.
核心策略：利用AnQiCMS的内置过滤器
To remove the Markdown-rendered HTML content of specific tags, we will mainly rely on the AnQiCMS template engine providedremovetagsFilter.
removetagsFilter
removetagsThe filter, as the name implies, is used to remove HTML tags. Its usage is very intuitive:{{ obj|removetags:"tag1,tag2,..." }}
You just need to append to the HTML content variable you need to process|removetagsand list the HTML tag names you want to remove in a comma-separated manner within double quotes. For example, if you want to remove all image tags from the content.<img>and hyperlink tags<a>You can write it like this:{{ articleContent|removetags:"img,a" }}.
striptagsFilter
If your requirement is more thorough, that is, you want to remove all HTML tags and only keep plain text content, thenstriptagsThe filter will be a more convenient choice. It does not require any tags and will strip all HTML tags at once:{{ obj|striptags }}
|safeThe importance of filters
After applying to the HTML contentremovetagsorstriptagsAfter the filter, the output is still HTML code (or rather, the modified HTML code). To prevent the browser from escaping it again (for example, converting<Converted to<），导致代码不被解析，我们通常会在过滤器链的末尾加上|safe过滤器。这会告诉模板引擎，这段内容是安全的HTML，可以直接输出。
Practice Exercise: Remove Specific Tags from Markdown Content
Assume we have a Markdown article that includes images, titles, and some bold text, and we want to remove all images from the article content when displaying it on the frontend<img>Labels and Bold<strong>Label.
First, make sure that your document content is written through the Markdown editor, and the Markdown editor is enabled in the global settings of the AnQiCMS backend.
Next, in your template file (such asarchive/detail.html), you usually usearchiveDetailtags to retrieve article content:
{# 假设我们获取的文章内容是 Markdown 格式，且启用了渲染 #}
{% archiveDetail articleContent with name="Content" render=true %}
{# 在这里，articleContent 变量已经包含了 Markdown 渲染后的 HTML 内容 #}
{# 现在，我们使用 removetags 过滤器移除 img 和 strong 标签，并确保内容安全输出 #}
<div class="article-body">
{{ articleContent|removetags:"img,strong"|safe }}
</div>
{% endarchiveDetail %}
In the above code snippet:
{% archiveDetail articleContent with name="Content" render=true %}This line of code renders the Markdown content of the current article into HTML and stores the result.articleContentthe variable.{{ articleContent|removetags:"img,strong"|safe }}This is the core part. It first takesarticleContentThe HTML content is processed, then through|removetags:"img,strong"All elements are removed<img>Tags and<strong>Tags (and their content) are removed, finally through|safeEnsure that the modified HTML can be correctly parsed and displayed by the browser.
Through this method, no matter how the original Markdown content is, after processing, the final HTML displayed on the page will not contain the one you specified<img>and<strong>Label.
More precise control: Combinations of filters
AnQiCMS's filter can be chained, which means you can combine multiple filters for more complex requirements. For example, you may not only want to remove specific tags, but also cut the content to a certain length after removal while retaining the HTML structure (if there are other tags):
{% archiveDetail articleContent with name="Content" render=true %}
<div class="article-preview">
{# 先移除图片标签，然后截取前200个字符，并保持HTML结构 #}
{{ articleContent|removetags:"img"|truncatechars_html:200|safe }}
</div>
{% endarchiveDetail %}
Here,truncatechars_htmlThe filter is very intelligent, it will try to maintain the integrity of the tags when extracting HTML content, to avoid destroying the HTML structure.
Precautions
- Filter order:Multiple filters are chained and executed from left to right. This means
removetagsis executed firsttruncatechars_html, which is usually the expected behavior. |safeThe necessity of:Again, it is emphasized that almost all filters that operate on HTML content should be followed by|safeunless you explicitly want to display HTML code as plain text.- Performance considerations:For extremely long or complex HTML content, excessive use of filters may have a slight impact on page rendering performance.But for most AnQiCMS application scenarios, this impact can usually be ignored.
- Test:Before deploying, make sure to thoroughly test your template code in the development environment to ensure that the filters work as expected and no unnecessary side effects are introduced.
By flexibly using the built-in filters provided by AnQiCMS, we can achieve powerful customization control over the HTML content rendered by Markdown, thereby meeting various complex content display needs.
Common Questions (FAQ)
Q1：render=falseWhat is the difference between using and removing tags with a filter?
A1: render=falseIs it in Markdown textBefore converting to HTMLPrevent conversion operation.This means you will get the original Markdown text, and not any HTML content, therefore there are no HTML tags to remove.removetagsorstriptagsFilter, it is in Markdown textRendered to HTML afterModify the generated HTML content, remove specific HTML tags. In short,render=falseIs it to prevent HTML generation, the filter is for post-processing after HTML generation.
Q2:removetagsWill the filter remove attributes from tags?
A2：Yes,removetagsThe filter will remove the entire tag and all its attributes. For example,|removetags:"img"it will not only remove<img src="image.jpg" alt="描述">this tag itself, but also its contents.srcandaltProperties are also removed.If you need to retain the tag but remove specific properties, the current built-in filter of AnQiCMS may not be able to directly implement this, which may require more advanced custom processing or front-end JavaScript logic.
Q3: If I useremovetagsto remove a tag containing content (e.g.<div>我是内容</div>), then<div>Will the content inside the tag also be removed?
A3:Yes,removetagsThe filter will remove the specified HTML tagsand all the content contained within. To illustrate with the above example,|removetags:"div"will be removed<div>我是内容</div>, the page will not display,我是内容If you want to remove the tag itself while keeping its internal content, you will need more complex string processing or frontend scripting.