How to completely remove all tags from HTML content in the AnQiCMS template?

In website content operation, we often encounter such needs: to extract plain text from richly formatted content, such as displaying abstracts on article list pages, or providing clean text for SEO meta description tags.AnQiCMS (AnQiCMS) provides a powerful and flexible template engine, through built-in filters (filters), we can easily remove tags from HTML content completely.

Understanding the content processing in AnQiCMS template

AnQiCMS templates use a syntax similar to Django, content variables are passed through double curly braces{{ 变量 }}Output. When we use a rich text editor to publish articles or pages in the background, the content is usually stored and presented in HTML format. This means that it is output directly{{ archive.Content }}May appear in expected plain text scenarios<p>/<strong>/<img>and HTML tags, thereby destroying page layout or SEO effects.

幸运的是，AnQiCMS's template engine has an automatic escaping feature, which to some extent prevents the direct execution of malicious HTML code. But for the need to completely remove HTML tags to obtain plain text, we need to use specific filters.

Core Tool:striptagsFilter

To completely remove all tags from the HTML content, the most direct and effective method is to usestriptagsa filter. This filter will remove all HTML tags from the input string (including<p>/<a>/<img>Remove all (including) and leave only plain text content.

Usage:

In the template, you can pass the content variables to be processed through the pipe symbol|pass tostriptagsfilters. For example, if your article content is stored inarchive.ContentIn:

{{ archive.Content|striptags|safe }}

Here|safeFilters are usually used afterstriptagsto ensure that the cleaned-up plain text content is not escaped again when output (even though the content is already plain text, adding|safeIt can explicitly tell the template engine that this is a safe output that does not require additional escaping).

Example:

Assumearchive.Contentis:

<p>这是一段包含<strong>加粗</strong>和<a href="#">链接</a>的文本。</p>

Use{{ archive.Content|striptags|safe }}Then, the output will be:

这是一段包含加粗和链接的文本。

Precise control:removetagsFilter

Sometimes, we may not want to remove all HTML tags, but only want to remove specific ones, such as only removing image tags<img>but keeping paragraphs<p>and links<a>. At this point,removetagsThe filter comes into play.

Usage:

removetagsThe filter requires a parameter, which is the name of the HTML tag you want to remove. If you need to remove multiple tags, the tag names should be separated by English commas.,Separated.

{{ archive.Content|removetags:"img,script"|safe }}

Example:

Assumearchive.Contentis:

<p>这是一段包含<strong>加粗</strong>、<img src="image.jpg" alt="图片">和<a href="#">链接</a>的文本。</p>

• If you only want to remove<i>Tags:

  {{ "<strong><i>Hello!</i></strong>"|removetags:"i"|safe }}
  

  The output will be:

  <strong>Hello!</strong>
  

• If you only want to removeimgTags:

  {{ archive.Content|removetags:"img"|safe }}
  

  The output will be:

  <p>这是一段包含<strong>加粗</strong>、和<a href="#">链接</a>的文本。</p>
  

• If you want to removeimgandaTags:

  {{ archive.Content|removetags:"img,a"|safe }}
  

  The output will be:

  <p>这是一段包含<strong>加粗</strong>、和链接的文本。</p>
  

Application scenarios in practice

• List page summary display:On the article list or product list page, we usually only display the summary of the content. In order to avoid chaotic HTML tags in the summary, we canitem.Descriptionoritem.ContentapplystriptagsFilter. CombinetruncatecharsortruncatewordsFilter, can generate a suitable plain text summary.

  {# 结合截断功能，生成100个字符的纯文本摘要 #}
  {{ item.Description|striptags|truncatechars:100|safe }}
  

• SEO Meta Description:Search Engine Description Tag<meta name="description" content="...">Should only contain plain text. You can use the description field of the page tostriptagsensure this, avoiding unnecessary HTML code from being indexed by search engines.

  <meta name="description" content="{% tdk seoDescription with name="Description" %}{{ seoDescription|striptags|safe }}">
  

• specific layout requirements:When you need to embed some content as plain text in JS scripts, CSS styles, or other strict plain text environments,striptagsit is also an indispensable tool.

Summary

AnQiCMS'striptagsandremovetagsThe filter provides a concise and powerful solution for handling HTML tags in templates.Whether it is necessary to thoroughly clean all tags to obtain plain text, or only selectively remove some tags, these tools can help you better control the presentation of content, optimize the display effect of the page, and improve SEO performance.Proficiently using these filters can make your AnQiCMS website content management more efficient and flexible.

Frequently Asked Questions (FAQ)

1. striptagsandremovetagsWhat are the main differences of the filter? striptagsThe filter will remove HTML tags from the contentalland retain only plain text. On the other handremovetagsThe filter allows you to specify one or more HTML tag names, such as"img,a,script"It will only remove the specified tags while retaining the other unspecified tags. The choice depends on how much of the original format you want to keep.

2. I used it on the list page.striptagsFilter, but the summary looks very long and is not automatically truncated, why is that? striptagsThe filter only removes HTML tags and does not change the actual character length of the content. If you want the summary content to be the specified length after removing the tags, you need to use in combinationtruncatecharsCharacter truncate ortruncatewordsWord truncate filter. For example:{{ item.Description|striptags|truncatechars:100|safe }}First remove HTML tags, then truncate the plain text content to a maximum of 100 characters.

3. If my content is in Markdown format in the background, will it be rendered into HTML first before being processed by the filter?Yes, if your AnQiCMS backend has enabled the Markdown editor and the content field (such asarchive.Content）Configure to support Markdown rendering, then the template engine will first convert the Markdown content to HTML. Then，striptags