How to automatically convert a plain text URL into a clickable hyperlink in content display?

It is crucial to provide users with a smooth and convenient browsing experience in website operation.When our articles, pages, or product descriptions contain URLs in plain text form, and users need to manually copy and paste to access them, it will undoubtedly greatly reduce their user experience.AnQi CMS understands this well, providing a simple and efficient method to automatically convert these plain text URLs into clickable hyperlinks, thereby bringing the content to life.

Make plain text URLs automatically 'come alive': The hyperlink conversion technique in AnQi CMS

Imagine you are browsing a fascinating article, and it mentions a useful external resource link, but it is just plain text.At this point, you need to manually select, copy, and paste it into the browser address bar, which is not only麻烦(troublesome), but also prone to errors.If this link could jump directly, wouldn't it be more convenient?In Anqi CMS, we can fully achieve this, making the professionalism and user-friendliness of the website content even better.

The AnQi CMS template system is very flexible, it utilizes powerful Filter features, among whichurlizeandurlizetruncThese filters are the 'secret weapon' we use to implement automatic conversion of plain text URLs.

The core feature revelation:urlizeFilter

urlizeThe principle of the filter is very simple: it intelligently scans the specified text, automatically identifying the part that conforms to the URL format (such ashttp:///https://even the websites starting withwww.The domain at the beginning, as well as the email address) string, then wrap it in standard HTML<a>Tags to make it clickable.

To ensure that the converted hyperlink is displayed correctly as a clickable HTML element and is not escaped as plain text by the browser, we need to use it in conjunction with|safefilter.|safeTell the browser that this content is safe HTML, which can be directly parsed and rendered.

Basic usage example:

Assume that the content of your article is stored in a folder namedarchiveContentIn the variable, you want all plain text URLs to become clickable links, then in the template file, you can write it like this:

<div>
    {{ archiveContent|urlize|safe }}
</div>

Through such processing, the original http://www.anqicms.comwill be automatically converted to<a href="http://www.anqicms.com" rel="nofollow">http://www.anqicms.com</a>and will be increased by defaultrel="nofollow"attribute, which is also a friendly practice for SEO.

Fine control:urlizetruncFilter

Sometimes, a very long URL may appear in the article, which can make the page look bulky and affect its aesthetics. At this time,urlizetruncThe filter comes into play. It can not only convert plain text URLs to hyperlinks, but also truncate the display text of the hyperlinks to the specified length and display them as...But the actual address of the link itself remains intact.

Example of usage:

If you want the display text of the link to be no longer than 30 characters, you can use it like this:

<div>
    {{ archiveContent|urlizetrunc:30|safe }}
</div>

Such, a long URL likehttps://en.anqicms.com/long-article-title-with-many-words-and-parametersmay be displayed as<a href="https://en.anqicms.com/long-article-title-with-many-words-and-parameters" rel="nofollow">https://en.anqicms.com/long-article...</a>while maintaining the link function and optimizing the page layout.

in applications of different content types

This feature is very flexible, almost applicable to any scenario in AnQi CMS that requires displaying text content:

• Article detail page:This is the most common application scenario, used when displaying article content(archive.Content)
• Single page content:For example, on the “About Us” or “Contact Us” page, if it contains a website, the single page content (page.Content) can be filtered using this filter.
• Category description or Tag description:If you include a URL in the description of a category or tag, you can alsocategory.Descriptionortag.DescriptionApply this filter to enhance the interactivity of these pages.

Operation steps and precautions

To apply these filters, you need to modify the template file used by the website.

1. Confirm the template file that needs to be modified:通常，文章详情页是template/你的模板目录/模型table/detail.htmlfor exampletemplate/default/article/detail.html），单页面是template/你的模板目录/page/detail.htmlIf you are not sure which file it is, you can check the template file structure in the background template design.

2. Find the corresponding variable for the displayed content:In the template file, locate the code line responsible for displaying the main content (such as the article body, single page content). It will usually be like{{ archiveContent|safe }}/{{ pageContent|safe }}or{{ categoryContent|safe }}in this form.

3. addurlizeorurlizetruncFilter:Modify the content variable to{{ archiveContent|urlize|safe }}or{{ archiveContent|urlizetrunc:30|safe }}.

   Special reminder: The processing order of Markdown contentIf your content has enabled the Markdown editor, Anqi CMS will first render the Markdown syntax into HTML. In this case,urlizeThe filter should be applied after Markdown rendering. For example, ifarchiveDetailtags are used to render Markdown content, you can organize the filters like this:

   {%- archiveDetail articleContent with name="Content" render=true %}
   {{articleContent|urlize|safe}}
   

   Hererender=trueFirst, convert Markdown to HTML, thenurlizeThen process the plain text URLs within, finallysafeEnsure that the HTML displays correctly.

4. Save and update the cache:After modifying the template file, remember to save it. If the website has enabled caching, you may also need to clear the "Update Cache" function in the AnQi CMS backend to ensure that the changes take effect.

By following these simple steps, you can automatically convert plain text URLs in the website to clickable hyperlinks, greatly enhancing user experience and making the website content more vivid and practical.

Frequently Asked Questions (FAQ)

1. I added in the template|urlizeBut the plain text link still can't be clicked, what's wrong?This is likely because you forgot to add|safefilter.urlizeThe filter will convert plain text URLs to HTML<a>tags, but if there are none|safeThe cooperation, the template engine may escape the HTML special characters for security reasons, resulting in the final display still being plain text format and not clickable. Make sure your code is{{ 变量名|urlize|safe }}.

2.urlizeandurlizetruncWhat are the specific differences between the filters, and which one should I choose? urlizeThe text will be fully converted into clickable hyperlinks, with the displayed text being the original URL.urlizetruncWhile performing the same conversion, it will also truncate the hyperlinks according to the length you specify (for exampleurlizetrunc:30), and addDisplay textto them..., but the actual link address does not change.

• If the URLs in your article are usually short, or you want users to see the full URL path, you can chooseurlize.
• If your article often has long URLs, in order to make the page beautiful and tidy, to avoid the long URL from stretching the page layout, thenurlizetruncWould be a better choice.

3. My content is published through a Markdown editor,urlizeWhere should the filter be placed to be effective?For content published in Markdown editors, Anqi CMS will first convert Markdown syntax to HTML. Therefore,urlizeThe filter should be applied after this transformation process. If you passarchiveDetailcontent displayed through tags and usedrender=trueParameters to process Markdown, then the correct order should be{{articleContent|render=true|urlize|safe}}This ensures thaturlizeAfter Markdown has been converted to HTML, identify and convert the plain text URLs within it.