How to convert Markdown to HTML in a template and then remove the tags from the generated HTML?

In the AnQiCMS template, when processing Markdown content, it is often necessary to first convert it to HTML, and then further filter or remove specific HTML tags on this basis.This is particularly useful when creating content summaries, generating plain text previews, or to achieve specific layout controls.The template tags and filters provided by AnQi CMS can help us complete these operations efficiently and flexibly.

First step: Convert Markdown content to HTML

The Anqi CMS template engine is built with support for Markdown content rendering.When your content is entered through a Markdown editor, it is usually stored as Markdown formatted text.To display it as browsable HTML on the front-end page, you need to instruct the template engine to convert it.

For the document content field (archiveDetailofContent），AnQi CMS is enabled by default in the Markdown editor and will automatically convert it to HTML. But if you need to control the conversion process more explicitly, or convert other custom Markdown fields, you can userender=trueorrenderfilter.

For example, on a document detail page, we usually display the article content in this way:

{# 假设archiveDetail已经获取了当前文档详情 #}
{%- archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}

here,render=trueExplicitly indicate that the template engine willContentRender the Markdown text in the field as HTML.

Important reminder:Converted HTML string if not processed|safeThe filter may be escaped again by the template engine (about to<to<The page directly displays HTML code instead of rendering effects. Therefore, it is essential torenderafter|safeto ensure that the HTML content is rendered correctly in the browser.

If you have other custom fields that store Markdown content and you want to render it as HTML, you can userenderFilter:

{# 假设这是一个名为'custom_markdown_field'的自定义字段 #}
{% archiveDetail customMarkdownField with name="custom_markdown_field" %}
{{ customMarkdownField|render|safe }}

Step two: Remove tags from the generated HTML

After converting Markdown to HTML, you may need to further modify the generated HTML content, such as removing certain HTML tags, or directly obtaining plain text. Anqi CMS provides two very practical filters to complete this task: striptagsandremovetags.

1. Remove all HTML tags (striptags)If you need to completely remove all HTML tags, get the plain text form of the content (for example, for generating article summaries or SEO descriptions),striptagsThe filter is your preferred choice. It removes all HTML, XML tags, and HTML comments from the content.

   {# 假设'htmlContent'是Markdown转换后的HTML内容 #}
   {% set pureText = htmlContent|striptags %}
   <p>文章摘要：{{ pureText|truncatechars:100 }}</p>
   

   In this example,htmlContentafterstriptagsAfter filtering, all HTML tags are removed, leaving only plain text, then we usetruncatechars:100to extract the first 100 characters as a summary.

2. to remove specific HTML tags (removetags)When you need to control more finely, only remove some specific tags from the HTML content (for example, keep paragraphs and headings but remove images and links),removetagsThe filter provides powerful capabilities. You can specify the tag names to be removed after the filter, separated by commas.

   {# 假设'htmlContent'是Markdown转换后的HTML内容 #}
   {% set filteredHtml = htmlContent|removetags:"img,a,script" %}
   <div class="filtered-content">{{ filteredHtml|safe }}</div>
   

   here,filteredHtmlWill be removed.<img>/<a>and<script>Content after the tag. Similarly, since the result is still HTML, it needs to be used again|safeFilter to ensure the browser renders correctly.

Comprehensive Practice: Convert Markdown to HTML and Remove Tags

Now, let's combine these two steps to see how to implement Markdown to HTML in the AnQiCMS template, and then remove the tags according to the requirements:

Assuming you have a Markdown-formatted article content, you want:

1. Convert it to HTML.
2. Remove all images in the HTML (<img>) tags.
3. Remove all hyperlinks (<a>) tags.
4. The final filtered HTML content will be displayed.

{%- archiveDetail articleContentMarkdown with name="Content" render=true %}
{# 先将Markdown渲染为HTML，并标记为safe，否则removetags无法识别HTML标签 #}
{% set renderedHtml = articleContentMarkdown|safe %}

{# 对渲染后的HTML进行标签移除 #}
{% set finalHtml = renderedHtml|removetags:"img,a" %}

{# 输出最终处理过的HTML内容 #}
<div class="article-body-no-images-links">
    {{ finalHtml|safe }}
</div>

By following these steps, your Markdown content is first rendered into standard HTML, then we applied to this HTML stringremovetagsThe filter removed all<img>and<a>The label. Finally, the content displayed on the page is HTML without images and links.

Summary

The Anqi CMS template engine combines Markdown rendering capabilities with flexible filters, providing great freedom for content display.Whether it is to accurately filter HTML tags to extract plain text summaries or to meet specific design requirements, these tools can easily help you achieve this at the template level. UnderstandingrenderThe parameter withrenderFilter,|safeas well as filtersstriptagsandremovetagsThe role and timing of use is the key to fully utilizing AnQiCMS for content operation.

Frequently Asked Questions (FAQ)

1. Why did I useremovetagsorstriptagsAfter that, HTML tags were not removed?This is usually because you forgot to add, before converting Markdown to HTML, orremovetags/striptagsadd|safeA filter. If the HTML content is not marked as “safe” (i.e. not processed|safe), the template engine may treat it as a plain string and automatically escape it, resulting inremovetagsorstriptagsThe filter cannot recognize and process the HTML tags contained within. Make sure the HTML content converted from Markdown is used|safe.

2. I want to get the plain text summary of Markdown content, **what is the practice??**Practice is to first convert Markdown content to HTML, then usestriptagsthe filter to remove all HTML tags, and then use it lasttruncatecharsFilter text to the required length. For example:

{% archiveDetail articleContent with name="Content" render=true %}
{% set summary = articleContent|safe|striptags|truncatechars:150 %}
<p>{{ summary }}</p>

This ensures that the abstract is based on the rendered HTML and does not contain any formatting tags, only retaining plain text and controlling the length.

3. If I want to preserve certain HTML tags (such as<strong>), but remove other tags (such as<img>), how should I operate?Markdown itself does not directly handle “