In the template design of AnQi CMS, in order to ensure the beauty of the page and the uniformity of the layout, we often need to truncate the article title and automatically add an ellipsis after truncation.AnQiCMS provides a simple and efficient template filter to meet this requirement, making content display more flexible.

Core Principle: Understanding AnQiCMS Template Filters

In the AnQiCMS template system, with its powerful Django-like template engine, we can conveniently use 'filters' to process and format data.These filters can process variables, such as changing case, formatting time, or what we are currently focusing on - truncating strings.

AnQiCMS provides for character truncation and ellipsis addition to article titlestruncatecharsFilter. Its function is: When the number of characters in a string exceeds the specified length, the extra characters will be automatically truncated and an ellipsis will be added at the end....It is worth noting that,truncatecharsWhen counting characters, the automatically added ellipses are included.

The basic syntax for using a filter is as follows:{{ 变量 | 过滤器名称 : 参数 }}

Here,变量Refers to the string you want to truncate (such as an article title),过滤器名称That istruncatecharswhile参数Then it is the maximum number of characters you want to retain.

Practice: Apply title truncation in the template

Next, let's look at how to truncate article titles in the AnQiCMS template through specific template code examples.

Scenario one: Truncation of article list page titles.

On the article list page of the website (such as the latest articles on the homepage, category article lists, etc.), the title usually needs to be kept within a certain length to avoid layout chaos.archiveListlabel combined withtruncatecharsThe filter is an ideal choice.

Suppose we want to display article titles in a list and limit their length to 30 characters:

{# 假设我们正在循环输出文章列表，变量名为 archives #}
{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            {# 对文章标题 item.Title 进行字符截断，并限制在 30 个字符以内 #}
            <h5>{{item.Title | truncatechars:30 }}</h5>
            <div>{{item.Description}}</div>
            {# ... 其他文章信息 ... #}
        </a>
    </li>
    {% empty %}
    <li>
        当前没有可展示的文章。
    </li>
    {% endfor %}
{% endarchiveList %}

In this example,item.Titleis the article title we get.| truncatechars:30The system will automatically check the title length. If it exceeds 30 characters, it will be truncated from the 27th character and a suffix will be added after it....Total length is finally 30 characters.

Scenario two: Single article title truncation (non-list scenario)

Although the full title is usually displayed on the article detail page, in certain special layouts such as page sidebars or custom modules where a brief version of the current article title is needed, it can also be usedtruncatecharsFilter.

Assuming in a sidebar module, it is necessary to display the title of the current page and limit it to 20 characters:

{# 获取当前文章的详情，假定变量 archive 已可用 #}
{# 如果 archive 未直接可用，可以使用 archiveDetail 标签获取，例如：
   {% archiveDetail currentArchive with name="Title" %}
   <h3>{{ currentArchive | truncatechars:20 }}</h3>
#}
<div>
    <h3>{{archive.Title | truncatechars:20 }}</h3>
    <p>{{archive.Description | truncatechars:50 }}</p>
</div>

Here,archive.Titlerepresenting the title of the current article. Similarly,| truncatechars:20Ensure the title is displayed within 20 characters and automatically adds an ellipsis.

Additional hint: Handle titles containing HTML.

Although the article title is typically plain text, if the content of your website or the 'title' of some special fields may contain HTML tags (for example, through custom field input), it is not recommended to use them directly.truncatecharsIt may destroy the HTML structure. In this case, AnQiCMS providestruncatechars_htmlFilter. It intelligently attempts to maintain the integrity of HTML tags during truncation, preventing unclosed tags.

In order to ensure that content containing HTML is correctly parsed by the browser rather than displayed as plain text, it is usually necessary to配合|safeFilter.

{# 假设 item.RichTitle 是一个可能包含 HTML 的标题 #}
<h5>{{item.RichTitle | truncatechars_html:50 | safe }}</h5>

In this example,truncatechars_html:50The title will be truncated to 50 characters while retaining the HTML structure, and an ellipsis will be added.| safeTell the template engine that this content is safe HTML and does not need to be escaped.

Precautions

  • Choose an appropriate truncation length:The length of truncation needs to be decided according to the actual page design and reading habits.The information may be insufficient if too short, and the significance may be lost if too long.Suggest performing more tests and adjustments in the actual environment.
  • Chinese character processing:AnQiCMS is developed in Go language, which supports Unicode string processing natively. This meanstruncatecharsThe filter correctly counts a Chinese character as one character during processing, without truncating half of a character.
  • SEO Consideration:Although truncating article titles is mainly for the aesthetic display of the front end, please remember that the pagetitleTags (usually set through TDK tags) should contain a complete, SEO-optimized title.The truncation in templates usually only affects local displays such as lists or cards, rather than the core SEO title of the page.

Through the reasonable use of the AnQiCMS providedtruncatecharsFilter, we can easily implement automatic character truncation and ellipsis addition for article titles, thus optimizing the visual presentation and user experience of the website.

Common Questions (FAQ)

  1. What is the ellipsis character displayed after truncation customizable to other symbols, such as...？”“can be customized to other symbols, such as... [更多]? Answer:in AnQiCMS providedtruncatecharsfilter, the ellipsis (...[en] It is a part of its built-in behavior, and the document does not mention any parameters for directly configuring or modifying the default ellipsis character. If you need to customize the content after the ellipsis, you may need to use more complex template logic (such as using}]}ifConditionally judge the length of a string, then manually concatenate the truncated content and a custom suffix), or consider using a custom template function, but this is usually beyond the capabilities provided by a simple filter.

  2. Ask: If my article title itself contains HTML tags, will it be an issue if I use it directly?truncatecharsWill there be a problem if I truncate it? Answer:Yes, if the article title contains HTML tags (for example,<strong>我的标题</strong>Use directlytruncatecharsThe filter may truncate tags directly based on the number of characters, which can destroy the HTML structure and affect page rendering. To avoid this situation, AnQiCMS providestruncatechars_htmlFilter. This filter attempts to maintain the integrity of HTML tags when truncating. When usingtruncatechars_htmlit, it is usually also necessary to use with|safe