As a senior 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 fundamental information such as time, formatting it in a way that follows the user's habits (for example, using the 12-hour AM/PM format) can greatly enhance the professionalism and user-friendliness of the website.AnQiCMS (AnQiCMS) is a powerful and detail-oriented content management system, which naturally also provides flexible time formatting tools.stampToDateTags, turning the timestamp into a splendid transformation, formatted into a professional time display with AM/PM indicators.

How to format a timestamp into a time format with AM/PM indicator using AnQi CMS Practical Guide?

In the template world of AnQi CMS, the precise and beautiful presentation of time is a key factor in enhancing user experience.Whether it's the publication time of the article, the update date of the product, or the submission moment of the comments, a clear and readable date format always makes users feel comfortable.stampToDateLabel.

KnowstampToDateThe Magic Wand of Time Formatting

stampToDateIs a core timestamp formatting tag in the AnQiCMS template engine.Its role is to convert the 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 the timestamp into almost any shape you want according to your needs.

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

The 'timestamp' here usually comes from the content data (such as articles)CreatedTimeorUpdatedTime), and 'format' is the key to defining the output appearance.

Master Golang time formatting: the key of AM/PM

AnQiCMS is developed based on the Go language, therefore its time formatting follows the unique specifications of the Go language. The Go language does not useY-m-d H:i:sThis common placeholder is instead used by aspecific reference time layout:2006-01-02 15:04:05.999999999 -0700 MST[en] You only need to remember the meaning of each number and symbol in this reference time and then recombine them according to your needs.

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

  • 3represents 12-hour time (without leading zeros).
  • 03Represents 12-hour time with leading zeros (e.g.,03.).
  • PMIt is a keyword in the Go language used to indicate AM or PM, and it will automatically convert according to the time.AMorPM.

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

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

  2. 12-hour time format with leading zeros (with AM/PM)If you want the hours to always be two digits (e.g.,03 PM) then use:{{stampToDate(item.CreatedTime, "03:04 PM")}}This will output something similar to03:30 PMor09:00 AMformat.

  3. Combined with the date and 12-hour time (with AM/PM)In practical application, we usually combine the date and time. For example, showing "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 example:01/02/2006 03:04 PM.

Practice Application: Apply formatted time to content

In AnQiCMS, timestamp data usually exists in various content models (such as articles, products) or comments. For example, the publish time of an article can be accessed viaarchive.CreatedTimeoritem.CreatedTimeretrieved.

Assuming you are designing a detail page template for an article and want to display the publication date below the title along with the AM/PM time, 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 current article's title andCreatedTimeTranslate the timestamp to the format '2006-01-02 03:04 PM'.If the current time is in the afternoon, it will display 'afternoon', and if it is in the morning, it will display 'morning'.

This way, you can not only make dry timestamps more intuitive and readable, but also flexibly adjust the time display format according to the style of the website and the target user group, thus 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 Go language's formatting rules and using them skillfully.3:04 PMThis layout allows for easy implementation of 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.Mastering this skill will make your AnQiCMS website look more refined in the details.

Common Questions (FAQ)

  1. Why does AnQiCMS use such a special time format string (such as "2006-01-02 15:04:05") instead of the commonY-m-d H:i:s?AnQiCMS is developed based on Go language, and the time formatting in Go language uses a fixed 'reference time' to define the layout. This reference time isMon Jan 2 15:04:05 MST 2006In code, it is usually represented as 【en】：2006-01-02 15:04:05What you need to do is not to memorize 【en】：Y-m-dWhat each letter represents, but to memorize each number in the reference time (such as) 【en】：2006representing a year,01Represents the month, 【en】：02Represents the day, 【en】：15represents the hour in 24-hour format,04represents the minutes,05represents the seconds), and the text (such asPMrepresents AM/PM) positions and meanings, then rearrange these elements in the format you prefer.

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

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

  3. **