When managing content in AnQiCMS, we often take advantage of the convenience of Markdown to edit and format articles quickly.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.
Understand the AnQiCMS Markdown processing mechanism
AnQiCMS has built-in Markdown editor, which greatly improves the efficiency of content creation.After we publish content in Markdown format from the background, when the system displays it on the front end, it will render the Markdown syntax into the corresponding HTML structure in real time according to the settings of the template tags.
For example, when we usearchiveDetail/categoryDetailorpageDetailtags to call document content, we usually seename="Content"as well asrender=trueconfiguration. Thisrender=trueThe parameter is crucial, it indicates that the system will convert the stored Markdown text to HTML. If therenderis set tofalseIf the system does not perform Markdown rendering, you will directly receive the original Markdown text, rather than HTML.
After understanding this, we can clearly state that the operation to remove specific HTML tags should be performed after the Markdown content has been rendered into HTML.Fortunately, AnQiCMS's template engine provides powerful filters that meet our needs.
Core strategy: Utilizing AnQiCMS built-in filter
To remove the specific tags from the HTML content rendered by Markdown, we will mainly rely on the AnQiCMS template engine providedremovetagsfilter.
removetagsFilter
removetagsThe filter, as the name suggests, is used to remove HTML tags. Its usage is very intuitive:{{ obj|removetags:"tag1,tag2,..." }}
You just need to append it to the HTML content variable you need to process|removetagsand list the HTML tag names you want to remove in the comma-separated way within double quotes. For example, if you want to remove all image tags in the content<img>and hyperlink tags<a>This can be written as:{{ articleContent|removetags:"img,a" }}.
striptagsFilter
If your requirement is more thorough, i.e., you want to remove all HTML tags and keep only 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 the filter
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, by<Convert<This causes the code not to be parsed, we usually add a comma at the end of the filter chain|safeThis tells the template engine that this content is safe HTML and can be output directly.
Practice exercise: Remove specific tags from Markdown content
Assuming we have a Markdown article that contains images, titles, and some bold text, and we want to remove all images from the article content when displaying it on the front end<img>Tag and Bold<strong>.
First, make sure that your document content is written through the Markdown editor and that the Markdown editor is enabled in the global settings of the AnQiCMS background.
Next, in your template file (such asarchive/detail.html), you will usually usearchiveDetailtags to retrieve the 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 takesarticleContentPass the HTML content, then|removetags:"img,strong"Remove all of<img>Tags and<strong>Tags (and their contents), then|safeEnsure that the modified HTML can be correctly parsed and displayed by the browser.
In this way, regardless of how the original Markdown content is, after processing, the final HTML displayed on the page will not contain what you specify<img>and<strong>.
Fine control: Use filters in combination
AnQiCMS filters can be chained, which means you can combine multiple filters according to more complex requirements. For example, you may not only want to remove specific tags, but also truncate 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 tries to maintain the integrity of tags when extracting HTML content, avoiding the destruction of HTML structure.
Points to note
- Filter order:When multiple filters are chained together, their execution order is from left to right. This means
removetagsis executed beforetruncatechars_html, which is usually the expected behavior. |safeis necessary:Reiterate, almost all filters that operate on HTML content should be added after|safeunless you explicitly want to display HTML code as plain text.- Performance consideration: 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 is usually negligible.
- Test:Before deploying, be sure to thoroughly test your template code in the development environment to ensure that the filters work as expected and do not introduce unnecessary side effects.
By flexibly using the built-in filters provided by AnQiCMS, we can exercise powerful customization control over the HTML content rendered by Markdown, thereby satisfying various complex content display requirements.
Frequently Asked Questions (FAQ)
Q1:render=falseWhat is the difference between using a filter to remove tags?
A1: render=falseIt is in Markdown textBefore converting to HTMLPrevent conversion operation. This means you will get the original Markdown text, not any HTML content, so there are no HTML tags to remove. And useremovetagsorstriptagsFilter, it is in Markdown textAfter rendered into HTMLModify the generated HTML content, remove specific HTML tags. In short,render=falseDoes it prevent HTML generation, and the filter is for post-processing after HTML generation.
Q2:removetagsDoes 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 also remove<img src="image.jpg" alt="描述">the tag itself, as well as its contents.srcandaltRemove all properties at once. If you need to keep the tags but remove specific properties, the current built-in filter of AnQiCMS may not be able to directly achieve this, which may require more advanced custom processing or front-end JavaScript logic.
Q3: If I useremovetagsto remove a tag that contains content (for example,<div>我是内容</div>Then<div>Will the content inside the tags also be removed?
A3: Yes,removetagsThe filter will remove the specified HTML tagsand all of its contents. As shown in the above example,|removetags:"div"Will remove<div>我是内容</div>, it will not be displayed on the page我是内容If you only want to remove the tag itself while keeping the content inside, you will need more complex string processing or frontend scripting to achieve this.