In Anqi CMS, we all hope that visitors can clearly see the publication or update time of the articles.A clear and beautiful time format not only enhances the professionalism of the page but also optimizes the user experience.AnQi CMS with its flexible template engine makes it very simple to customize the display format of timestamps.

Next, we will explore how to present the publication time of articles accurately and elegantly in the AnQiCMS template.

Understand the time data in the AnQiCMS template.

In AnQiCMS, the publish time of the article (CreatedTimeAnd update time(UpdatedTime) is usually expressed with timestampStored in the form of a string in the database. A timestamp is a series of numbers representing the number of seconds elapsed from a fixed point in time (usually the Unix epoch, January 1, 1970, 00:00:00 UTC) to the moment the article was published or updated.Although this original format is very efficient for computer processing, it is difficult for users to understand.

Therefore, our goal is to convert these digital timestamps into the familiar 'year-month-day hour:minute:second' format or other more readable formats.

Core Tool:stampToDateTag

AnQiCMS provides a template engine namedstampToDateThe built-in label that is the secret weapon for formatting timestamps.This label can receive a 10-digit timestamp and convert it to a readable date string according to the format we specify.

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

These two key parts:

  1. Timestamp variableIt is usually:archive.CreatedTimeoritem.CreatedTime(In the article list loop).
  2. Format stringThis is the key to determining the time display style. It follows a set of date and time formatting rules unique to the Go language (the development language of AnQiCMS).

The Mystery of Time Formatting: Reference Time in Go Language

The date and time formatting method in Go Language is somewhat special, it does not use the commonY-m-d H:i:sorYYYY-MM-DD HH:MM:SSInstead of such placeholders, use onespecific reference date and timeCome as a template. This reference time is:2006-01-02 15:04:05.

Remember, every number and symbol in this reference time represents the corresponding part you want to see in the final output:

  • 2006represent the year (full 4 digits)
  • 01represent the month (with leading zero, such as 01)
  • 02represent the date (with leading zero, such as 02)
  • 15Represent hours (24-hour format, with leading zero, such as 15)
  • 04Represent minutes (with leading zero, such as 04)
  • 05Represent seconds (with leading zero, such as 05)

If there are other elements in the reference time, such asMon(Monday),Jan(January), they also have their respective meanings.

This means, if you want to output "year-month-date", you should follow this pattern; if you want to output "month/day/year", write it as2006-01-02this pattern.01/02/2006. The system will parse and format your actual timestamp based on the template you provide.

For example:

  • "2006-01-02"It will be displayed as2023-10-27
  • "2006年01月02日"It will be displayed as2023年10月27日
  • "15:04:05"It will be displayed as10:30:00
  • "2006/01/02 15:04"It will be displayed as2023/10/27 10:30
  • "Mon, 02 Jan 2006"It will be displayed asFri, 27 Oct 2023

Application in practice: Formatting timestamps in the template.

UnderstoodstampToDateAfter the formatting rules of tags and Go language, we can actually apply them in the AnQiCMS template.

In the detail page of a single article (detail.html)

In the detail page of an article, we usually go througharchiveDetailTag to get the details of the article, includingCreatedTime.

Suppose we want to display the format as "Published on: October 27, 2023, 10:30".

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="article-meta">
        {# 获取文章发布时间戳 #}
        {% archiveDetail articleCreatedTime with name="CreatedTime" %}
        {# 使用 stampToDate 格式化并显示 #}
        <span>发布于：{{stampToDate(articleCreatedTime, "2006年01月02日 15:04")}}</span>
        {# 您也可以直接在 archive 变量上操作，更加简洁 #}
        {# <span>发布于：{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}</span> #}
    </div>
    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

On the article list page (list.htmlorindex.html)

On the article list page, we usually usearchiveListtags to display multiple articles in a loop. Inside the loop, we can handle each article'sCreatedTimeto format.

Assume we want to display "2023-10-27" below each article in the list.

`twig

    {% archiveList archives with type