As an experienced website operations expert, I am well aware that the way website content is presented is crucial for user experience and information transmission efficiency.Especially when dealing with basic information such as time, formatting it in a way that is familiar to the user (for example, including the 12-hour AM/PM format) will greatly enhance the professionalism and user-friendliness of the website.AnQiCMS (AnQiCMS) is a powerful and detail-oriented content management system that naturally provides flexible time formatting tools.Today, let's delve into how to make use of AnQiCMS'sstampToDateLabel, turn the timestamp into a professional time display that includes AM/PM indicators.

How to format a timestamp into a time format that includes AM/PM indicators?

In the template world of AnQi CMS, the precise and beautiful presentation of time is a key factor in improving user experience.Whether it is the publication time of the article, the update date of the product, or the submission time of the comment, a clear and readable date format always makes the user feel comfortable.When we need to convert the original timestamp (a string of numbers) into a date and time that people are accustomed to reading, especially when it includes indicators such as 'AM' or 'PM', AnQiCMS provides a very convenientstampToDate.

Get to knowstampToDate: The magic wand of time formatting

stampToDateIs an AnQiCMS template engine core timestamp formatting tag.The function of it is to convert a Unix timestamp (an integer representing the number of seconds from 1970-01-01 00:00:00 UTC to the present) into a human-readable date and time string.The charm of this tag lies in its extremely high flexibility, which can format timestamps into almost any shape you want according to your needs.

Its basic usage is very intuitive:{{stampToDate(时间戳, "格式")}}

The "timestamp" typically comes from the content data (such as the article'sCreatedTimeorUpdatedTime), and the "format" is the key to defining the output appearance.

Master Golang time formatting: the key of AM/PM

AnQiCMS is developed based on Go language at its core, therefore its time formatting follows the unique specifications of Go language. Go language does not useY-m-d H:i:sThis common placeholder is instead usedA specific reference time layout:2006-01-02 15:04:05.999999999 -0700 MST. Just remember the meaning of each number and symbol in this reference time, and then recombine it according to your needs.

To implement a 12-hour time format with AM/PM indicators, we mainly focus on the reference time in3andPM.

  • 3which represents 12-hour time (without leading zeros).
  • 03Represents a 12-hour time format with a leading zero (for example03).
  • PMIt is a key in Go language used to indicate AM or PM, it will automatically convert the time toAMorPM.

Now, let's see how to combine these elements to achieve the desired effect:

  1. Pure 12-hour time (with AM/PM): If you want to display the time with a morning/afternoon indicator, you can write it like this:{{stampToDate(item.CreatedTime, "3:04 PM")}}This will produce a similar output.3:30 PMor9:00 AMformat.

  2. 12-hour time with leading zero (with AM/PM)If you want the hour to always be two digits (for example03 PM), then use:{{stampToDate(item.CreatedTime, "03:04 PM")}}This will produce a similar output.03:30 PMor09:00 AMformat.

  3. Combine the date with 12-hour time (with AM/PM)In practice, we usually combine the date and time. For example, displaying "October 26, 2023, 03:30 PM":{{stampToDate(item.CreatedTime, "2006年01月02日 下午03:04")}}Or, a more common English format: "Oct 26, 2023 03:30 PM":{{stampToDate(item.CreatedTime, "Jan 02, 2006 03:04 PM")}}You can also adjust the display of the month and date as needed, for example01/02/2006 03:04 PM.

Practice applying formatted time to content

In AnQiCMS, timestamp data is usually present in various content models (such as articles, products) or comments. For example, the publishing time of an article can be accessed througharchive.CreatedTimeoritem.CreatedTimeRetrieve.

Assuming you are designing a detailed page template for an article and want to display the publish date and time with AM/PM below the title, you can write the template code like this:

<article>
    <h1>{{ archive.Title }}</h1>
    <div class="article-meta">
        发布于：<span>{{stampToDate(archive.CreatedTime, "2006年01月02日 03:04 PM")}}</span>
        <!-- 或者更简洁的英文格式 -->
        <!-- 发布于：<span>{{stampToDate(archive.CreatedTime, "Jan 02, 2006 3:04 PM")}}</span> -->
        <!-- 您也可以获取更新时间并格式化 -->
        <!-- 更新于：<span>{{stampToDate(archive.UpdatedTime, "2006年01月02日 03:04 PM")}}</span> -->
    </div>
    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

This code will retrieve the title of the current article and itsCreatedTimeTimestamp formatted as "2006-01-02 03:04 PM" time.If the current time is in the afternoon, it will display "afternoon", and if it is in the morning, it will display "morning".

In this way, you can not only make the boring timestamp more intuitive and readable, but also flexibly adjust the time display format according to the style of the website and the target user group, thereby improving the overall quality of content presentation.

Summary

stampToDateTags are a powerful tool in AnQiCMS template development, providing strong support for timestamp formatting. Especially by understanding the time formatting rules of the Go language and using it skillfully3:04 PMThis layout allows us to easily implement a 12-hour time display with AM/PM indicators.This not only makes the content of the website more professional, but also greatly optimizes the user's reading experience.Master this skill, and it will make your AnQiCMS website more refined in detail.

Frequently Asked Questions (FAQ)

  1. Why does AnQiCMS use such a special date format string (such as "2006-01-02 15:04:05") instead of the commonY-m-d H:i:s?AnQiCMS is developed based on the Go language, the time formatting of the Go language uses a fixed "reference time" to define the layout. This reference time isMon Jan 2 15:04:05 MST 2006, it is usually represented in code as2006-01-02 15:04:05. You do not need to rememberY-m-dwhat these letters represent, but rather remember each number in the reference time (such as2006Represents the year,01Represents the month,02represents the day,15represents hours in 24-hour time,04represents the minute,05Representing seconds) and text (such asPMRepresenting AM/PM) positions and meanings, and then rearrange these elements in the format you want.

  2. I only want to display time in 24-hour format without AM/PM indicators, how can I set it?If your website or users are accustomed to 24-hour time, you just need to use the 24-hour part of the Go language reference time. For example,15representing 24-hour time with a leading zero,04represents the minute,05represents seconds. You can format it like this:

    • {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}It will output.2023-10-26 15:30.
    • {{stampToDate(item.CreatedTime, "15:04:05")}}It will output.15:30:00.

  3. **