How to chain filters when the HTML content rendered by Markdown needs further processing?

The Anqi CMS helps us efficiently build and operate websites with its flexible content management and powerful template functions.For operators and developers accustomed to writing content in Markdown, the new AnQi CMS's excellent support for Markdown is undoubtedly a great blessing.It not only makes content creation more convenient, but also allows content to be presented in a graceful HTML form on the front end.

However, after the Markdown content is rendered into HTML by the system, we may find that these HTML contents still need further refinement, such as generating summaries, removing specific tags to maintain brevity, or making other format adjustments.This is a translation of 'auto' to 'English': '这时候，AnQiCMS提供的过滤器链式使用功能就显得尤为重要，它让我们能够在内容渲染的各个阶段进行灵活控制。'

Understanding the rendering basics of Markdown content

In AnQiCMS, when you use the Markdown editor to write articles, product descriptions, or single-page content, the system automatically converts the Markdown syntax to standard HTML structure when displayed on the front end. This process occurs internally during template rendering, especially when you call such asarchive.Content/page.Contentorcategory.ContentThis content field is.

It is worth noting that when calling the content field, you canrenderParameters to explicitly control whether Markdown to HTML conversion is performed. For example, inarchiveDetailin the tag,render=truewill indicate that the system should render Markdown content as HTML,render=falseThen the original Markdown text will be retained.

通常，为了确保渲染后的HTML内容能够被浏览器正确解析和显示，而不是作为纯文本被转义，我们需要紧随内容变量之后使用|safeFilter.This is because AnQiCMS (like many modern template engines) defaults to escaping all output content to prevent potential XSS attacks.

{% archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}

Here are thearticleContentThe variable is initially definedrender=trueThe parameter is converted to HTML, then|safeThe filter informs the template engine that this part of the HTML is safe and does not need to be escaped again, and can be output directly.

Why is it necessary to use filter chains?

Markdown rendered content is HTML, but it is often 'native' HTML and may not fully meet our final display needs. Imagine the following common scenarios:

• Generate summary or preview:We hope to display a brief summary of each article on the article list page, rather than the full article content.This summary needs to retain some basic HTML formatting (such as paragraphs, links), but it cannot be too long.
• Content purification and simplification:The Markdown content may contain HTML elements (such as images, embedded videos, and specific level headings) that we do not want to display in certain scenarios. We need to remove them.
• Consistent formatting:It may be necessary to apply some global text processing to the rendered HTML, such as making all linksrelattributes, or converting specific text patterns to links.

This is where the filter chain of AnQiCMS comes into play.By connecting multiple filters in a pipeline, we can process content in multiple steps, with each step based on the result of the previous step.

Core Filter and Its Chained Applications

Further processing of HTML content rendered by Markdown, the following are some common filters:

1. |safe:As mentioned before, it is the first key link in the chain, ensuring that HTML content is not escaped. It usually follows immediately after the variable rendering HTML content.

2. |truncatechars_html:数字or|truncatewords_html:数字:

   • These filters are specifically designed forSafely truncate HTML content. With ordinary|truncatecharsor|truncatewordsThey can intelligently handle HTML tags, ensuring that the truncated HTML structure remains complete and valid, and avoiding layout issues on the page caused by unclosed tags due to truncation.
   • truncatechars_htmlTruncate by character count (including the HTML tags themselves, but internally it will make intelligent adjustments).
   • truncatewords_htmlTruncate by word count.
   • Chaining example:Assume we want to truncate the first 150 characters of an article (safely in HTML) and display it on the list page.

     
     {% archiveDetail articleContent with name="Content" render=true %}
     <div class="article-summary">
         {{ articleContent|safe|truncatechars_html:150 }}
     </div>
     

3. |striptagsor|removetags:"标签1,标签2":

   • |striptagsRemove all HTML tags from the HTML content, leaving only plain text. This is very useful when extracting a plain text summary from formatted content.
   • |removetags:"p,h1,img"Then you can specify the HTML tags to be removed. For example, if you want to hide images and first-level titles in the article summary but retain other formats.
   • Chaining example:In the truncated summary, we also want to ensure that no image tags are displayed, making the content purer.

     
     {% archiveDetail articleContent with name="Content" render=true %}
     <div class="article-summary">
         {{ articleContent|safe|truncatechars_html:150|removetags:"img" }}
     </div>
     

     The meaning of this chain is: first render Markdown to HTML, then ensure the HTML is safe to output, then truncate the HTML content to 150 characters (while maintaining the HTML structure), and finally remove all<img>Label.

4. |replace:"旧文本,新文本":

   • This filter can replace the specific text in HTML strings.If you need to replace local text in rendered HTML content or insert specific identifiers.
   • Chaining example:假设我们想在所有内容中，将特定的关键词“AnQiCMS”替换为带有链接的版本（虽然更推荐在Markdown源头处理，但此处为演示）。 “`twig {% archiveDetail articleContent with name=“Content” render=true %}