How to format a timestamp into a readable date and time format and display it in AnQi CMS?

In website content operation, the presentation of time is often ignored, but it is an important detail to enhance user experience and content professionalism.The original timestamp number lacks meaning to ordinary users; formatting it into a clear and readable date and time format makes the content more engaging.AnQi CMS knows this, providing a simple and powerful way to handle such needs.

Understanding the timestamp in Anqicms

In Anqi CMS, whether it is the publication time of the article (CreatedTime) or the update time (UpdatedTime), these information is usually stored and transmitted in the form of timestamps.A timestamp is a representation of the number of seconds elapsed since a specific moment (usually the Unix epoch, January 1, 1970, 00:00:00 UTC) to a certain point in time.For example, you may get a shape like in the template1609470335The number, this is the unformatted timestamp. Displaying this number directly makes it difficult for users to understand the actual date and time it represents.

Core function:stampToDateTag

An enterprise CMS to solve the readability problem of timestamps has provided a namedstampToDateThe template tag. The core function of this tag is to convert the original timestamp according to the specified format into a human-friendly date and time string.

Its basic usage is very intuitive:{{stampToDate(时间戳变量, "格式字符串")}}

There are two key parts:

1. Timestamp variableThis is usually fromarchiveDetail/archiveListOr other content tags obtainedCreatedTimeorUpdatedTimefields.
2. Format stringThis is the key to how date and time are displayed. Used by many CMSY-m-d H:i:sThis placeholder is different, the format string of Anqi CMS follows the special conventions of the Go language, namely using oneFixed reference date and timeServe as a format template. This reference date time is2006-01-02 15:04:05. Just write the reference date in the format you wish, and the system will intelligently format the actual timestamp.

For example:

• If you wish to display年-月-日Format the string accordingly"2006-01-02".
• If you wish to display年/月/日Format the string accordingly"2006/01/02".
• If you wish to display月日Format the string accordingly"01-02".
• If you wish to display年-月-日 时:分:秒Format the string accordingly"2006-01-02 15:04:05".
• If you wish to display年时分Format the string accordingly"2006年15时04分".

In this way, you can almost flexibly combine any date and time format you want.

Actual application example

Assuming you are creating an article list page or article detail page and want to display the publication time of each article.

Scenario one: Display the publication date in the article list.

InarchiveListIn the loop, you can use it like thisstampToDateto format tagsCreatedTime:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>发布时间：<span>{{stampToDate(item.CreatedTime, "2006年01月02日")}}</span></p>
        <p>{{item.Description}}</p>
    </li>
    {% endfor %}
{% endarchiveList %}

This code will iterate through the list of articles and display the title, link, publishing time (for example2023年10月27日) and summary of each article.

Scenario two: Display the update time on the article detail page

In the article detail page, you may need to display the article's update time to the minute:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <p>
        发布于：<span>{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>
        更新于：<span>{{stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05")}}</span>
    </p>
    <div>
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

We used herearchive.CreatedTimeandarchive.UpdatedTime(In the document detail page,archiveVariables usually represent the current document object and are used separately2006-01-02 15:04and2006-01-02 15:04:05Formatted.

Practical skills and precautions

• Maintain consistencyKeep the date and time format consistent throughout the website, which helps improve user experience and the professional image of the website.
• Consider the target audience: If your website has an international audience, consider using a more generic date format (such asYYYY-MM-DD) or switch to different formats according to the language pack.
• Memory of Go language string formatting: At first you may feel2006-01-02 15:04:05difficult to remember, you can think of it as a special 'magic date', just remember the meaning of each number and symbol. For example:
  • 2006Year
  • 01Month
  • 02Day
  • 15Hour (24-hour format)
  • 04-> Minutes (Minute)
  • 05-> Seconds (Second)

by masteringstampToDateThe use of tags, you can easily convert timestamp data from Anqin CMS into a user-friendly date and time information, making your website content more professional and easier to read.

Frequently Asked Questions (FAQ)

1. Why do format strings use2006-01-02 15:04:05such specific number combinations instead ofYYYY-MM-DDsuch general placeholders?

This is because Anqi CMS is developed based on Go language, and Go language uses a fixed reference time for formatting date and time2006-01-02 15:04:05 -0700 MST(commonly referred to as 'magic time', in which each number and abbreviation corresponds to a specific time unit, for example2006represents the year,01Representing months, etc.). Simply apply the output format you expect to this reference time, and the system will automatically complete the conversion. This is a concise and efficient format definition method unique to the Go language.

2. If I only want to display the time, for example10:30How should the format string be set?

If you only want to display the time, you can directly use the time part of the reference time to construct the format string. For example, if you want to display时:分The format string can be set to"15:04"If you want to display时:分:秒Then use"15:04:05".

3.stampToDateDoes the tag support time zone conversions for all?

stampToDateThe tag is responsible for converting timestamps to strings in a specified format.By default, it will convert based on the time zone set by the server.If you need to display different time zones for different users, this usually requires handling time zone conversion of timestamps in backend logic, or ensuring that the server's time zone settings match the main audience's needs.The template tag itself does not provide direct timezone conversion parameters, it focuses on formatting timestamps with the existing timezone.