How to format timestamp display in AnQiCMS template?

As an experienced website operations expert, I am well aware that the timeliness and presentation of content are crucial to user experience.In AnQiCMS (AnQiCMS) such an efficient content management system, even a seemingly simple date display contains operational wisdom for enhancing the professionalism and readability of the website.Today, let's delve into how to beautifully transform the original timestamps into user-friendly date formats in the AnQiCMS template.

Format the timestamp in AnQiCMS template

On websites built with AnQiCMS, whether it's the time of article publication, product update date, or the moment of comment submission, this information is usually stored in the database in the form of a timestamp (Unix timestamp). Essentially, a timestamp is a series of numbers, for example1609470335It represents the number of seconds elapsed since 00:00:00 UTC on January 1, 1970, to a specific point in time.This is very efficient for computer processing and storage, but it is obviously not intuitive and lacks readability for users accessing the website.

幸运的是，AnQiCMS provides powerful and flexible tools for template developers, making it easy to convert these original timestamps into clear and understandable date and time formats.

Core tool:stampToDateTag

The key to formatting timestamps in AnQiCMS templates is namedstampToDateThe built-in tag. This tag is specifically used to receive a timestamp and, based on the format string you define, convert it into the common date and time format we use in our daily lives.

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

In here, the 'timestamp' is usually the field you get fromarchiveList/archiveDetailor other data tags, such asitem.CreatedTimeorarchive.UpdatedTimeHowever, 'format' is a string that defines the specific style you want the date and time to be displayed in.

It should be especially noted that AnQiCMS is developed based on the Go language, therefore its date formatting follows the unique standards of the Go language, rather than what we commonly see in other systems (such as PHP)Y-m-dorH:i:sThe pattern. In Go language, string formatting is defined by a specific reference time point, which is:2006-01-02 15:04:05.999999999 -0700 MST

You just need to remember the meaning of each number or letter in this reference time, and you can combine it into any date and time format you want.

Practical training: Make time come alive

UnderstoodstampToDateThe basics and formatting rules of Go language, we can flexibly apply it in the AnQiCMS template to make the time information more vivid.

For example, in a list of articles, you may want to display a concise publication date, such as "2023-10-27":

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">{{item.Title}}</a>
        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
    </li>
    {% endfor %}
{% endarchiveList %}

Here, item.CreatedTimeProvided the original timestamp of the article,"2006-01-02"Then tell.stampToDateLabel, please display in the format of "Year-Month-Day."

If it is on the article detail page, you may need to display more detailed update time, including the specific hours and minutes.

{% archiveDetail archive with name="Id" %}
<article>
    <h1>{{archive.Title}}</h1>
    <p>更新时间：{{stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05")}}</p>
    <div>
        {{archive.Content|safe}}
    </div>
</article>

archive.UpdatedTimeProvided the update timestamp,"2006-01-02 15:04:05"then format it into the form of “Year-Month-Day Hour:Minute:Second”.

You can also design a more distinctive date format according to your region or personal preference. For example, if you want to display a date in Chinese format, you can write it like this:

<span>文章发表于：{{stampToDate(item.CreatedTime, "2006年01月02日")}}</span>

Or, if you want to display only the month and date:

<span>{{stampToDate(item.CreatedTime, "01月02日")}}</span>

By combining different parts of the time reference in the Go language, you can create almost any date and time display effect you want.

Use flexibly: Combine with other tags and注意事项

stampToDateTags can be seamlessly embedded into any position of the AnQiCMS template, and witharchiveList/archiveDetail/commentListUse data tags together to precisely control the display of each time information on your website.

In practice, there are a few points to note:

• Data source: Make sure you pass tostampToDateThe variable is indeed a valid timestamp (usually a 10-digit or 13-digit integer). If the variable is empty or not in timestamp format, it may cause the page to display abnormally.
• Go language formattingAgain, emphasize that it is crucial to remember the Go language date formatting rules. If you are unsure what a reference time element represents, you can consult the Go language'stime.FormatThe document is to obtain the most accurate information.
• Template encodingTo avoid character garbling, always ensure that your AnQiCMS template files use UTF-8 encoding consistently.

AnQiCMS provides strong content management capabilities while also focusing on detail control. ThroughstampToDateThe tag not only allows you to make the time information on the website clear and easy to read, but also enables personalized customization according to the brand style and user habits, thereby subtly enhancing the professionalism and customer satisfaction of the website.

Frequently Asked Questions (FAQ)

Q1: Why did I use{{item.CreatedTime}}But it showed a string of numbers instead of a date? A1:This is becauseitem.CreatedTime(as well asUpdatedTimeThe "value" field in AnQiCMS is stored as the original Unix timestamp, which is a numerical sequence representing a specific point in time. To convert it to our daily readable date format, you need to usestampToDateTemplate tags for formatting, for example{{stampToDate(item.CreatedTime, "2006-01-02")}}.

Q2:stampToDateformatting parameters and what I use in other systems (such as PHP)Y-m-dWhat's different? A2:AnQiCMS is developed based on the Go language, its time formatting rules follow the unique standards of the Go language. It does not use symbols such asYrepresents the year,mRepresents a month), but instead uses a fixed reference time point2006-01-02 15:04:05The numbers and characters in it define the format. You need to combine the format you want according to this reference time, for example2006representing a four-digit year,01representing a two-digit month,02Representing two-digit dates and so on.

Q3: If I need to display relative time such as '3 days ago' or 'just now', does AnQiCMS have built-in functions? A3:CurrentlystampToDateThe tag is mainly used to format the timestamp into a fixed date and time string.For displaying relative times such as "a few days ago" or "just now", the AnQiCMS template tag does not provide built-in functionality directly.You usually need to combine a frontend JavaScript library (such as Moment.js or date-fns) to perform calculations and display on the browser side, or handle it through custom logic on the backend (which may require certain development skills).