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

Make plain text URLs come alive: Hyperlink conversion techniques in Anqi CMS

Imagine that you are reading an interesting article, and it mentions a useful external resource link, but it is just plain text.You need to manually select, copy, and then paste it into the browser's address bar, which is not only麻烦 but also prone to errors.Whether this link can be clicked directly to jump, isn't it more convenient?In AnQi CMS, we can fully achieve this, taking the professionalism and user-friendliness of the website content to a new level.

The template system of AnQi CMS is very flexible, it utilizes powerful filter (Filter) functions, whereurlizeandurlizetruncThese two filters are the 'secret weapon' we use to implement automatic conversion of plain text URLs.

Reveal the core features:urlizeFilter

urlizeThe working principle of the filter is simple: it intelligently scans the specified text you specify and automatically identifies the URLs that match the format (such ashttp:///https://the URL at the beginning, evenwww.The string of the domain at the beginning, as well as the email address, and then wrap them into standard HTML<a>tags to make them clickable hyperlinks.

To ensure that the hyperlinks are correctly displayed as clickable HTML elements and not escaped as plain text by the browser, we also need to use in conjunction with|safeFilter.|safeTells the browser that this content is safe HTML that can be parsed and rendered directly.

Basic usage example:

Suppose your article content is stored in a file namedarchiveContentIn the variable, if you want to make all plain text URLs clickable, you can write it like this in the template file:

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

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

More fine-grained control:urlizetruncFilter

Sometimes, very long URL addresses may appear in articles, which can make the page look bulky and unattractive. 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 while converting....The end, but the actual address of the link itself remains complete.

Example of usage:

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

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

So, a long URL like this,https://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.

applications in different content types

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

  • Article detail page:This is the most common application scenario, when displaying article content (archive.Content) is used.
  • Single page content:For example, on the "About Us" or "Contact Us" page, if it contains a website, the single page content (page.ContentApply this filter.
  • Category description or Tag description:If you have included a URL in the category or tag description, 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 files used by the website.

  1. Confirm the template file to be modified:Generally, the article detail page istemplate/你的模板目录/模型table/detail.html[for example]template/default/article/detail.html) the single page istemplate/你的模板目录/page/detail.html. If you are unsure about the specific file, you can check the template file structure in the background 'Template Design'.

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

  3. AddurlizeorurlizetruncFilter:Change content variable to{{ archiveContent|urlize|safe }}or{{ archiveContent|urlizetrunc:30|safe }}.

    Special reminder: The order of handling 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 filter like this:

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

    Hererender=trueFirst, convert Markdown to HTML, thenurlizeprocess the plain text URLs in it, finallysafeensure that the HTML can be displayed correctly.

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

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

Common Questions (FAQ)

1. I added it in the template,|urlizebut the plain text link still can't be clicked, what's the matter?It's likely that you forgot to add,|safethe filter.urlizeThe filter will convert plain text URLs to HTML,<a>but if there is no,|safeThe cooperation, due to security considerations, the template engine may escape the HTML special characters, resulting in the final display is still in plain text format, and cannot be clicked. Please make sure that your code is{{ 变量名|urlize|safe }}.

2.urlizeandurlizetruncWhat are the specific differences between filters, and which one should I choose? urlizeWill fully convert plain text URLs in the text to clickable hyperlinks, with the display text being the original URL.urlizetruncWhen performing the same conversion, it will also be based on the length you specify (for exampleurlizetrunc:30), and display thetext of the hyperlinktruncated and appended with..., but the actual link address remains unchanged.

  • If the URLs in your article are usually short, or if you want users to see the full URL path, you can choose tourlize.
  • If your articles often contain very long URLs, to make the page look beautiful and tidy, and to avoid the long URL from stretching the page layout,urlizetruncthis would be a better choice.

3. My content is published through the Markdown editor.urlizeWhere should the filter be placed to be effective?For the content published by the Markdown editor, AnQi CMS will first convert the Markdown syntax to HTML. Therefore,urlizeThe filter should be applied after this transformation process. If you are using it in the templatearchiveDetailTag display content, and has usedrender=trueProcess the parameter for Markdown, the correct order should be{{articleContent|render=true|urlize|safe}}This ensuresurlizeAfter Markdown has been converted to HTML, identify and convert the plain text URLs within it.