How to use the `wordcount` filter to display the word count of each article on the article list page?
When operating a website, we often need to understand some basic information about articles, such as reading time, word count, etc.This data not only helps us optimize content strategy, but also allows readers to have a preliminary judgment of the article while browsing.In AnQi CMS, by utilizing its powerful template filter function, we can easily display the word count of each article on the article list page.
The AnQi CMS template engine provides a rich set of filters (filters), which are like a toolbox for processing variables in templates, such as formatting dates, truncating strings, of course, including the one we are discussing today - word count. The syntax of using filters is very intuitive, usually adding a pipe symbol after the variable|Then follow the filter name, if parameters are needed, add a colon after the filter name.:And parameters.
The core tool for counting the number of words in articles iswordcountA filter. As the name suggests,wordcountThe filter's role is to count the number of words or characters in the text.It will traverse the input string and count the number of 'words' based on spaces and other delimiters.For Chinese content, a character is usually considered a 'word' or at least a counting unit;For English content, count the words according to the word.
We need to edit the corresponding list page template file to display the word count of each article on the article list page. These template files are usually located in/template/{您的模板目录}/{模型table}/list.htmlor a similar path (for exampledefault/article/list.html)
The steps to implement this feature are as follows:
First, we need to usearchiveListTag to get the article list data. This tag can help us retrieve articles that meet the conditions from the database and organize them into a collection that can be iterated over by the template.archiveListWithin the tag, we will useforto process each article one by one.
InforIn the loop, the data of each article will be assigned to a variable (usuallyitem). The content of the article is stored initem.ContentThis field contains. At this point, we only need to simplywordcounta filter toitem.Contentto get the number of words in the article.
For example, you can add the following code snippet to the article list page template:
{# 假设这是您的文章列表页模板文件，例如：default/article/list.html #}
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<article class="article-item">
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
<div class="article-meta">
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
{# 这里是核心：使用 wordcount 过滤器统计文章字数 #}
<span>字数：{{ item.Content|wordcount }}</span>
</div>
<div class="article-description">
<p>{{item.Description}}</p>
</div>
<a href="{{item.Link}}" class="read-more">阅读全文</a>
</article>
{% empty %}
<p>暂时没有文章发布。</p>
{% endfor %}
{# 如果您使用了分页功能，还需要添加分页代码 #}
{% pagination pages with show="5" %}
{# 这里放置您的分页链接代码，例如： #}
<div class="pagination-links">
{% if pages.FirstPage %}<a href="{{pages.FirstPage.Link}}">首页</a>{% endif %}
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
{% for page_item in pages.Pages %}
<a class="{% if page_item.IsCurrent %}active{% endif %}" href="{{page_item.Link}}">{{page_item.Name}}</a>
{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
{% if pages.LastPage %}<a href="{{pages.LastPage.Link}}">尾页</a>{% endif %}
</div>
{% endpagination %}
{% endarchiveList %}
In this code block,{{ item.Content|wordcount }}It is the key to implementing word count. It will retrieve the content of the current article.item.ContentThen proceedwordcountThe filter calculates the number of words and displays them directly. In this way, you can add a practical and informative element to your article list, enhancing the user experience.
Frequently Asked Questions (FAQ)
Q1: Why did I modify the template file and addwordcountthe filter, and the front-end page did not take effect immediately?
A1:The AQCMS usually enables template caching to improve website access speed.After you modify the template file, the browser may still load the old cached file, or the server may not update the cache in time.You can try to clear the cache in the "System Settings" or "Update Cache" feature on the AnqiCMS backend, and then force refresh the browser (Ctrl+F5 or Cmd+Shift+R).
Q2:wordcountWhat is the filter counting, the number of Chinese characters or English words? Will the inclusion of HTML tags in the article content affect the counting results?
A2: wordcountThe filter will differentiate 'words' based on spaces in the text and count them.For English, it can accurately count the number of words; for Chinese, because Chinese characters are usually not separated by spaces, it often counts the number of individual Chinese characters.If your article contentitem.ContentContains a large number of HTML tags (such as<p><strong>内容</strong></p>)wordcountThe filter will also count these tag texts, which may not be the 'visible word count' you want. To get a more accurate pure text word count, you can use it beforewordcount.striptagsFilter, for example{{ item.Content|striptags|wordcount }}This can remove all HTML tags first, then count the number of pure text characters.
Q3: Besides the article list page, I can use it in other places.wordcountAre you looking for a filter? Like the article detail page?
A3:Of course. As long as you can get a string variable containing the article content in the template, you can use it.wordcountFilter. On the article detail page (usuallydefault/article/detail.htmlor similar files), the article content is generally obtained througharchive.Contentor{% archiveDetail with name="Content" %}. You can directly apply it to the detail page, for example文章字数：{{ archive.Content|wordcount }}To display word count information at the top or bottom of the article.