How to use a filter in AnQiCMS template to convert a timestamp to a readable date format?

In website operation, we often need to display various time information on the front-end page, such as the publication date of articles, content update time, or user comment time.AnQiCMS as an enterprise-level content management system usually uses a highly efficient and concise format such as Unix timestamp for data storage.However, for users visiting the website, a string of numerical timestamps is clearly not intuitive and user-friendly.How can I convert these timestamps into a readable date format in AnQiCMS templates?

AnQiCMS provides a very practical built-in tag and filter, making this conversion process simple and quick, even if you are not well-versed in the underlying details of the Go language, you can easily achieve it.

Understand the timestamp in AnQiCMS templates

Inside AnQiCMS, such as theCreatedTime(creation time) andUpdatedTime(Update time), comments of theCreatedTime, user login logs of theLastLoginThe value is usually stored in the form of a 10-digit or more Unix timestamp.This is an integer representing the number of seconds elapsed since 00:00:00 UTC on January 1, 1970.This storage method is convenient for the system to sort, compare, and handle time zones, but when displaying to users, we would rather see the format such as 'October 27, 2023' or '10:30 AM'.

Core Tool:stampToDateTags/Filter

AnQiCMS provided for usstampToDateThis powerful tag can directly convert timestamps in the template to the readable date format we need.

Its basic usage syntax is very intuitive:{{ stampToDate(您的时间戳变量, "目标日期格式字符串") }}

There are two key parts:

1. Your timestamp variable: This is usually fromarchiveList/archiveDetailThe field containing the timestamp, for exampleitem.CreatedTimeorarchive.UpdatedTime.
2. Target date format stringThis is the string that determines the final display style of the date. Unlike some other programming languages, the date formatting string in the Go language (the underlying development language of AnQiCMS) is defined based on a fixed 'reference time', rather than using likeY-m-d H:i:sSuch a placeholder. This神奇 reference time is:2006-01-02 15:04:05.

This means:

• 2006Represents the year
• 01Represents the month (January)
• 02Represents the date
• 15Represents the hour in 24-hour format
• 04representing minutes
• 05representing seconds

You just need to replace the numbers in this reference time with the format symbols you want. For example:

• to displayYear-Month-Date:"2006-01-02"
• to displayYear/Month/Date:"2006/01/02"
• to displayYear Month Day (Chinese):"2006年01月02日"
• to displayHour:Minute:Second:"15:04:05"
• to displayComplete date and time:"2006-01-02 15:04:05"
• to displayShort month and day:"01-02"
• to displayAM/PM hour:"03:04 PM"(Note, here the03Represents the hour in 12-hour format,PMIndicates AM/PM)

Actual application in AnQiCMS template

Let's look at a specific example of how to use it in the article list and article detail pagestampToDate.

Assuming you have a list page of articles and you want to display the publish time and update time of each article, as well as the detailed publish time on the article detail page.

Article list template example ({模型table}/list.htmlor the homepageindex.htmlpart):

<div class="articles-list">
    {% 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>更新于：{{ stampToDate(item.UpdatedTime, "2006/01/02 15:04") }}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
            <p class="article-description">{{item.Description}}</p>
            <a href="{{item.Link}}" class="read-more">阅读更多</a>
        </article>
        {% empty %}
        <p>暂时没有内容。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 如果是分页列表，别忘了加上分页导航 #}
    <div class="pagination-controls">
        {% pagination pages with show="5" %}
            {# 分页代码略，参考AnQiCMS分页标签文档 #}
        {% endpagination %}
    </div>
</div>

In this example:

• item.CreatedTimeFormatted as "xxxx xx month xx day".
• item.UpdatedTimeFormatted as "xxxx/xx/xx xx:xx".

Example article detail template ({模型table}/detail.html):

`twig

<h1>{{archive.Title}}</h1>
<div class="article-info">
    <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15时04分05秒") }}</span>
    <span>更新时间：{{ stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05") }}</span>
    <span>阅读量：{{archive.Views}}</span>
</div>
<div class="article-content">
    {{archive.Content|safe}}
</div>

<div class="article-tags">
    {% tagList tags with itemId=archive.Id limit="5" %}
        {% for tag in tags %}
        <a href="{{tag.Link}}">{{tag.Title}}</a>
        {% endfor %}
    {% endtagList %}
</div>

<div class="navigation-links">
    {% prevArchive prev %}
        {% if prev %}<a href="{{prev.Link}}">上一篇：{{prev.Title}}</a>{% else %}<span>没有上一篇了</span>{% endif %}
    {% endprevArchive %}
    {% nextArchive next %}