How to format the display of the publication and update time of articles in the AnQiCMS template?

In the Anqi CMS website template, displaying the publication and update time of articles is a key factor in improving user experience and content management efficiency.Clearly present this time information, which can not only help visitors quickly understand the timeliness of the content, but also help search engines better crawl and index.AnQiCMS provides a powerful and flexible template tag that allows you to format timestamps into various easily readable date and time formats as needed.

Core mechanism:stampToDateTag

The template system of AnqiCMS is built-in with a namedstampToDateThe formatted timestamp label, which is the core tool for processing article publishing and update times. This label is used to convert the 10-digit Unix timestamp stored in article data (such as1609470335Convert it to the date and time string commonly used in our daily life.

stampToDateThe usage of the tag is very intuitive, it requires two main parameters:

1. Timestamp (timestamp)This is the original time data you want to format, usually obtained from the article object, such asarchive.CreatedTimeoritem.UpdatedTime.
2. format string (format_string)This is a string that defines the output format. It is used by many CMS systems.Y-m-d H:i:sThis placeholder is different, AnQiCMS follows the time formatting rules of the Go language, it uses a fixed reference time2006-01-02 15:04:05Use as the 'template' for format definition. You need to replace the year, month, day, hour, minute, second, and other elements in this reference time with the display style you want.

For example, if you want to display年-月-日then the format string is"2006-01-02"; if you want to display月/日 时:分then the format string is"01/02 15:04".

Get the timestamp of the article

In the AnQiCMS template, the publication time of the article is usually obtained throughCreatedTimefield, while the update time is obtained throughUpdatedTimefield. These fields are stored in the form of Unix timestamps.

When you display the publish time of a single article on the article detail page (for exampledetail.htmlWhenarchiveyou can directly access these timestamps through

• archive.CreatedTimeused for publish time
• archive.UpdatedTimeused for update time

If you are looping through the article list (for examplelist.htmlOr on the home page) the article data is usually defined as a loop variable, for exampleitemAt this point, you can access the timestamp in this way:

• item.CreatedTime
• item.UpdatedTime

Formatting practical example

Here are some common formatting scenarios and their corresponding template codes:

1. Display year-month-date only

This is one of the most commonly used date display formats, for example2023-10-26.

{# 在文章详情页显示发布日期 #}
<span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>

{# 在文章列表中显示更新日期 #}
{% for item in archives %}
    {# ... 其他文章信息 ... #}
    <span>更新于：{{ stampToDate(item.UpdatedTime, "2006-01-02") }}</span>
{% endfor %}

2. Display the complete year-month-date time:minute:second

For example, if you need time information accurate to the second2023-10-26 14:35:01.

{# 显示发布时间的完整格式 #}
<span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04:05") }}</span>

3. Display the date in Chinese format

For example2023年10月26日.

{# 显示中文格式的发布日期 #}
<span>发布于：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>

4. Show only the month and day, or only the hour and minute

You can extract the specific part of the timestamp as needed

{# 只显示月日，例如 10-26 #}
<span>{{ stampToDate(archive.CreatedTime, "01-02") }}</span>

{# 只显示时分，例如 14:35 #}
<span>{{ stampToDate(archive.CreatedTime, "15:04") }}</span>

5. Combine other text and HTML tags

You can combine formatted time with other text, icons, or HTML structures to achieve a richer display effect.

<p>
    <i class="fa fa-calendar"></i> 发布于 <time datetime="{{ stampToDate(archive.CreatedTime, "2006-01-02T15:04:05Z07:00") }}">
        {{ stampToDate(archive.CreatedTime, "2006年01月02日") }}
    </time>
</p>

In the above example,datetimeProperties use the ISO 8601 format, which is more friendly to search engines and accessibility tools, while users see more readable Chinese format.

Summary

BystampToDateLabel, AnQiCMS provides great flexibility to control the display of article publication and update time.Understanding the reference time formatting rules in Go language is the key to mastering its usage.Once familiar, you can easily present various date and time formats that meet design and user requirements, thereby optimizing the display of your website content.

Frequently Asked Questions (FAQ)

1. Why do I followYYYY-MM-DDthe way to set format strings, but the result is2006-01-02?This is usually because you have misunderstood the time formatting rules in the Go language. In Go (and AnQiCMS templates), the format string is not used withYYYY/MMUse a specific reference date instead of a placeholder2006-01-02 15:04:05You need to replace the corresponding part of the reference time with the style you want to output. For example, to display年-月-日you should use"2006-01-02"As a format string, notYYYY-MM-DD.

2. How can I display the current date and time in the template, besides the article's publish and update time?You can use the AnQiCMS providednowLabel to get and display the current date and time. This label also follows the formatting rules of the Go language. For example, to display the current year-month-day, you can use{% now "2006-01-02" %}; To display the current full date and time, use{% now "2006-01-02 15:04:05" %}.

3. Can I display the date as 'today', 'yesterday', or 'N days ago' such relative time?AnQiCMS'stampToDateThe tag is mainly used to format timestamps into a fixed date-time string pattern, and does not directly support relative time displays such as "today", "yesterday", or "N days ago".If you need such a dynamic relative time display, it is usually implemented on the front-end using JavaScript or passed to the template after more complex business logic is calculated on the back-end.A common frontend solution is to first usestampToDateOutput the date in standard format (such as ISO format), then use a JavaScript library (such as Moment.js or date-fns) or a custom script to convert it to relative time after the page is loaded.