So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to shorten the display text of a URL link in Markdown while keeping it clickable?

Calendar 👁️ 75

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 addednofollow: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&lt;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.

Related articles

How does the `urlize` filter automatically recognize and beautify URL links in Markdown content?

In daily content creation and website operation, we often need to cite external resources or provide links to more information.It takes time and is prone to errors to manually convert these links into clickable hyperlinks, especially when dealing with large amounts of content or Markdown-formatted text.AnQiCMS (AnQiCMS) understands the pain points of content operation, providing us with an elegant solution through its powerful template filter function - the `urlize` filter, which can automatically identify and beautify URL links in Markdown content.

2025-11-08

How to convert newline characters to `<br/>` in Markdown rendered plain text content?

In website content management, we often encounter such a situation: after hard work in the background editor, we press the enter key between each line of text, hoping that they will maintain the same line break effect on the front page.However, after the content was published, it was found that all the line breaks had disappeared and the text was squeezed into a ball.This is because web browsers default to treating consecutive newline characters as a single space and do not automatically convert them into visually apparent line breaks.For friends using AnQiCMS, solving this problem is actually very simple and elegant

2025-11-08

How to remove all or specified HTML tags from the HTML content rendered from Markdown?

When managing content in Anqi CMS, we often use the Markdown editor to conveniently write articles.The power of Markdown lies in its ability to convert simple plain text format into rich HTML structure, which brings great convenience to the style and expressiveness of content.But sometimes, we do not need or do not want these HTML tags to be completely displayed on the final page.

2025-11-08

How to safely truncate a Markdown-rendered HTML content by words?

In content operation, we often need to display a brief version of the content on list pages, aggregation pages, or article summary areas.This not only optimizes the page layout and improves user experience, but also helps search engines better understand the content theme to some extent.However, when content is written in Markdown format and finally rendered as HTML, if you need to truncate it, you may encounter some challenges.It is easy to truncate HTML content by characters or bytes, which can easily lead to incomplete tags, disordered page structure, and even display errors.

2025-11-08

How to prevent malicious script (XSS) injection after Markdown content is rendered into HTML?

In daily content creation, Markdown is favored by content operators for its concise and efficient syntax.It allows us to focus on the content itself without paying too much attention to the complex layout details.However, when we render Markdown content into HTML and present it on the website, a potential security risk——cross-site scripting (XSS) emerges.Effectively prevent XSS attacks is the key to ensuring website security and maintaining user trust.### Understanding Markdown Rendering and XSS

2025-11-08

What is the purpose of the `escapejs` filter in handling JavaScript code snippets in Markdown content?

In the daily operation of Anqi CMS, we often use the Markdown editor to enrich content display, which allows us to conveniently format articles, insert code examples, and even mathematical formulas and flowcharts.However, this convenience is also accompanied by potential security risks, especially when handling Markdown content submitted by users and dynamically embedding it into JavaScript code snippets on web pages.At this moment, understanding and correctly using the `escapejs` filter is particularly important, as it acts like an invisible barrier, silently guarding the security of our website.

2025-11-08

How to render the custom field `introduction` in Markdown content to HTML?

In AnQiCMS, custom fields provide us with great flexibility, allowing us to expand the content structure according to actual business needs.For example, you may have set up a custom field named `introduction` for articles or products and want to write a Markdown-style introduction in this field.How can you render Markdown content correctly on the website front-end so that it presents rich formatting on the page?This article will introduce how to easily achieve this goal.### Understand

2025-11-08

What Markdown syntax standards and extensions does the AnQiCMS Markdown editor support?

The AnQiCMS Markdown editor brings great convenience and powerful expressiveness to content creation.It is not just a text input box, but also an intelligent tool that can structure and visualize complex information, aiming to help users build high-quality content more efficiently and intuitively.On the basis of Markdown syntax support, AnQiCMS follows the mainstream standards and provides comprehensive functions, allowing users to focus on the content itself without paying too much attention to layout details.You can easily use the hash `#` to create headings of different levels

2025-11-08