Understandingarchive.DescriptionThe core of the article's introduction

In the Anqi CMS,archive.Descriptionrepresented the summary content of the article. 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 the page'smeta descriptionAs the length of its content is uncertain, we need to make a judgment and control at the template level to ensure consistency in front-end display.

Core Implementation: Use templates to determine string length

The template engine of AnQi CMS provides rich filters (Filters) and logical tags, allowing us to easily manipulate variables. To judgearchive.DescriptionThe length of a string, we can uselengthfilter. Combined withiflogical judgment tags, we can realize the display of the "Read More" link based on length.

Firstly, we can obtain the length of the article summary in the template and store it in a temporary variable for later use. For example, we can get it like this:archive.Descriptionlength:

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

Here,|lengthThe filter will returnarchive.Descriptionthe character count of 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 character count of the article summary exceeds 150, a 'Read More' link to the article details page will be displayed in the article list item.archive.LinkIt is the detail page link of the article, accessed througharchiveListAutomatically provided when looping articles by tag.

Optimize 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, the list page will still appear redundant even if the link is not displayed.To maintain the layout's neatness, we usually also truncate the introduction content.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 the length, the original abstract content should be used, while displaying, the truncated content should be used.

Let's take 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 go through{% set rawDescription = archive.Description %}Store the original introduction content inrawDescriptionThe benefit of doing this in the variable 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 a brief introduction that is displayed on the list page. This value can be flexibly adjusted according to your website design.
  3. {{ rawDescription|truncatechars:displayMaxLength }}It will output the truncated content of the summary. For example, if the original summary has 200 characters, it will output the first 150 characters and add an ellipsis.
  4. {% if rawDescription|length > displayMaxLength %}This line of code is the core logic judgment. It checksthe original introductionwhether the length exceedsdisplayMaxLengthOnly when the original introduction is long enough and indeed has 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 the consistency of the introduction length on the list page, enhance the visual experience, but also intelligently provide the 'Read More' navigation only when necessary, making the user interface more interactive and avoiding unnecessary link display.

Consideration of practical application scenarios

In the operation of actual websites, this intelligent display strategy has many advantages:

  • User experience optimizationKeep the content list concise and unified, avoid long introductions that disrupt the layout, so that users can browse information more quickly.
  • Search Engine Optimization (SEO)Display truncated summaries on the list page to avoid content repetition between the list page and detail page, which helps search engines better identify the main content and reduce the risk of potential duplicate content penalties.
  • Responsive DesignOn different devices (such as smartphones, tablets), you can adjustdisplayMaxLengthto make the length of the introduction adaptable to different screen sizes, further enhancing the user experience on mobile devices.
  • template flexibilityThe length of the excerpt is set as a variable, allowing website administrators to easily adjust the display length of the synopsis 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 utilizinglengthandtruncatecharsetc. filters, combined withifLogical tags, we can easily implement intelligent control over the article summary, thereby significantly improving the website's user experience and operational efficiency.

Common Questions (FAQ)

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

Q2: If the article summary is empty, will the 'Read more' link still be displayed? A2:No.archive.Descriptionit is empty, thenarchive.Description|lengthIt will return 0. In{% if rawDescription|length > displayMaxLength %}Such a judgment condition, 0 will never be greater than the value you set.displayMaxLength(usually greater than 0), so 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:`