As an experienced website operations expert, I know that flexible time display is crucial for improving user experience and the timeliness of content.Especially relative time displays like “X days ago” or “X hours ago”, which allow readers to quickly understand the freshness of the content and thus better decide whether to delve deeper.stampToDateCan the label achieve this relative time display, and how should we implement it?

In the Anqi CMS template,stampToDateCan we implement the display of "X days ago

For this question, we first need to clarify the security CMS.stampToDateThe positioning and function of the label. We can clearly see from the document description of the Anq CMS,stampToDatedefined as “Format Timestamp Label”, its usage method is{{stampToDate(时间戳, "格式")}}. The "format" is crucial, it follows the Go language's own time formatting rules, for example"2006年01月02日"/"2006-01-02 15:04:05"etc.

This means,stampToDateTagsThe core function is to accurately convert a Unix timestamp (usually a 10-digit number) into a specified format,Absolutedate and time string。It can perfectly output fixed time points such as

However, the relative time display such as “X days ago”, “X hours ago”, is not a simple formatting operation, it requires a series oftime difference calculationFirstly, get the current time, then calculate the difference in hours, days, months, and even years between the current time and the release time, and then dynamically select an appropriate description based on the size of the difference.stampToDateThe tag itself does not have built-in complex logic to perform time difference calculation and intelligent judgment.

Therefore, directly use the Anqi CMS template instampToDatethe tag iscannot be directly implementedThis displays relative time such as 'X days ago', 'X hours ago'. It focuses on presenting timestamps in a preset format rather than performing time comparisons and dynamic output.

Implement 'X days ago' relative time display: the way of曲线救国

AlthoughstampToDateCannot directly implement relative time display, but this does not mean that we are at a loss in the Anqi CMS.As operators, we always find flexible ways to meet the needs of content display.

Method one: use front-end JavaScript to implement

This is the most common and flexible way to implement the "X days ago" feature on a webpage.The core idea is: The original timestamp (or standard date string) of the article is output to the front-end HTML by the Anqi CMS template, and then it is calculated and displayed on the user's browser side with the help of JavaScript.

  1. Template output original timestamp: In the document details or list template of AnQi CMS, we can usearchiveDetailorarchiveListTags, combinedCreatedTimeto output the article's creation timestamp. For example:

    <span class="post-time" data-timestamp="{{ item.CreatedTime }}"></span>

    Here are theCreatedTimeIt is usually a Unix timestamp, which can be directly used by JavaScript.

  2. Front-end JavaScript calculation and display:After the page is loaded, write JavaScript code:

    • Get all elements withdata-timestampattributes.
    • For each element, read itsdata-timestampvalue.
    • Get the current Unix timestamp.
    • Calculate the difference between the current timestamp and the article timestamp (milliseconds).
    • Convert the millisecond difference to units such as seconds, minutes, hours, and days.
    • Based on the converted value, judge and generate text such as 'X seconds ago', 'X minutes ago', 'X hours ago', 'X days ago', 'X months ago', or even 'X years ago'.
    • Update the generated text to the corresponding<span>element.

    To simplify this process, you can use mature JavaScript libraries such asmoment.jsordate-fnsThey provide very convenient APIs for handling date and time calculations and formatting, including the display of relative time.Even without using libraries, pure JavaScript can be implemented, but the amount of code will be slightly larger.

    Advantages:High flexibility, can customize various relative time display rules on the front-end; does not increase the server-side computational burden.Disadvantages:The content is executed by the client JavaScript; users who disable JavaScript will not be able to display it; there may be a slight content 'flicker', that is, the default time (if set) is displayed first, then replaced by JavaScript.

方法二：通过自定义过滤器或后端逻辑扩展（面向开发者）

If there is an extreme requirement for front-end performance or if you want this logic to be completely controlled by the backend, then it is necessary to make certain adjustments to the Anqi CMS.Secondary development or expansion.

AnQi CMS is developed in Go language, and its template engine supports the extension mechanism of "more filters". In theory, a Go language developer can:

  1. Develop a custom Go language functionThe function accepts a timestamp and returns a calculated relative time string (such as “3 days ago”).
  2. Translate this Go function to register as a new filter for the AnQi CMS templateFor example, name ittime_ago.
  3. After that, it can be easily called in the template just like other filters:{{ item.CreatedTime|time_ago }}.

Advantages:Entirely generated on the server side, no JavaScript required, more SEO-friendly (because the text directly captured by search engines is relative time text); good consistency in performance.Disadvantages:requires Go language development capabilities, involving modification or extension of the core code of the security CMS, which has a relatively high threshold for ordinary operators.Currently, the document does not directly mention a similar built-in relative time filter, indicating that it is not a standard feature of the Aanqi CMS.

Why does Anqi CMS not provide such a feature directly?

From the project positioning and technical characteristics of AnQi CMS, its design focuses on 'high efficiency, customizable, easy to expand' and 'simple and efficient system architecture'.stampToDateThe design philosophy may tend to provide a basic and high-performance timestamp formatting tool, leaving the complex and variable time difference calculation and display logic to be implemented by developers or frontend scripts.

Relative time display has many conventions and internationalization requirements, such as 'just now', 'one minute ago', '59 seconds ago', etc. Different languages and cultures have different preferences for the granularity and precision of these descriptions.These general but variable logic can be handled by the front-end, which can avoid the CMS core system from becoming bloated and allow users to highly customize according to their own needs, which is in line with its 'highly customized' advantage.

In summary, the security CMS ofstampToDateLabels is a powerful timestamp formatting tool, used to convert variousAbsoluteDate and time format. If we need to implement 'X days ago', 'X hours ago' such asRelativeTime display, the most direct and recommended approach is to output the original timestamp in the template and then use front-end JavaScript (combined or not with libraries) for calculation and rendering.For teams with development capabilities, also consider extending custom filters through the backend Go language.

Common Questions and Answers (FAQ)

Q1: How do I ensure that the front-end JavaScript getsCreatedTimean accurate timestamp?A1: Anqi CMSarchiveDetailandarchiveListthe tag inCreatedTimeField, by default it will return a Unix timestamp (10 digits). You can output it directly to the HTML element in the template.data-timestampProperties, JavaScript can directly read this property value and treat it as milliseconds (if you need to convert it to seconds, divide by 1000) for calculation, or convert it to a Date object.

Q2: Does using front-end JavaScript to implement relative time display have a negative impact on website performance or SEO?

Q3: If I need multi-language "X days ago" display, can the front-end JavaScript solution support it?A3: Absolutely. Front-end JavaScript can calculate the time difference and then, based on the current page's language environment (for example, throughnavigator.language或模板中输出的语言变量）加载不同的语言包，然后根据语言包中的定义来生成对应的相对时间文本。许多流行的JavaScript日期库（如English)} ]moment.jsordate-fnsAll built-in powerful internationalization (i18n) support, can easily achieve multi-language relative time display.