How to format and display timestamps as readable dates or times in templates?

In the daily operation of Anqi CMS, we often need to handle various data, among which time information is undoubtedly the most common and most important category.Whether it is the publication date of the article, the update time, or the specific moment of user comments, these time data are usually stored in the form of timestamps.However, the original timestamp is not intuitive for ordinary users; they are more like a string of meaningless numbers.It is crucial to convert these timestamps into a date or time format that is easy to understand at this time.

The AnQi CMS template system, which adopts syntax similar to the Django template engine, provides us with powerful flexibility to control the display of content. Among them, the built-in tool for handling timestamps is the onestampToDateThe tag helps us easily convert a 10-digit timestamp obtained from the background into various readable date and time formats.

Understanding timestamps and time data in AnQi CMS.

In Anqi CMS, you may encounter timestamps in many places. For example, when you usearchiveDetailtags to get article details, orarchiveListtags to get the article list,CreatedTime(creation time) andUpdatedTimeThe field of (update time) defaults to returning all 10-digit timestamps. Similarly, incommentListto get the comments in theCreatedTimeor throughuserDetailTags retrieve users' information.LastLogin(recent login time) andExpireTimeWhen the VIP expires, timestamps will also be obtained.

These timestamps are typically the number of seconds elapsed since the Unix epoch (January 1, 1970, 00:00:00 UTC). Although convenient for machine reading, they are not easy for the human eye to read.1675910400These numbers are far less2023年02月09日or今天上午10:30intuitive.

stampToDateLabel: Magic of Time Formatting

To convert these timestamps into the format we are familiar with, Anqi CMS provides{{stampToDate(时间戳, "格式")}}This is the usage. The key is the second parameter - the 'format' string.The time formatting of Anqi CMS (developed based on Go language) follows the unique rules of Go language itself, which is not common.Y-m-d H:i:sinstead of using2006-01-02 15:04:05This fixed reference time is used to define the format.

It looks a bit strange, but once you master the rules, you will find it very intuitive:

• 2006Represents the year (YYYY)
• 01Represent month (MM)
• 02Represent date (DD)
• 15Represent hour in 24-hour format (HH)
• 04Represent minutes (MM)
• 05Represent seconds (SS)
• MonAbbreviation for the day of the week (e.g., Mon, Tue)
• MondayFull name of the day of the week
• JanuaryAbbreviation for month (e.g., Jan, Feb)
• JanuaryFull name of the month
• MSTor-0700Represent time zone information

Just replace the datetime format you want to display2006-01-02 15:04:05As the corresponding number or letter in the position.

For example, if you want to format the timestamp as “February 09, 2023”:{{stampToDate(时间戳, "2006年01月02日")}}

If you need to display as "2023/02/09 10:30":{{stampToDate(时间戳, "2006/01/02 15:04")}}

Or more detailedly as "2023-02-09 Thursday 10:30:00":{{stampToDate(时间戳, "2006-01-02 星期一 15:04:05")}}

Remember that each number and letter in the format string has a specific meaning and must be strictly followed2006-01-02 15:04:05Construct this "magic number" accordingly

Apply in the template

Now, let's see how to apply in the actual Anqi CMS templatestampToDate.

Suppose you are creating an article list page and want to display the publication date of each article:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <article>
        <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
        <p>
            发布于：<span>{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
            阅读量：<span>{{ item.Views }}</span>
        </p>
        <p>{{ item.Description|truncatechars:100 }}</p>
    </article>
    {% endfor %}
{% endarchiveList %}

In this example,item.CreatedTimeIt will output the original timestamp, andstampToDate(item.CreatedTime, "2006年01月02日")then it will be converted into a friendly format like “February 09, 2023”.

For example, on the article detail page, you may need to display more precise publication and update times:

<article>
    <h1>{{ archive.Title }}</h1>
    <div class="meta-info">
        <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04:05") }}</span>
        {% if archive.CreatedTime != archive.UpdatedTime %}
            <span>最后更新：{{ stampToDate(archive.UpdatedTime, "2006年01月02日 星期一 15点04分") }}</span>
        {% endif %}
        <span>浏览量：{{ archive.Views }}</span>
    </div>
    <div class="content">
        {{ archive.Content|safe }}
    </div>
</article>

Here, we not only formatted the publication time, but also through judgmentCreatedTimeandUpdatedTimeWhether different decides whether to display the update time and format it into a Chinese style that includes the week information.

Tips for formatting timestamps.

• Maintain consistency:The time display format of the entire website should be consistent to provide a good user experience.
• Consider the target audience:Choose the date and time format that best suits your website's main user group. For example, websites targeting international users may need a more standardizedYYYY-MM-DDFormat, while Chinese users are more accustomedYYYY年MM月DD日.
• Testing is crucial:Test your time display on different browsers and devices, ensuring that it can be displayed correctly in all cases.
• Consult the official Go language documentation:If you need more complex or uncommon formats, you can refer to the official Go language documentationtimeInclude the documentation, understand all supported formatting strings, and customize the display to meet your needs.

MasteredstampToDateTags and time formatting rules in Go language allow you to easily convert timestamp data in Anqi CMS into dates and times that users love and find easy to read, thereby greatly enhancing the professionalism and user-friendliness of website content.

Frequently Asked Questions (FAQ)

Q1: I used{{stampToDate(item.CreatedTime, "YYYY-MM-DD")}}Why is the result displayed incorrectly? A1:This is because AnQi CMS follows the time formatting rules of the Go language, it does not useYYYY-MM-DDThis common format, rather than using2006-01-02As a reference. You should modify the format string to"2006-01-02"To display the year-month-date correctly. Please refer to it strictly.2006-01-02 15:04:05This fixed value is used to construct your format string.

Q2: Besides the creation/update time of the article, where else do we need to usestampToDateto format the timestamp? A2:Do you have in your comment list(commentListlabel'sCreatedTime）User details（userDetaillabel'sLastLogin/ExpireTimeTimestamps obtained in these scenarios, too, are in timestamp format. In these places, you can usestampToDatetags for formatting to provide a more friendly display.

Q3: How do I write the template code to only display the current year? A3:Anqi CMS provides a{% now "2006" %}The tag can directly obtain the current year. If you want to format an existing timestamp to only display the year, you can use{{stampToDate(时间戳, "2006")}}For example,{{stampToDate(item.CreatedTime, "2006")}}It will display the year of the article's publication.