Manage website content in Anqi CMS, we all hope that visitors can clearly see the publication or update time of the articles.An elegant and clear time format not only enhances the professionalism of the page but also optimizes the user experience.The Anqi CMS makes it very simple to display custom timestamp formats with its flexible template engine.

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

Understand the time data in the AnQiCMS template

in AnQiCMS, the article's publish time (CreatedTimeand update timeUpdatedTimeis usually expressed asTimestampis stored in the database in the form.The timestamp is a series of numbers representing the number of seconds from a fixed point in time (usually the Unix epoch, January 1, 1970, 00:00:00 UTC) to the moment the article is 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 digitized timestamps into the 'year-month-day hour:minute:second' format that we are familiar with in our daily lives or other more readable formats.

Core Tools:stampToDatetags

AnQiCMS's template engine provides a namedstampToDateThe built-in tag, which is our secret weapon for formatting timestamps.This tag 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(时间戳变量, "格式字符串")}}.

Here are two key parts:

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

The Mystery of Time Formatting: Reference Time in Go Language

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

You need to remember that every number and symbol in this reference time represents the corresponding part you want to see in the final output:

  • 2006Represents the year (full 4 digits)
  • 01Represents the month (with leading zero, such as 01)
  • 02Represents the date (with leading zero, such as 02)
  • 15代表小时 (24小时制，带前导零，如15)
  • 04代表分钟 (带前导零，如04)
  • 05代表秒钟 (带前导零，如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-day', you should write it like this; if you want to output 'month/day/year', write it as this.2006-01-02this pattern; if you want to output 'month/day/year', write it as this.01/02/2006The system will parse and format your actual timestamp based on this '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

Actual application: Formatting timestamps in the template

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

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

On the article detail page, we usually go througharchiveDetailTag to get the detailed information of the article, includingCreatedTime.

Assuming 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)

In the article list page, we usually usearchiveListto display multiple articles in a loop. Inside the loop, we can handle each article'sCreatedTime.

假设我们想在列表中的每篇文章下方显示“2023-10-27”。

`twig

    {% archiveList archives with type