In website content operation, we often encounter a challenge: how to keep the website interface beautiful and easy to read when displaying content of different lengths?An article of brief news report and an in-depth industry analysis, they should have differences in layout and style to provide a better user experience.AnQiCMS (AnQiCMS) understands this need and provides powerful and flexible tools in template design to solve this problem.wordcountFilter, create dynamic styles based on content length.

wordcountWhat is it? How does it work?

In the AnQiCMS template system,wordcountIt is a very practical filter, its main function is to calculate the number of 'words' in a given string.The word here is calculated based on the text segments separated by spaces.wordcountWhen applied to a content variable, it returns an integer representing the total number of words in the content.

For example, if you have a string"欢迎使用安企CMS，一个强大的内容管理系统"，Its content is translated to English.wordcountAfter filtering, a number will be obtained.

In simple terms, its usage is like this:

{{ "这是一个短句子"|wordcount }}

This code will output4.

Why use it in the template?wordcount?

UtilizewordcountFilter, we can implement various dynamic styles in the AnQiCMS template.Imagine that your website has both concise news and in-depth analysis articles.By judging the word count of the content, we can apply different CSS style classes to them, thus achieving visual distinction and layout optimization.

This not only enhances the user experience, allowing users to quickly identify the content type, but also helps designers better control page elements, avoiding issues such as content overflow or excessive blank space. For example, we can decide based on the content length:

  • The article summary card should display the 'Read More' button or adjust the size of the summary.
  • If the title in the list is too long, it can be automatically truncated or displayed with a different color to indicate.
  • The main content area of the article detail page adjusts the width according to the length of the article, and even changes the display style of the sidebar.

This ability to dynamically adjust the display based on content is a reflection of the flexibility of AnQiCMS templates.

Applied in AnQiCMS templatewordcountPractice

In AnQiCMS template, the core of implementing dynamic styles based on content length is to combinewordcountfilters and conditional judgment tags (if/elif/else）。Below, we demonstrate its application through several specific scenarios.

1. Create dynamic styles and features for article summary cards.

假设我们有一个文章列表，每篇文章都以卡片形式展示，包含标题、简要描述和链接。We hope the short summary is displayed directly, and the long summary is truncated with a 'Read more' button.At the same time, apply different background colors to abstracts of different lengths for distinction.

Firstly, we need to obtain a brief description of the article. In AnQiCMS, this is usuallyarchive.Descriptionfield.

{% archiveList archives with type="page" limit="10" %}
    {% for archive in archives %}
        {% set description_word_count = archive.Description|wordcount %}
        <div class="article-card {% if description_word_count < 30 %}card-short{% elif description_word_count < 80 %}card-medium{% else %}card-long{% endif %}">
            <h3><a href="{{ archive.Link }}">{{ archive.Title }}</a></h3>
            {% if description_word_count < 50 %}
                <p>{{ archive.Description }}</p>
            {% else %}
                <p>{{ archive.Description|truncatewords:45 }}...</p>
                <a href="{{ archive.Link }}" class="read-more-btn">阅读更多</a>
            {% endif %}
        </div>
    {% endfor %}
{% endarchiveList %}

In this code block:

  • We first go througharchive.Description|wordcountGet the number of words in the description and store it indescription_word_countthe variable.
  • Next, based ondescription_word_countto dynamically generatearticle-cardElement was addedcard-short/card-mediumorcard-longThese three CSS classes. These classes can be predefined in your stylesheet (CSS), for example, setting different background colors or border styles for cards of different lengths.
  • At the same time, we also determine the display method of the summary based on the number of words: if the description is short (less than 50 words), it is displayed in full; otherwise, it is truncated and a "Read more" link is added at the end.

2. Adjust the title style according to the title length

In some list or navigation areas, a long title may disrupt the layout. We can apply different font sizes or colors based on the length of the title.

{% archiveList archives with type="list" limit="5" %}
    {% for archive in archives %}
        {% set title_word_count = archive.Title|wordcount %}
        <li class="article-item">
            <a href="{{ archive.Link }}" class="{% if title_word_count > 8 %}title-condensed{% else %}title-normal{% endif %}">
                {{ archive.Title }}
            </a>
        </li>
    {% endfor %}
{% endarchiveList %}

Here, if the number of words in the title exceeds 8, applytitle-condensedclass (for example, it can be defined as smaller font size or ellipsis truncation), otherwise applytitle-normalclass.

3. Dynamically adjust the layout of the content area

For the article detail page, if the article content is particularly long, we may wish for it to occupy a wider layout to reduce the number of scrolls and improve the reading experience.On the contrary, short articles can maintain the standard width.

{% archiveDetail archiveContent with name="Content" %}
    {% set content_word_count = archiveContent|wordcount %}

    <div class="article-detail-wrapper {% if content_word_count > 800 %}layout-wide{% else %}layout-standard{% endif %}">
        <h1>{{ archive.Title }}</h1>
        <div class="article-metadata">
            <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
            <span>阅读量：{{ archive.Views }}</span>
        </div>
        <div class="article-body">
            {{ archiveContent|safe }} {# 确保HTML内容安全输出 #}
        </div>
    </div>
{% endarchiveDetail %}

In this example, we obtain the number of words in the article content. If it exceeds 800 words, we add the article container.layout-wideClasses, define a wider layout in CSS; otherwise, uselayout-standardstandard layout.

Tips and注意事项

  • **wordcount