In content creation, we often insert various links, whether referencing external materials or pointing to related pages within the site.Especially in Markdown format, if the complete URL is displayed directly, it often appears long, occupying a large amount of screen space, and severely affecting the overall beauty and readability of the article.For websites that pursue high-quality content presentation, this is an issue that cannot be overlooked.
Imagine, when a user reads a well-written article, if they encounter a long string of unprocessed links, it not only interrupts the rhythm of reading but may also make the page look disorganized. Although Markdown syntax supports[链接文本](URL)This form, but sometimes we have to paste URLs directly, or the URLs in the content are automatically generated plain text.How can these links maintain their clickability while also being presented in a more concise manner, which has become a detail worth discussing.
The solution of Anqi CMS:urlizetruncFilter
In Anqi CMS, we can take advantage of its powerful template filters to cleverly solve this problem. Among them,urlizetruncthe filter is the tool created for this purpose.
urlizetruncThe filter can intelligently recognize URLs in text and convert them into clickable HTML links, while also allowing us to specify the maximum display length of the link text.The part that exceeds this length will be automatically replaced with an ellipsis (…), thereby greatly enhancing the cleanliness of the page.Its use is very intuitive, just add it after the variable that needs to be processed|urlizetrunc:长度of which长度That is the maximum number of characters you want the link text to display.
Apply in Anqi CMS template
The AnqiCMS template adopts a syntax similar to the Django template engine, allowing us to finely control content through tags and filters. Our articles, products, and other core content are usually stored inContentfields, and througharchiveDetailtag is rendered in the front-end template.
If you have enabled the Markdown editor to edit content in the background, thenContentThe content of the field is automatically parsed as HTML by the default security CMS. To ensureurlizetruncThe filter can correctly handle and output clickable HTML links, we also need to use it in conjunction withsafeFilter to prevent HTML code from being escaped again, ensuring that the browser can parse and render normally.
Operation steps with code examples
Suppose you are editing a template for an article detail page (for examplearticle/detail.htmlorarchive/detail.html），and hope to be able to truncate the display of pure text URL links. You will find similar{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}{% endarchiveDetail %}This code block is responsible for outputting the main content of the article. Now, we just need to make a slight modification, that isurlizetrunca filter toarticleContentthe variable.
The code before modification may look like this:
{# 原始的文章内容输出 #}
<div>
{% archiveDetail articleContent with name="Content" %}
{{ articleContent|safe }}
{% endarchiveDetail %}
</div>
afterurlizetruncThe optimized code is as follows:
{# 经过 urlizetrunc 优化后的文章内容输出 #}
<div>
{% archiveDetail articleContent with name="Content" %}
{{ articleContent|urlizetrunc:50|safe }} {# 将链接文字截短至50个字符 #}
{% endarchiveDetail %}
</div>
In this example,|urlizetrunc:50WillarticleContentAll identified URL link text is truncated to a maximum of 50 characters.Even if the URL itself is very long, the reader will see a concise link text, but clicking on it will still jump to the full original link.
Some practical tips:
- Choose an appropriate truncation length:The length of abbreviation does not have a fixed standard, it is recommended to adjust according to the website design and content type.For example, if the width of your page content is limited, you can set a shorter length;If you want to keep more information, you can set a longer length.
- Take user experience into account:Shortened URLs may look nice, but a full URL can provide more information.Modern browsers usually display the full URL in the status bar or a tooltip when the user hovers over a shortened link, which largely makes up for the lack of information display.
- Automatically added
nofollow:It is worth mentioning,urlizetruncThe filter will automatically add these links when identifying and converting external links:rel="nofollow"Property. This is very friendly for SEO management, it can help you control the transmission of external link weight on the website, and avoid unnecessary loss.
By such settings, your security CMS website can not only maintain the neatness and professionalism of content, but also significantly improve the reading experience of users without sacrificing functionality.This is a simple but efficient optimization method, making your content visually and functionally superior.
Frequently Asked Questions (FAQ)
1.urlizetruncThe filter will be added automaticallyrel="nofollow"Should I add the attribute?Yes,urlizetruncThe filter automatically addsrel="nofollow"Property. This is a built-in optimization feature that helps you better manage the SEO external links of your website.
2. Can I applyurlizetruncfilters to any text field?
urlizetruncThe filter is designed to identify and process URLs in text.Although you can apply it to any field containing text, it mainly acts on URL strings.If the content of your field is a normal paragraph of text and does not contain a URL, then this filter will not have a significant effect.If you just want to truncate plain text, you can usetruncatecharsortruncatewordsFilters that can truncate text by character or word count and add an ellipsis.
3. Why did I useurlizetruncThe link did not change, or HTML tags were displayed?This is usually due to a lack of|safefilter caused. For security reasons, AnQi CMS defaults to escaping the HTML content output by templates, which means<Will become<etc.urlizetruncit will generate<a href="...">...</a>Such HTML code, if there is no subsequent|safeFilter, this HTML code will be treated as plain text output, rather than being parsed by the browser as a clickable link. Make sure your code includes{{ variable|urlizetrunc:长度|safe }}includes|safe. Also, please confirmContentThe field is set to use Markdown editor in the background or has enabled HTML rendering functionality.