Can the `tagDetail` tag retrieve the 'content' field of Tag and render it as HTML?

As an experienced website operations expert, I know that content is the soul of the website, and how to efficiently and flexibly manage and present these contents is exactly the value of excellent tools like AnQiCMS (AnQiCMS). Today, let's explore a practical issue about the template tags of AnQiCMS:tagDetailLabel can get the 'content' field of Tag and render it as HTML?

There is no doubt that the answer isaffirmative. The files of AnQi CMS aretagDetailThe label can not only obtain the "content" field of Tag, but also, under the correct template rendering instructions, it can be rendered as rich content containing HTML.This is crucial for building Tag aggregation pages or special theme pages that are more attractive and informative.

Core feature analysis: The 'content' field of Tag tagDetailtags

tagDetailTags are born for this. It can get the article details likearchiveDetail) or the category details (categoryDetailSimilarly, deeply obtain all detailed information of a specific Tag, including the 'Content' keyword field.

How to get the 'content' of Tag in a template: actual operation guide

To obtain and render the "content" field of the Tag in the AnQiCMS template, you usually do it on the Tag list page (tag/list.html) or the Tag detail page (tag/detail.html)tagDetailLabel. The following is the specific operation method:

First, usetagDetailLabel to get the “content” field of Tag. You can directly output it, or assign it to a variable for subsequent processing:

{# 假设当前页面是Tag详情页，会自动获取当前Tag的信息 #}
{# 直接输出Tag的内容 #}
<div>
    Tag详细内容：{% tagDetail with name="Content" %}
</div>

{# 将Tag的内容赋值给一个变量，例如 tagContent，然后使用它 #}
{% tagDetail tagContent with name="Content" %}
<div>
    Tag详细内容：{{ tagContent }}
</div>

However, even if the output is like this, if the 'content' of the Tag is written in Markdown format (AnQiCMS supports Markdown editor), or if it contains unescaped HTML code, the browser may not parse and render it as you wish.This is when we need to introduce the powerful rendering capabilities provided by the AnQiCMS template engine.

Deep Understanding of Rendering Mechanism:|safeWith Markdown Conversion

AnQiCMS's template engine will default to HTML escaping when outputting variables, which is a security mechanism aimed at preventing cross-site scripting attacks (XSS).Therefore, even if the "content" field of Tag includes HTML code, if it is output directly, these codes will be displayed as plain text instead of being parsed by the browser.

To render HTML content correctly, we need to use|safeFilter.|safeThe filter tells the template engine that this part of the content is safe and does not need to be HTML escaped, and can be directly inserted into the page as HTML code.

{# 将Tag的内容赋值给 tagContent，并使用 |safe 过滤器渲染为HTML #}
{% tagDetail tagContent with name="Content" %}
<div>
    Tag详细内容：{{ tagContent|safe }}
</div>

Markdown content special handling:

If your Tag "content" field is written through the AnQiCMS backend Markdown editor, then it will store Markdown text. In this case,|safeThe filter itself cannot convert it to HTML. You also need to tell the template engine to convert Markdown to HTML first. AnQiCMS intagDetailTagsContentprovided on the field.renderParameter used to control the conversion from Markdown to HTML:

{# 获取Tag的Markdown内容，并指定 render=true 进行Markdown到HTML的转换 #}
{% tagDetail tagContent with name="Content" render=true %}
<div>
    Tag详细内容：{{ tagContent|safe }}
</div>

Here,render=trueWill parse the Markdown text on the server side and convert it to an HTML structure,|safeThe filter ensures that the converted HTML can be correctly rendered by the browser.

It is worth mentioning that in addition torenderparameter, there is also another filter in the AnQiCMS template filters.|renderA filter that can also be used to render Markdown content to HTML. Therefore, another way to write it is:

{# 获取Tag的Markdown内容，然后使用 |render 过滤器进行转换，并用 |safe 确保HTML渲染 #}
{% tagDetail tagContent with name="Content" %}
<div>
    Tag详细内容：{{ tagContent|render|safe }}
</div>

These two methods can achieve the same effect, you can choose to use them according to your personal habits or team specifications.

The flexibility of AnQiCMS is demonstrated

This feature's design fully demonstrates the flexibility and power of AnQiCMS in content management.It allows operators to create exclusive pages for Tags that are more marketing-oriented and more SEO-friendly.For example, an e-commerce website can add carefully designed banners, promotional product lists, and detailed activity rules introduction for the "Summer PromotionThis deep customization capability makes AnQiCMS not only a content publishing tool, but also a powerful tool for content marketing and SEO optimization.

Summary

In short,tagDetailLabel indeed can get the 'content' field of Tag. Combined|safefilter, as well as for Markdown contentrender=trueparameters or|renderFilter, you can perfectly present these contents in a rich HTML format on the frontend page.This will help you create a more attractive and user-friendly Tag aggregation page, thereby enhancing the overall value and operational efficiency of the website.

---

Common Questions (FAQ)

1. Where is the 'Content' field of the 'Tag' edited in AnQiCMS backend?通常，在AnQiCMS的后台，当你创建或编辑一个Tag时，会有一个专门的输入区域用于填写标签的描述或内容。This may be a rich text editing area named 'Tag Description', 'Detailed Content', or added through custom fields.tagDetailLabel can access this "content" field configured in the background.If you do not see an independent "Content" field in the default Tag editing interface, you can consider using the "Content Model" feature of Anqi CMS to add a custom rich text field to the Tag model to meet more complex content requirements.

2. How can I get the plain text of the Tag content instead of HTML?If you do not want to render HTML and only want to extract plain text content (for example, for Meta Description), you can usestriptagsfilter. For example:{{ tagContent|striptags }}。This filter will remove all HTML tags from the content, leaving only plain text, and then you can decide whether to truncate the length using the filter.truncatecharsThe filter is used for length truncation.

3. Can the image or video embedded in the “content” field of the tag be displayed normally?Yes, as long as the 'Content' field of the Tag is correctly embedded with images (such as<img>) or videos (such as<video>tags,<iframe>Embed code), and used in the template|safeThe filter renders, and this media content can be displayed normally on the front-end page.AnQiCMS's backend editor usually handles the path of media resources and HTML code, ensuring its availability on the frontend.