How to automatically truncate a long URL and display an ellipsis in the middle when displaying it in AnQiCMS?

In website content operation, we often encounter problems where the long URL causes the page layout to be unattractive and affects user experience.Especially on list pages, navigation, or other display areas, if the original URL is displayed without processing, it may take up too much space and even burst the layout.In AnQiCMS, luckily, we can elegantly solve this problem through flexible template filters, achieving automatic abbreviation of long URLs and displaying ellipses at the end or at a specific position.

AnQiCMS provides a powerful template engine, allowing us to format and display content through template tags and filters without modifying the core code.To implement URL truncation and ellipsis display, we mainly use text processing filters.

Understand the template filters in AnQiCMS

AnQiCMS templates use a syntax similar to Django, where filters are powerful tools for processing variable output. They go through{{变量 | 过滤器名称:参数}}This form is applied. Through these filters, we can format, modify, or truncate text, numbers, links, and other content to meet different display requirements.

Core solution: useurlizetruncFilter

To meet the display requirements of URLs, AnQiCMS provides a very practical filter:urlizetruncThis filter is specifically designed to handle URLs in text, it can also automatically convert URLs into clickable links (<a>Tags), it can also automatically truncate and add an ellipsis at the end when the URL length exceeds the threshold we set.

urlizetruncThe basic usage is:

{{ 你的URL变量 | urlizetrunc:最大显示长度 }}

Here最大显示长度is a number that represents the maximum number of characters you want the URL to display, including the ellipsis at the end.

For example, if we have a variableitem.LinkStoring a very long URL, we hope it can be displayed with a maximum of 30 characters, it can be used like this:

<a href="{{ item.Link }}">{{ item.Link | urlizetrunc:30 | safe }}</a>

Please note,urlizetruncThe filter will directly include the truncated text in<a>Within tags, and when processing HTML, we usually combine the use of| safeA filter that tells the template engine that this is safe content and does not need to be escaped as HTML entities.

It is worth mentioning,urlizetruncFilters are typically designed to retain the beginning part of a URL because the protocol header and domain are often important parts of user identification information.Therefore, it will truncate the URL from the end and add an ellipsis at the truncation point.urlizetruncThis is not directly supported, but in most web display scenarios, this truncated method of retaining the starting information of the URL can well meet the needs.

The actual application scenario and operation steps

Suppose we want to truncate the links of each article in the article list pageitem.Linkto display.

1. Confirm the template file that needs to be modified:According to the AnQiCMS template design conventions, the article list page usually corresponds toarchive/list.htmlor a custom list template. You can in/templateFind the folder of the template theme you are currently using in the directory, then find the corresponding list file to edit. If your list is througharchiveListThe tag is called, then this filter is appliedarchiveListin the loopitem.Link.

2. Edit the template content:Open the selected template file. Find the place where the URL or link text is displayed, for example, it may be a<a>within the label{{ item.Link }}Modify it to useurlizetruncfilter.

   The original code may be similar to:

   <a href="{{ item.Link }}">{{ item.Title }} - {{ item.Link }}</a>
   

   After modification:

   <a href="{{ item.Link }}" title="{{ item.Link }}">{{ item.Title }} - {{ item.Link | urlizetrunc:30 | safe }}</a>
   

   Here we also added extra:titleProperty, when the user hovers over the truncated link, the full URL can be displayed to enhance user experience.

More flexible control: combininglengthFiltering and conditional judgment

Sometimes, we may not want all URLs to be forcibly truncated, but only when the length of the URL exceeds a certain value. In this case, we can combinelengthFilters and condition judgments{% if %}To achieve more precise control.

lengthThe filter can obtain the length of a string, array, or key-value pair. For strings, it calculates the actual character count (one Chinese character counts as one character).

Example: If the URL length exceeds 40 characters, it will be truncated to 40 characters for display, otherwise, the full URL will be displayed.

{% if item.Link | length > 40 %}
    <a href="{{ item.Link }}" title="{{ item.Link }}">{{ item.Link | urlizetrunc:40 | safe }}</a>
{% else %}
    <a href="{{ item.Link }}">{{ item.Link }}</a>
{% endif %}

By such a condition judgment, we can ensure that only truly long URLs will be processed, making the page more beautiful while also more flexibly displaying content.

Summary

In AnQiCMS, displaying a long URL and automatically truncating it with an ellipsis is a common requirement, particularly through the flexible use of built-in template filters, especiallyurlizetruncWe can easily achieve this goal. CombinelengthFilters and condition judgments can also further enhance the flexibility of display and user experience.This method does not require modifying the backend code, it can be adjusted directly at the template level, which is very suitable for website content operators to optimize the page.

Frequently Asked Questions (FAQ)

1. Q:urlizetruncThe filter is added at the end of the URL with ellipses, what if I really want to display an ellipsis in the middle of the URL?A: AnQiCMS built-inurlizetruncThe filter is primarily designed to truncate from the end of the URL and add an ellipsis to retain important information at the beginning of the URL. If your requirement is to display an ellipsis strictly in the middle part of the URL (for examplehttps://www.example...com/pageThis usually requires more complex logic, beyond the direct capabilities of a single template filter. You may need to combinesliceA filter to manually split the first and second parts of the URL and then concatenate them in the middle...However, this method may be cumbersome to implement in templates and requires precise calculation of the cut position. In most practical applications, it is necessary to retain the URL at the beginningurlizetruncThe method is usually enough, or you can consider using front-end JavaScript to implement more complex middle truncation display effects.

2. Q: Will truncating the display of URLs affect the website's SEO?A: No. What we are discussing here is just theoptimization at the front-end display level, the actualhrefThe value is still the complete original URL. Search engine crawlers will recognize it when they scrape the page.<a>label'shrefAttribute, rather than the text displayed internally.Therefore, this truncation on display will not have any negative impact on the website's SEO performance.<a>the tag withtitleThe attribute, put the complete URL in it, so that the user can view it when hovering.

3. Q: Can I set a global option to have AnQiCMS automatically truncate all displayed URLs?A: AnQiCMS does not currently provide a global backend setting to automatically truncate all displayed URLs.The display logic of URLs is usually controlled by specific tags in template files, different pages (such as article lists, category lists, friend links, etc.) may use different template areas to display URLs.urlizetruncThe or other string processing filter is applied to the URL variables that need to be truncated.This approach, although it requires individual modification of the template, also provides greater flexibility, as you can set different truncation lengths according to the needs of different pages and display locations.