In website operation, clear, consistent, and beautiful time information display is crucial to user experience.Whether it is the article publish date, product update time, or event deadline, a friendly date and time format always allows visitors to obtain information faster.stampToDateLet us easily control various date and time formats of timestamps in the front-end.

Saying goodbye to the original timestamp: why do we need formatting?

We usually obtain the time from the database, which is often a Unix timestamp, a string of seemingly meaningless numbers (for example1609470335)。Such raw data displayed on the website is not intuitive and may confuse users.It is more important that the demand for time display is different under different content scenarios: in article lists, it may only be necessary to display a concise “2023-08-15”; while on article detail pages, it may need to be precise to “2023年08月15日 14:30:59”.

Security CMS ofstampToDateLabels are the tools to solve these problems. They can flexibly present the timestamp stored in the background according to the format we define on the website front-end.

stampToDateThe secrets of usage: Formatting rules of Go language

stampToDateThe syntax of labels is very intuitive:{{stampToDate(时间戳, "格式")}}. Here, the 'timestamp' usually refers to the one we obtain fromarchiveListorarchiveDetailetc. tagsCreatedTimeorUpdatedTimeThe fields are. The 'format' parameter is the core of controlling the final display effect.

Here is something that needs attention, the template engine of AnQi CMS is based on Go language, so its time formatting rules follow the unique style of Go language. It is not like the one we are accustomed to in our daily life.YYYY-MM-DDorHH:MM:SSSuch a direct representation of the format, but adopts a fixed reference time instead.2006年01月02日 15时04分05秒—— as the 'template' for formatting.

This means, if you want to display a certain date and time format, you just need to write out this reference time in the format you expect.stampToDateThe label will be converted according to your writing style. For example:

  • Show the year:Reference the time of2006represents the year.
  • Show the month:Reference the time of01This indicates the month (with a leading zero).
  • Show date:Reference the time of02This indicates the date (with a leading zero).
  • Show hour (24-hour format):Reference the time of15This indicates the hour.
  • Show minutes:Reference the time of04It means minutes.
  • Show seconds:Reference the time of05It means seconds.

Understanding this 'magic-like' reference time, we can freely combine various date and time formats.

常用日期时间格式示例:

以下是一些常见的格式化需求及其在stampToDate标签中的应用:

  1. 简洁的日期(年-月-日):

    {{ stampToDate(item.CreatedTime, "2006-01-02") }}
    {# 输出: 2023-08-15 #}
    
  2. 中文日期(年_月_日):

    {{ stampToDate(item.CreatedTime, "2006年01月02日") }}
    {# 输出: 2023年08月15日 #}
    
  3. Time (HH:mm):

    {{ stampToDate(item.CreatedTime, "15:04") }}
    {# 输出: 14:30 #}
    
  4. Complete date and time (YYYY-MM-DD HH:mm:ss):

    {{ stampToDate(item.CreatedTime, "2006-01-02 15:04:05") }}
    {# 输出: 2023-08-15 14:30:59 #}
    
  5. Custom delimiter date (DD/MM/YYYY):

    {{ stampToDate(item.CreatedTime, "02/01/2006") }}
    {# 输出: 15/08/2023 #}
    
  6. Date including the day of the week:

    {{ stampToDate(item.CreatedTime, "Mon, 02 Jan 2006") }}
    {# 输出: Tue, 15 Aug 2023 #}
    

The application in practical templates

stampToDateTags are most commonly used in scenarios such as article lists, product details, comment sections, etc., where time information needs to be displayed.

For example, on a list page of articles, you may want to display the publish time of each article in a concise 'Year-Month-Day' format:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <div class="article-card">
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p class="article-meta">发布于:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
        <p>{{ item.Description }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

In the detail page of an article, you may need to display more detailed publishing and update times:

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

Through such flexible application, the time display on your website will no longer be monotonous numbers, but clear and easy-to-read information that fits the context.

**Practice and Reflection

  • Maintain consistency:In different areas of the website, try to maintain consistency in the display format of time, to avoid confusing the user.
  • Choose granularity based on context:The list page tends to be concise, and the detail page can be more detailed. Choose the format that best meets the user's needs.
  • Consider internationalization:AlthoughstampToDate直接控制的是格式字符串,但通过自定义这些字符串,您可以针对不同语言版本的网站,提供符合当地习惯的日期时间格式(例如,中文网站使用“年-月-日”,英文网站使用“Mon, Jan 02 2006”)。

Security CMS ofstampToDateTags, with its unique Go language formatting mechanism, provides us with the ability to finely control the display format of time on the front end.Mastering this tag will make your website content more professional and enhance the user experience.


Common Questions and Answers (FAQ)

1. How to set the format to display “day of the week”?

Reference time in Go language date formatMonrepresenting the day of the week (abbreviation),MondayRepresents the day of the week (full). So, if you want to display 'Tuesday, August 15, 2023', you can try using{{stampToDate(item.CreatedTime, "Mon, 2006年01月02日")}}.

**2. `Created