As an experienced website operations expert, I fully understand the importance of content timeliness and presentation to user experience.In a highly efficient content management system like AnQiCMS, even a seemingly simple date display embodies the operational wisdom to enhance the professionalism and readability of the website.Today, let's delve into how to beautifully transform original timestamps into user-friendly date formats in AnQiCMS templates.

Format timestamp display in AnQiCMS template

On websites built with AnQiCMS, whether it's the article publication time, 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). A timestamp is essentially 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 websites.

It is fortunate that AnQiCMS provides powerful and flexible tools for template developers, allowing them to easily convert these raw timestamps into clear and understandable date and time formats.

core tools:stampToDatetags

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

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

Here, 'timestamp' is usually the field you get fromarchiveList/archiveDetailor other data tags, such asitem.CreatedTimeorarchive.UpdatedTimeWhile “format” is a string that defines the specific style you want the date and time to appear in.

It is particularly important to note that AnQiCMS is developed in Go language, therefore its date formatting follows the unique standard of Go language, rather than the common one we see in other systems (such as PHP)Y-m-dorH:i:sPattern. 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 Exercise: Bring time to life

UnderstoodstampToDateThe basics and formatting rules of the [en]language, we can flexibly apply it in the AnQiCMS template, making the time information vivid.

For example, in a list of articles, you may want to only 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.CreatedTimeIt provides the original timestamp of the article,"2006-01-02"then tellsstampToDateLabel, please display in the format of “Year-Month-Day”.

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

{% 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 more distinctive date formats based on region or personal preferences. For example, if you want to display dates 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 reference time in the Go language, you can create almost any date and time display effect you want.

Flexible application: Combine other tags and注意事项

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

In practice, there are several points to note:

  • Data source: Ensure that 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.
  • Format in Go languageAgain, it is crucial to remember the date formatting rules in Go language. If you are unsure about what a certain time element represents, you can refer to the documentation of Go language'stime.FormatDocument 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 powerful content management capabilities while also focusing on detail control.stampToDateTags, not only can you make the time information on the website clear and readable, but you can also customize it according to the brand style and user habits, thereby enhancing the professionalism and user satisfaction of the website subtly.

Common Questions (FAQ)

Q1: Why did I use{{item.CreatedTime}}Did it show a string of numbers instead of a date? A1:This is becauseitem.CreatedTime(andUpdatedTimeThe "等）field" stored internally in AnQiCMS is the original Unix timestamp, which is a numerical sequence representing a specific point in time. To convert it to the date format we commonly use,stampToDateFormat template tags, for example,{{stampToDate(item.CreatedTime, "2006-01-02")}}.

Q2:stampToDatethe format parameters and the ones I use in other systems (such as PHP)Y-m-ddiffer? A2:AnQiCMS is developed in Go language, its time formatting rules follow the unique standard of Go language. It does not use symbols (such asYRepresents the year,mrepresenting months), but instead uses a fixed reference time point.2006-01-02 15:04:05with the various numbers and characters to define the format. You need to combine them according to this reference time to create the desired format, for example2006Represents a four-digit year,01Represents a two-digit month,02Represents a two-digit date, etc.

Q3: If I need to display relative time such as '3 days ago' or 'just now', does AnQiCMS have built-in features for that? A3:CurrentlystampToDateTags are mainly used to format timestamps into fixed date and time strings.For the display of relative time such as 'a few days ago' or 'just now', AnQiCMS template tags do not provide built-in functions directly.You usually need to combine a front-end JavaScript library (such as Moment.js or date-fns) to perform calculations and display on the browser side, or process through custom logic on the back end (which may require certain development skills).