In daily content operations, we often need to mention various URLs in articles, product descriptions, or page introductions.If these URLs are displayed only as plain text, users will need to manually copy and paste them to access, which undoubtedly will greatly reduce their reading experience and the interactivity of our website.How can we automatically make the URL strings in these texts clickable?In Anqi CMS, this is very simple to implement, no complex code development is required, just use its powerful template filter function to easily handle it.

Say goodbye to the麻烦 of manually adding links:urlizeFilter comes in!

Imagine you are editing an article about an industry trend, and the article mentions many reference website URLs, such ashttps://www.example.com/industry-reportOrwww.another-site.org/case-study.html. If you add them manually one by one<a>Labels, both time-consuming and prone to errors. Anqicms provides for thisurlizeThis practical template filter is like an intelligent assistant that can automatically identify URL strings in text and convert them into standard clickable HTML links.

It is very intuitive to use. Suppose the content of your article is stored in a variable, such asarchiveContentyou just need to call it like this in the template:

{{ archiveContent|urlize|safe }}

You may notice that, in addition tourlizeI also added an extra one|safeThis is becauseurlizeThe filter will generate HTML tags when converting URLs (for example<a href="...">...</a>）。To ensure that the browser can correctly parse and display these HTML instead of treating them as plain text, we need to explicitly tell the Anqi CMS template engine that these byurlizeThe generated HTML code is “safe”, it can be rendered directly.

After this code is executed, all similarhttp:///https:///www.URLs at the beginning, even some simple domain names, will be automatically converted into clickable links. Even better,urlizeThe filter will also automatically add to these automatically generated links, especially external linksrel="nofollow"Attribute, this is very helpful for the website's SEO optimization, it can avoid unnecessary weight dispersion.

Elegantly handle long links: urlizetruncFilter

Sometimes, you might encounter some very long URLs that not only take up a lot of space but also affect the aesthetics of the page. To keep the page tidy without sacrificing the usability of the links, Anqi CMS providesurlizetruncFilter. It isurlizeAn upgraded version, which can automatically convert links while also specifying the display length of the link text. When the display length of the original URL exceeds the value you set, it will be automatically truncated with an ellipsis (...Please replace the text that exceeds the part.

UseurlizetruncIt is also very simple, just add a colon after the filter and the maximum number of characters you want to display. For example, if you want the link to display a maximum of 20 characters:

{{ archiveContent|urlizetrunc:20|safe }}

This way, likehttps://www.example.com/very-long-and-descriptive-url-for-this-article.htmlsuch links may only be displayed ashttps://www.exampl...while maintaining the validity of the link and making the page content look cleaner.

Apply this feature to your website

This practical URL auto-conversion feature can be applied to a variety of content display scenarios in Anqi CMS. Whether you are displaying on the article detail pagearchive.Content(Document content), displayed on the category list pagecategory.Description(Category description), or rendered on a single pagepage.Content(Single-page content), even in custom fields, wherever you need to output plain text containing URLs to the front-end, you can use it flexiblyurlizeorurlizetruncfilter.

These filters are built-in features of the Anqie CMS template engine, thanks to its Django-like template syntax, you can easily configure them directly in the template files without modifying any backend code or performing complex background settings.Just find the text variables you need to process in the template, then add the corresponding filters, and your website can become more user-friendly instantly.

In this way, Anqi CMS greatly improves our content publishing efficiency, and also brings a smoother and more convenient browsing experience to visitors.Make those boring URL strings come alive, making them accessible at a touch, which is the convenience and efficiency we pursue in content operations.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I useurlizeorurlizetruncThe filter, the URL in the text did not become a clickable link?Answer: This is very likely because you forgot to add at the end of the filter chain|safefilter.urlizeandurlizetruncIt will generate HTML tags, if not marked as output|safeThe template engine will escape it as plain text for security reasons, resulting in<a>The tag cannot be parsed normally. Please make sure your code is similar to{{ 文本变量|urlize|safe }}.

  2. Question:urlizeandurlizetruncWill it automatically handle internal links (such as the article links within my website)?Yes, these two filters will recognize all strings that match the URL format, whether it is an external link or a link within your site, and will automatically convert them into clickable links<a>Labels. They are also automatically added for internal linksrel="nofollow"Property, this usually needs to be judged as ideal according to your SEO strategy. If you need to handle internal links specially (for example, not addingnofollow），may need to preprocess the text before output, or consider adding internal links manually.

  3. Question: When usingurlizeorurlizetruncWhen, I need to make sure that the URL strings all containhttp://orhttps://the prefix?Answer: Not entirely.urlizeandurlizetruncThe filters are smart enough, they usually can identify that the prefix starts withwww.Domain names at the beginning, even some naked domain names (such asexample.com), and automatically add for themhttp://Prefix. However, to ensure the highest recognition rate and the integrity of the link, it is strongly recommended to use the complete URL as much as possible, that is, includinghttp://orhttps://Protocol header.