In content creation, we often insert various links, whether it is to reference external materials or point to related pages within the site.Especially in Markdown formatted content, if full URLs are displayed directly, they often appear long, occupy a large amount of screen space, and seriously affect the overall beauty and readability of the article.This is an issue that cannot be ignored for websites that pursue high-quality content presentation.
Imagine when a user reads a well-detailed article, if they encounter a long string of unprocessed links, it not only interrupts the reading rhythm but may also make the page look disorganized. Although Markdown syntax supports[链接文本](URL)This form, but sometimes we have to paste the URL directly, or the URL in the content is automatically generated plain text.How to make these links clickable while also presenting them in a more concise manner has become a worthy detail to explore.
【en】Security CMS solution:urlizetruncFilter
In AnQi CMS, we can cleverly solve this problem with its powerful template filters. Where,urlizetruncthe filter is the tool created for this purpose.
urlizetruncThe filter can intelligently identify URLs in text and convert them into clickable HTML links, while allowing us to specify the maximum display length of the link text.The part exceeding this length will be automatically replaced with an ellipsis (…), thereby greatly enhancing the neatness of the page.|urlizetrunc:长度of which长度It is the maximum number of characters that you want the link text to display.
Apply in AnQi CMS template
The template of Anqi CMS adopts a syntax similar to the Django template engine, allowing us to finely control the content through tags and filters. Our articles, products, and other core content are usually stored inContentFields within, and througharchiveDetailare rendered in the frontend template tag.
If you have enabled the Markdown editor in the background to edit content, thenContentThe content of the field will be automatically parsed as HTML by the default CMS. To ensureurlizetruncThe filter can correctly process and output clickable HTML links, we still need to use it in conjunction withsafeFilter to prevent HTML code from being escaped again, ensuring the browser can parse and render normally.
Operation steps with code examples
Assume you are editing a template for an article detail page (for example)article/detail.htmlorarchive/detail.html), and you want the plain text URL links to be truncated for display. You will find something like{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}{% endarchiveDetail %}Such a code segment, it is responsible for outputting the main content of the article. Now, we just need to make a slight modification, tourlizetruncapply thearticleContentfilter to the 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:50It willarticleContentAll identified URL link text in the variable is truncated to a maximum of 50 characters.Even if the URL itself is long, the reader will see a concise link text, but it will still be able to jump to the full original link when clicked.
Some practical tips:
- Choose an appropriate truncation length:The length of the abbreviation has no 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 wish to retain more information, you can set a longer length.
- Balance user experience:Shortening links may look neat, but the full URL can provide more information.It is fortunate that modern browsers usually display the full URL in the status bar or a tooltip when the user hovers over a truncated link, which to a large extent compensates for the deficiency in information display.
- [en]Automatic addition
nofollow:It is worth mentioning that,urlizetruncThe filter automatically adds to these links when identifying and converting external links.rel="nofollow"Attributes. This is very friendly for SEO management, helping you control the weight passing of external links on your website and avoid unnecessary loss.
By such settings, your CMS website can maintain content tidiness and professionalism, while significantly enhancing the user reading experience without sacrificing functionality.This is a simple yet efficient optimization method, making your content superior in both visual and functional aspects.
Common Questions (FAQ)
1.urlizetruncThe filter will be automatically added.rel="nofollow"attributes?Yes,urlizetruncThe filter automatically adds to these links when converting plain text URLs to clickable HTML links.rel="nofollow"Properties. This is a built-in optimization feature that helps you better manage the SEO external links of your website.
Can I reassemble the array after the operation?urlizetruncApply filters to any text field?
urlizetruncThe filter is designed to identify and process URLs in text.Although you can apply it to any text-containing field, it mainly acts on URL strings.If the content of your field is a regular paragraph of text and does not contain any URLs, this filter will not have a noticeable effect.truncatecharsortruncatewordsFilters that can truncate text by characters 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|safeThe filter causes. For security reasons, Anqi CMS defaults to escaping the HTML content output by templates, which means<Will become<etc.urlizetruncwill generate<a href="...">...</a>Such HTML code, if followed by no|safeFilter, this HTML code will be output as plain text, rather than parsed by the browser as a clickable link. Make sure your code contains{{ variable|urlizetrunc:长度|safe }}contains|safe. Also, please confirmContentThe field has been set to use Markdown editor or HTML rendering feature enabled in the background.