How to accurately control the timestamp date format display in the `stampToDate` tag of AnQiCMS on the front-end?

In website operation, clear, consistent and beautiful time information display is crucial for user experience.Whether it is the publication date of the article, the update time of the product, or the deadline of the event, a friendly date and time format always allows visitors to obtain information more quickly.AnQiCMS (AnQiCMS) is well-versed in this, providing us with a powerful and flexible template tagstampToDateLet us easily control the display of multiple date and time formats in front-end timestamps.

Saying goodbye to raw timestamps: why do we need to format?

The time we usually get from the database is often a Unix timestamp, a string of seemingly meaningless numbers (such as1609470335). Such original data displayed on the website is not intuitive and can confuse users.It is more important that the needs for time display are different in different content scenarios: In an article list, it may only be necessary to display the concise "2023-08-15";And in the article detail page, it may need to be accurate to "August 15, 2023, 14:30:59".

Anqi CMS'stampToDateThe tag is the tool to solve these problems. It 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 tags is very intuitive:{{stampToDate(时间戳, "格式")}}Here, the "timestamp" is usually what we get fromarchiveListorarchiveDetailand other tags.CreatedTimeorUpdatedTimeThe field is equal. The "format" parameter is the core control of the final display effect.

It should be noted that the template engine of Anqicms is based on Go language, so its time formatting rules also follow the unique way of Go language. It is not like our daily habits.YYYY-MM-DDorHH:MM:SSSuch a direct representation of the format, but instead, a fixed reference time is used——2006年01月02日 15时04分05秒——is used as the formatting “template”.

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

• Show the year:In the reference time of2006represents the year.
• Show the month:In the reference time of01represents the month (with leading zero).
• Show the date:In the reference time of02represents the date (with leading zero).
• Display hour (24-hour format):In the reference time of15represents hours.
• Display minutes:In the reference time of04represents minutes.
• Display seconds:In the reference time of05represents seconds.

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

Common date and time format examples:

The following are some common formatting requirements and their applications in:stampToDatethe tag usage:

1. Concise date (Year-Month-Day):

   {{ stampToDate(item.CreatedTime, "2006-01-02") }}
   {# 输出: 2023-08-15 #}
   

2. Chinese date (Year_Month_Date):

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

3. Time (HH:MM):

   {{ stampToDate(item.CreatedTime, "15:04") }}
   {# 输出: 14:30 #}
   

4. Full 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 day of the week:

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

Use in the actual template

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

For example, on an article list page, you may want to display the publication time of each article in a concise "year-month-date" 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 publication 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 %}

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

**Practice and Thought

• Maintain consistency:In different areas of the website, try to maintain consistency in the display format of the same type of time to avoid confusing users.
• Choose granularity based on context:List pages tend to be concise, detail pages can be more detailed. Choose the format that best meets user needs.
• Consider internationalization:ThoughstampToDateDirectly controlled is the format string, but by customizing these strings, you can provide date and time formats that comply with local customs for different language versions of websites (for example, Chinese websites use "Year-Month-Day", and English websites use "Mon, Jan 02 2006").

Anqi CMS'stampToDateThe tag, with its unique Go language formatting mechanism, provides us with the ability to finely control the time display format on the front end.Master this tag, and it will make your website content more professional and improve the user experience.

Frequently Asked Questions (FAQ)

1. How should I set the format to display 'weekday'?

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

**2. `Created