The `{% contact %}` tag supports which filters to format the output content?
As an experienced website operations expert, I know that how to flexibly display and process information in a content management system is the key to improving website user experience and operational efficiency.AnQiCMS (AnQiCMS) leverages its powerful template engine and rich tag system, providing us with great convenience.{% contact %}Label, and how to output content through its filters (filters) to make your website's contact information more exquisite and practical.
Security CMS{% contact %}The flexible application of tags: how to optimize contact information display through filters
In the template design of AnQi CMS,{% contact %}The tag is the core tool used to obtain preset contact information from the background.Whether it is the company address, contact number, email, or various social media links, this tag can help us quickly retrieve it.{% contact 变量名称 with name="字段名称" %}or output directly{% contact with name="字段名称" %}.But simply retrieving information is not enough. As an operator, we often need to further format this information to adapt to different display scenarios or meet specific technical requirements.At this moment, the powerful filter of AnQi CMS comes into play.
It is worth emphasizing that,{% contact %}The tag does not directly support built-in filter parameters to change the logic of content retrieval.It focuses on accurately extracting the contact information we specify from the background database.{% contact %}The tag outputs a specific value, which (whether it is a string, number, or URL) can be treated like a regular variable and processed by subsequent general filters in a chained manner, thus achieving flexible formatting of the output content.
Next, we will combine the actual operation scenario to introduce several in the processing{% contact %}Tags are particularly practical and common filters when outputting content.
1.|safe: Ensure the safety and correct rendering of the content
In some cases, the contact information you store in the background may contain HTML code, such as an embedded WeChat QR code image tag.If you directly output this content, the template engine, for security reasons (to prevent XSS attacks), will escape it, causing the HTML code to be displayed as plain text rather than rendered correctly as images or other elements.|safeThe filter is particularly important. It tells the template engine that you confirm that this content is safe, no escaping is needed, and it can be processed directly as HTML.
Application scenario:
- Display the WeChat QR code image uploaded on the back-end (usually one
<img>tags). - The custom contact information field contains the HTML structure that needs to be rendered.
Example:Assuming the "WeChat QR code" field stores<img src="/path/to/qrcode.png" alt="微信二维码">.
{# 假设我们将微信二维码内容赋值给一个变量 qrcodeContent #}
{% contact qrcodeContent with name="Qrcode" %}
<div>
<span>微信二维码：</span>
{# 使用 |safe 确保 HTML 内容被正确解析和显示 #}
{{ qrcodeContent | safe }}
</div>
Or, if you output directly:
<div>
<span>微信二维码：</span>
{% contact with name="Qrcode" %}
</div>
{# 如果 'Qrcode' 字段返回的是 URL，你可能需要这样构建图片标签 #}
<div>
<span>微信二维码：</span>
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
</div>
Please note,|safeMainly used to process strings that may contain HTML. Ifname="Qrcode"Return is simply an image URL, then directly put the URL into<img>label'ssrcthe attribute, no need to|safe.
2.|defaultor|default_if_none: Gracefully handle missing information
In website operation, not all contact information will be filled in completely. If a contact information field is empty, direct output may display a blank space, affecting the page beauty or user understanding.|defaultThe filter allows you to set a default value for a variable, which will display the default text you set when the variable is empty. And|default_if_noneit is more precise to provide a default value fornil(null pointer) situations.
Application scenario:
- When the contact phone, email, or address is not filled in, display "No information" or "Please contact customer service.".
- Ensure that the page layout is not affected by empty values.
Example:
{% contact cellphone with name="Cellphone" %}
{% contact email with name="Email" %}
<p>联系电话：{{ cellphone | default:"暂无联系电话" }}</p>
<p>电子邮箱：{{ email | default:"请发送邮件至 [email protected]" }}</p>
{# 如果您更关注 nil 值，可以使用 default_if_none #}
<p>联系地址：{% contact address with name="Address" %}{{ address | default_if_none:"未填写" }}</p>
3.|truncatecharsor|truncatewords: Control text length.
Sometimes, the contact information entered in the background (especially for custom descriptive fields) may be quite long and not suitable for full display in some compact layouts.|truncatecharsand|truncatewordsThe filter can help you truncate text content to a specified length and add an ellipsis at the end to keep the page neat.truncatecharsTruncate by character count,truncatewordsTruncate by word count (more suitable for English content).
Application scenario:
- Custom 'company profile' or 'contact note' field, which needs to be abbreviated for display in sidebars or footers.
Example:
{% contact customDescription with name="CompanyDescription" %}
<p>公司简介：{{ customDescription | truncatechars:50 }}</p> {# 截取前50个字符 #}
4.|upper/|lower/|title: Standardize text case
In order to maintain the consistency of the website style, you may need to display some contact information (such as social media account names, company names) in uppercase, lowercase, or with the first letter capitalized.
Application scenario:
- To display the social media ID (such as
Facebookthe username) in lowercase. - Capitalize the first letter of the company name.
Example:
{% contact facebook with name="Facebook" %}
{% contact companyName with name="SiteName" %}
<p>Facebook 主页：{{ facebook | lower }}</p> {# 转换为小写 #}
<p>公司名称：{{ companyName | title }}</p> {# 每个单词首字母大写 #}
5.|replaceor|cut: Clean up and format specific characters
Phone numbers often contain hyphens or spaces, if you need totel:Only keep pure numbers in URLs, or remove some interfering characters from text,|replaceand|cutThe filter will be very useful.|replaceYou can replace a substring within a string with another, and|cutit can remove all matching characters.
Application scenario:
- from a phone number.