In website operation, the cleanliness of the content list page and the user experience are crucial.When the article introduction is too long, it may not only occupy too much page space, affect the overall layout beauty, but may also dilute the guiding role of the 'Read More' link.Therefore, it is an effective strategy to intelligently decide whether to display the "Read More" link based on the actual length of the article summary, which enhances the professionalism and user-friendliness of the website.AnQiCMS (AnQiCMS) provides a powerful and flexible template function, making it simple and efficient to meet this requirement.

Understandingarchive.Description: The core of the article introduction

In AnQi CMS,archive.DescriptionRepresents the article's summary content. This field is usually filled in during the background editing of the article, used to summarize the main theme of the article, often displayed on the article list page, search results summary, or as part of the page.meta description. As the length of its content is uncertain, we need to judge and control it at the template level to ensure consistency in the front-end display.

Core implementation: using a template to judge the length of a string

The Anqi CMS template engine provides rich filters (Filters) and logical tags, allowing us to easily operate on variables. To judgearchive.DescriptionThe length of the string, we can uselengthFilter. CombineifWith the logical judgment tag, we can determine the display of the 'Read More' link according to the length.

First, we can obtain the length of the article introduction in the template and store it in a temporary variable for later use. For example, we can get it like thisarchive.Descriptionlength:

{% set descriptionLength = archive.Description|length %}

here,|lengththe filter will returnarchive.DescriptionThe number of characters in a string. Next, we can set a threshold, such as 150 characters, to determine whether to display the 'Read more' link.

{% set descriptionLength = archive.Description|length %}
{% if descriptionLength > 150 %}
    <a href="{{ archive.Link }}">阅读更多</a>
{% endif %}

In the above code snippet, if the number of characters in the article summary exceeds 150, then a "Read more" link to the article detail page will be displayed in the article list item.archive.LinkIs the link to the article details, througharchiveListIt will automatically provide when the tag cycles articles.

Optimize the display effect: control the length of the introduction content

It may not be enough to just judge whether to display the 'Read More' link.If the introduction itself is long, even without displaying the link, the list page will still seem redundant.To maintain the layout neat, we usually also truncate the introduction content. At this time,truncatecharsThe filter comes into play.truncatecharsThe filter can truncate a string to a specified number of characters and add an ellipsis (...) at the end.

The key is: When determining length, the original content should be used, and the truncated content should be displayed.

Let's look at a more complete example, which combines length judgment and content truncation:

{% archiveList archives with type="list" limit="10" %} {# 假设这里正在循环文章列表 #}
    {% for archive in archives %}
        <div class="article-item">
            <h3><a href="{{ archive.Link }}">{{ archive.Title }}</a></h3>

            {# 获取原始简介内容，并设定一个希望显示的简介最大长度 #}
            {% set rawDescription = archive.Description %}
            {% set displayMaxLength = 150 %} {# 定义希望显示的简介最大字符数 #}

            {# 显示截取后的简介内容，确保列表页的整洁 #}
            <p>{{ rawDescription|truncatechars:displayMaxLength }}</p>

            {# 判断原始简介的长度是否超过了设定的最大长度，如果超过则显示“阅读更多”链接 #}
            {% if rawDescription|length > displayMaxLength %}
                <a href="{{ archive.Link }}" class="read-more">阅读更多</a>
            {% endif %}
        </div>
    {% endfor %}
{% endarchiveList %}

In this code block:

  1. We pass{% set rawDescription = archive.Description %}Store the original introduction content inrawDescriptionIn the variable. The advantage of doing this is that we can still retain the original content for length judgment while extracting the content.
  2. {% set displayMaxLength = 150 %}Defined the maximum number of characters for the summary to be displayed on the list page, this value can be flexibly adjusted according to your website design.
  3. {{ rawDescription|truncatechars:displayMaxLength }}The excerpt of the brief introduction will be output. For example, if the original brief introduction has 200 characters, here will output the first 150 characters with an ellipsis.
  4. {% if rawDescription|length > displayMaxLength %}This line of code is the core logic judgment. It checksOriginal introductionWhether the length exceedsdisplayMaxLength. Only when the original introduction is long enough and there is indeed more content that needs to be 'read', will the link be displayed.
  5. archive.LinkTags will automatically output the link to the current article's detail page.

In this way, we not only ensure that the length of the introduction on the list page is consistent, improve the visual experience, but also intelligently provide the "Read More" navigation when necessary, making the user interface more interactive and avoiding unnecessary link display.

Consideration of practical application scenarios.

In the operation of a website, this intelligent display strategy has many advantages:

  • User experience optimization: Keep the content list concise and unified, avoid long introductions that disrupt the layout, allowing users to browse information more quickly.
  • Search Engine Optimization (SEO): Display a truncated summary on the list page to avoid content repetition between the list page and the detail page, which is helpful for search engines to better identify the main content and reduce the risk of potential duplicate content penalties.
  • Responsive DesignOn different devices (such as mobile phones, tablets), you can adjustdisplayMaxLengthto make the length of the introduction adapt to different screen sizes, thereby improving the user experience on mobile devices.
  • template flexibilitySet the truncation length to a variable, allowing website administrators to easily adjust the display length of the introduction without modifying the core logic, to accommodate different design requirements or test effects.

In summary, the template engine of Anqi CMS provides strong support for the fine management of website content. By flexibly usinglengthandtruncatecharsCombine filters, withifLogical tag, we can easily implement intelligent control over the article summary, thereby significantly improving the user experience and operational efficiency of the website.

Frequently Asked Questions (FAQ)

Q1: I set the excerpt length, but the "Read More" link is still not displayed, what's the matter? A1:Please check if the variable you are using to determine the length is the original introduction content. For example, if you use{% set displayDescription = archive.Description|truncatechars:150 %}and then usedisplayDescription|lengthTo judge, then this length is already the length after truncation, and may never exceed the threshold you set. The correct approach is to use the originalarchive.Description|lengthTo judge, as shown in the article examplerawDescription|length.

Q2: If the article summary is empty, will the 'Read More' link still be displayed? A2:will not. Ifarchive.DescriptionIf it is empty, thenarchive.Description|lengthIt will return 0. In{% if rawDescription|length > displayMaxLength %}Under such a judgment condition, 0 will never be greater than the one you set.displayMaxLength(usually greater than 0), therefore the 'Read More' link will not be displayed. This is a logical default behavior.

Q3:truncatecharsandtruncatewordsWhat is the difference between these filters, and how should I choose? A3:`