How to format timestamps and display them on the page as a readable date and time?

In website operation, the timeliness of content is often the key to attracting readers' attention.Whether it is the publication date of the article or the update time of the product, presenting this information in a clear and understandable way on the page will greatly enhance the user experience.However, you may find that the time information recorded by AnQiCMS backend, when directly called in the template, often appears as a long string of numbers, which is what we commonly call a timestamp.These original timestamps are convenient for internal system processing, but they are lacking in readability for ordinary users.

Luckily, AnQiCMS provides a very practical and powerful tag that can easily convert these timestamps into the easily readable date and time format we are familiar with in our daily life.

Familiarize yourself with timestamps and the time data in AnQiCMS.

In AnQiCMS, many content objects contain time-related fields. For example, when you usearchiveDetailorarchiveListLabels to get articles (archive) or product details will findCreatedTime(creation time) andUpdatedTimeThe fields such as (update time). These fields return the Unix timestamp, which is the number of seconds elapsed since 00:00:00 UTC on January 1, 1970.They accurately record the time points of events, but further formatting is needed to display them in a friendly manner to visitors.

applystampToDateFormat the tag

To solve the readability problem of timestamps, AnQiCMS built instampToDateThis template tag. Its usage is very intuitive, you just need to provide the timestamp to be formatted and specify the date-time format you want it to display. Its basic syntax structure is as follows:

{{ stampToDate(时间戳, "格式") }}

The "timestamp" here is the number value you obtained fromCreatedTime/UpdatedTimethese fields. The "format" section is the key to defining the output style.

Mastering date-time formatting: The magic numbers in Go language

AnQiCMS is developed based on the Go language, therefore, its date and time formatting rules also follow the unique way of the Go language. You may need to remember a special reference time:2006-01-02 15:04:05. This string is not random, but a standard template used by the Go language to represent the parts of date and time:

• 2006: Represents the year
• 01: Represents the month (preceded by a zero)
• 02: Represents the date (preceded by a zero)
• 15representing 24-hour format hours03means 12-hour format
• 04Represents minutes
• 05Represents seconds

By cleverly combining and arranging these 'magic numbers', you can flexibly customize various date and time display effects.

Some common formatting examples:

• Show only year, month and day (separated by hyphens): "2006-01-02"For example, it will show as:2023-10-27.
• Show only year, month and day (separated by slashes): "2006/01/02"For example, it will show as:2023/10/27.
• Show full date and time (to the minute): "2006-01-02 15:04"For example, it will show as:2023-10-27 10:30.
• Display the complete date and time (to seconds): "2006-01-02 15:04:05"For example, it will show as:2023-10-27 10:30:45.
• Chinese date format: "2006年01月02日"For example, it will show as:2023年10月27日.

Practical application: tostampToDateintegrate into the template

Now, let's see how to apply it in the actual AnQiCMS template.stampToDateTags:

Example 1: Display the publishing time on the article detail page

<div class="post-meta">
    <span class="publish-date">发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</span>
</div>

Example 2: Display the update time of each article on the article list page

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p class="update-info">最近更新于：{{ stampToDate(item.UpdatedTime, "2006/01/02") }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

You can see these simple code snippets.stampToDateHow to combine tags witharchiveDetailorarchiveListUsing the timestamp field to combine. Whether you want to display time accurate to seconds or just need a simple date, this tag can easily help you achieve it, making your website content come alive.

When designing a template, it is recommended that you choose a unified date and time display format for the entire website to ensure consistency in page style, thereby providing visitors with a smoother and more professional browsing experience. MasteringstampToDateLabel, it is an indispensable practical skill in AnQiCMS content operation.

Frequently Asked Questions (FAQ)

1. Q: Why is there a deviation between the formatted time and the actual time?A: The AnQiCMS server uses the time zone of the server it is located on by default when processing timestamps.If your server time zone does not match the time zone you expect to display (such as your local time zone), there will be a deviation.You can check the time zone configuration of the server, or adjust it if AnQiCMS provides the corresponding time zone configuration options.In some special cases, it may be necessary to convert the timestamp to a time zone by the backend logic before passing it to the template.
2. Q:stampToDateCan the label handle all types of timestamps? For example, 13-digit millisecond timestamps?A:stampToDateThe tag is expected to handle a 10-digit Unix timestamp, which is a second-level timestamp. If your timestamp is a 13-digit millisecond timestamp, you may need to convert it before passing it instampToDateFirst, convert it to a 10-digit timestamp in seconds (for example, by dividing it by 1000 in the Go language timestamp acquisition logic).
3. Q: Can I add non-numeric charactersstampToDateto the format string of the label, such as "AM/PM"?A:stampToDateThe format string is based on the reference time of the Go language2006-01-02 15:04:05In this reference time,03represents the hour in a 12-hour format (with a leading zero), along withPMcan indicate morning or afternoon. For example,"2006-01-02 03:04 PM"It will display2023-10-27 10:30 AMor2023-10-27 10:30 PMYou can combine these elements and customize the text as needed to achieve a more complex display effect.